View
227
Download
1
Category
Preview:
Citation preview
310414310414 UI DEVELOPMENTUI DEVELOPMENT1
USER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENT
310414310414SOFTWARE ENGINEERINGSOFTWARE ENGINEERING
310414310414SOFTWARE ENGINEERINGSOFTWARE ENGINEERING
310414310414 UI DEVELOPMENTUI DEVELOPMENT2
USER INTERFACE (UI) DEVELOPMENTUSER INTERFACE (UI) DEVELOPMENT
UI is in many ways the “packaging” of the software as it is the most visible part of the system from the users’ viewpoint
developing a UI has as much to do with the study of people as with technology issues
the UI establishes a dialog between the software and its user this dialog needs to be clear and unambiguous
during Requirements Capture we establish where the UI will be actors and use cases define the boundary
during System Analysis and System Design we specify what the UI will look like from the users’ viewpoint
UI layout, data input/output, dialog description/structure
310414310414 UI DEVELOPMENTUI DEVELOPMENT3
USER INTERFACE DEVELOPMENT PROCESSUSER INTERFACE DEVELOPMENT PROCESS
UI RequirementsCapture
UI Analysis
UI Design
UI Implementation
UI Testing
(System) RequirementsCapture
System Analysis
System Design
(System) Implementation
(System) Testing
310414310414 UI DEVELOPMENTUI DEVELOPMENT4
USER INTERFACE DEVELOPMENT PEOPLEUSER INTERFACE DEVELOPMENT PEOPLE
many skills and viewpoints are required to develop a UI
programmers: think in terms of programming languages and computer artifacts
UI is something added to the system to make it “user friendly”
analysts: think in terms of the user’s job UI is a representation of the forms, books, control panels, etc.
in the user’s world
human factors experts: think in terms of behavioral science UI provides users with stimulus and response mechanisms
that maximize their performance
graphics designers: think in terms of visual presentation/layout UI is a succession of screens that are like pages in a
magazine-each one designed to be attractive, to flow, and to convey information
310414310414 UI DEVELOPMENTUI DEVELOPMENT5
FACTORS IMPACTING ON UI DEVELOPMENTFACTORS IMPACTING ON UI DEVELOPMENT
To help ensure a better chance of success of the new system, we need to look beyond just the technology
To help ensure a better chance of success of the new system, we need to look beyond just the technology
characteristics of the users– physiology – cognitive abilities– sensory/motor capabilities – cultural influences
characteristics of the tasks– physical objects and events – concepts, goals and plans– perceptions and actions – purpose and value of the task
characteristics of the users’ environment– the physical world – language and concepts– stimuli/affordances – society
An understanding of these factors willhelp us design better user interfaces!
310414310414 UI DEVELOPMENTUI DEVELOPMENT9
Actionlanguage
UI DEVELOPMENT — MODELS & DYNAMICSUI DEVELOPMENT — MODELS & DYNAMICS
Systemmodel
PresentationlanguageMental
model
TaskmodelConceptual
model
310414310414 UI DEVELOPMENTUI DEVELOPMENT12
UI DEVELOPMENT — DYNAMICS OF INTERACTIONUI DEVELOPMENT — DYNAMICS OF INTERACTION
1. The user starts with a goal to be accomplished
2. Based on the conceptual model, the user formulates a plan of action to reach the goal
3. The user translates actions in the plan into steps required to accomplish them using the computer
4. Using the action language, the user executes the steps in the plan
5. The system processes each user input, which may involve computation, accessing data, formatting output, etc.
6. After each step, feedback through the presentation language shows the result of the actions and provides guidance on what to do next
310414310414 UI DEVELOPMENTUI DEVELOPMENT13
UI DEVELOPMENT — METAPHORSUI DEVELOPMENT — METAPHORS
metaphormetaphor: explaining : explaining unfamiliar conceptsunfamiliar conceptsin terms of in terms of familiar onesfamiliar ones
metaphormetaphor: explaining : explaining unfamiliar conceptsunfamiliar conceptsin terms of in terms of familiar onesfamiliar ones
The use of appropriate metaphors in the conceptual model will increase the likelihood that the user will attain a correct
mental model of the task model and the system model.
“You can see that the metaphor question is entirely separate from concepts such as graphic icons or windows. It is also much more difficult to deal with. The effort, however, will definitely be worth our while; it is this area, more than any other, that we can make the breakthroughs that will allow the ordinary user to view the computer as simple.”
Bill Gates, CEO Microsoft
e.g., desktop metaphor – the Macintosh or Windows interfaceis like a desk top in an office
310414310414 UI DEVELOPMENTUI DEVELOPMENT15
UI DEVELOPMENT — METAPHORS (cont’d)UI DEVELOPMENT — METAPHORS (cont’d)
the conceptual model is the users “road map” of the system if you have a wrong road map, you will go to the wrong place!
literalism the extent to which the system’s functionality matches the metaphor
an electronic spreadsheet is like a paper spreadsheet ...
magic the extent to which the the system’s functionality extends the metaphor
automatic calculation in an electronic spreadsheet is “magic”
metaphors help us to acquire a correct road map of a system by transferring understanding from things we already know, to things we do not know (e.g., spreadsheet) good metaphor selection can significantly improve usability
310414310414 UI DEVELOPMENTUI DEVELOPMENT16
UI REQUIREMENTS CAPTURE — USERSUI REQUIREMENTS CAPTURE — USERS
Know who your users will be!Know who your users will be!
not all users are the same!– different levels of expertise in problem domain– different levels of knowledge of the system– different frequency of using the system– different need to use the system
they are not all like the designer!
So what?So what?
we need to:– understand the differences– understand why the differences exist– design to deal with the differences
either exploit or minimize their effect
310414310414 UI DEVELOPMENTUI DEVELOPMENT17
UI REQUIREMENTS CAPTURE — USER TASKSUI REQUIREMENTS CAPTURE — USER TASKS
Gather information on current/desired tasks that will help in (re)designing tasks for the new system
Gather information on current/desired tasks that will help in (re)designing tasks for the new system
top-down –> look at a task as a meaningful unit of worke.g., register for courses
helps in understanding task goals anddesigning overall flow of steps in the new system use cases
containthis
information!
ultimate focus should be on task goals, not task steps
identify breakdowns in current tasks
bottom-up –> look at a task as a sequence of steps/actionse.g., specify semester and year
specify primary choicesspecify alternate choices, etc.
helps in understanding user’s goals andidentifying objects (data) involved in the task
310414310414 UI DEVELOPMENTUI DEVELOPMENT18
UI REQUIREMENTS CAPTURE — UI ELEMENTSUI REQUIREMENTS CAPTURE — UI ELEMENTS
Identify what data (attributes) the user will manipulateIdentify what data (attributes) the user will manipulate
Consider the actors that interact with each use case and ask:
– What information does the actor need to supply to the system?
– What information does the system need to supply to the actor?
– Which of the domain model classes are suitable as user-interface elements for the use case?
– What user-interface elements does the actor work with?
– What actions can the actor invoke, and what decisions can the actor make?
– What guidance and information does the actor need before invoking each action in the use case?
310414310414 UI DEVELOPMENTUI DEVELOPMENT19
ASU Course RegistrationASU Course Registration
UI Requirements CaptureUI Requirements Capture
User Interface ElementsUser Interface ElementsRegister for coursesRegister for courses Use Case Use Case
310414310414 UI DEVELOPMENTUI DEVELOPMENT20
ASU — REGISTER FOR COURSES UI ELEMENTSASU — REGISTER FOR COURSES UI ELEMENTS
to register for a course, a student actor needs to supply the following information:– semester
– year
– course code
– offering id
– indicate whether this is a primary or alternate choice
310414310414 UI DEVELOPMENTUI DEVELOPMENT21
UI ANALYSIS & DESIGN — UI PRESENTATIONUI ANALYSIS & DESIGN — UI PRESENTATION
need to decide how UI elements will be represented in the user interface (e.g., text box, menu, etc.) and where they will be placed
– sketch to get a rough idea of layout and look (use sticky notes or PowerPoint)
– prototype for most important actors to get feedback
– verify navigation, consistency, compliance with standards
310414310414 UI DEVELOPMENTUI DEVELOPMENT22
ASU Course RegistrationASU Course Registration
UI Requirements CaptureUI Requirements Capture
User Interface PresentationUser Interface PresentationRegister for coursesRegister for courses Use Case Use Case
310414310414 UI DEVELOPMENTUI DEVELOPMENT23
ASU — UI PRESENTATIONASU — UI PRESENTATION
Register for CoursesRegister for Courses
Cancel RegisterDone
Year: 2002 Semester: Spring
Alternate?: Yes NoCourse offering:
Course code:
Course title:
310414310414 UI DEVELOPMENTUI DEVELOPMENT25
UI ANALYSIS & DESIGN — DIALOG DESCRIPTIONUI ANALYSIS & DESIGN — DIALOG DESCRIPTION
for each task we construct a “mainline” dialog description that describes what the user normally has to do to complete the task (ignoring errors)– step-by-step description of how a user and the system interact via
the user interface to accomplish a task (scenario)
a dialog should be described from theperspective of the user, not the system
dialogs are analyzed procedurally to verify that the steps involved are efficient and accomplish the desired task use sketches, mock-ups, prototyping, etc.
Goal: Goal: seamlessness(when an object or function is needed
for a task in progress, it is “right there”)
310414310414 UI DEVELOPMENTUI DEVELOPMENT26
ASU Course RegistrationASU Course Registration
UI Analysis and DesignUI Analysis and Design
Dialog DescriptionDialog DescriptionScenario of Scenario of Creating a Student’s ScheduleCreating a Student’s Schedule
310414310414 UI DEVELOPMENTUI DEVELOPMENT27
ASU — DIALOG DESCRIPTIONASU — DIALOG DESCRIPTION
1. The system displays the Register for Courses form.2. The user selects a semester and year.3. For each primary course the user wishes to select
3.1. The user selects a primary course code.3.2. The system displays the course title.3.3. The user selects a course offering.
4. For each alternate course the user wishes to select4.1. The user selects an alternate course code.4.2. The system displays the course title.4.3. The user selects a course offering.
5. The user clicks the Done button.6. The system displays the status of the course registration
(succeeded/failed).
most of this information is found in the flow of events—analysis for a use case
310414310414 UI DEVELOPMENTUI DEVELOPMENT28
UI ANALYSIS & DESIGN — DIALOG STRUCTUREUI ANALYSIS & DESIGN — DIALOG STRUCTURE
Finally, we need to put individual dialogs together into a dialog structure for the system’s user interface
– sequencing of/flow between individual tasks
– optional versus required tasks
– dialog style menus, forms, commands, function keys, etc.
– input aspects action language
– output aspects presentation language
there are many alternatives from which to choose
UI prototyping tools can help to get user feedbackand evaluate alternative dialog structures
310414310414 UI DEVELOPMENTUI DEVELOPMENT29
UI ANALYSIS & DESIGN — GENERAL PRINCIPLESUI ANALYSIS & DESIGN — GENERAL PRINCIPLES
Consistency similar actions in similar
situations
Closure– organize actions so that the user
knows that a task has completed
Error handling– minimize users’ opportunity to
make errors (e.g., keystrokes)
Reversibility– actions should be reversible
Control– users should always feel in
control of the interaction
Cognitive load– the load on the user’s short term
memory should be minimized
Accuracy & completeness– the information must be as
accurate and as complete when using the system as without it
Speed– a task should not take longer to
do with the help of the system than without it
shortcuts can help
Feedback– there should be informative
feedback for every user action
310414310414 UI DEVELOPMENTUI DEVELOPMENT30
SUMMARY — USER IINTERFACE DEVELOPMENTSUMMARY — USER IINTERFACE DEVELOPMENT
Organize the functionality of a system to support common user tasks.
Select appropriate dialog styles according to user and task characteristics.
Assign dialog styles consistently.
Provide alternative dialog styles for different user types.
Pay attention to usability issues!
Recommended