1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to...
-
Upload
randell-freeman -
Category
Documents
-
view
230 -
download
0
Transcript of 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to...
1
Chapter 4: User Interface Design
2
Introduction …Purpose of user interface design:-Purpose of user interface design:-
Easy to learn
Easy to useEasy to use
Easy to understandEasy to understand
3
Interface DesignTypical error in design:-Typical error in design:-
Lack of consistency
Too much memorizationToo much memorization
No guide/helpNo guide/help
No context sensitivityNo context sensitivity
Poor responsePoor response
Arcane/unfriendlyArcane/unfriendly
4
How to design a good Interface?
Golden Rules……..
5
How to design a good Interface?
Golden Rule
Place the user in control
Make the interface consistent
Reduce the user’s memory load
6
Place the user in control Define interaction mode – does not force a user into
unnecessary or undesired action
Provide for flexible interactionProvide for flexible interaction
Allow user interaction to be interruptible and Allow user interaction to be interruptible and undoable. undoable.
Streamline interaction as skill levels advance Streamline interaction as skill levels advance and allow the interaction to be customizedand allow the interaction to be customized
Hide technical internals from the casual userHide technical internals from the casual user
Design for direct interaction with objects that Design for direct interaction with objects that appear on the screenappear on the screen
7
Place the user in control Reduce demand on short-term memory. Reduce demand on short-term memory.
Establish meaningful defaults. Establish meaningful defaults.
Define shortcuts that are intuitive. Define shortcuts that are intuitive.
The visual layout of the interface should be The visual layout of the interface should be based on a real world metaphor. based on a real world metaphor.
Disclose information in a progressive fashion.Disclose information in a progressive fashion.
8
Reduce user’s memory load Reduce demand on short-term memory. Reduce demand on short-term memory.
Establish meaningful defaults. Establish meaningful defaults.
Define shortcuts that are intuitive. Define shortcuts that are intuitive.
The visual layout of the interface should be The visual layout of the interface should be based on a real world metaphor. based on a real world metaphor.
Disclose information in a progressive fashion.Disclose information in a progressive fashion.
9
Make a interface consistent Allow the user to put the current task into a Allow the user to put the current task into a
meaningful context. meaningful context.
Maintain consistency across a family of Maintain consistency across a family of applications. applications.
If past interactive models have created user If past interactive models have created user expectations, do not make changes unless expectations, do not make changes unless there is a compelling reason to do so. there is a compelling reason to do so.
10
User interface design model
IDM
User Model
Mental modelDesign model
Implementation model
a profile of all end users of the system
the user’s mental image of what the interface is
the interface “look and feel” coupled with supporting information that describe interface syntax and semantics
a design realization of the user model
11
User interface design process
12
Interface analysisInterface analysis means understanding:-
The people (end-users) who will interact with the system through the interface;
The tasks that end-users must perform to do their work
The content that is presented as part of the interface
The environment in which these tasks will be conducted
13
Design issue
Response time Help facilities Error handling Menu and command
labeling Application accessibility Internationalization
14
WebApp interface design Where am I? The interface should
Provide an indication of the WebApp that has been accessed Inform the user of her location in the content hierarchy
What can I do now? The interface should always help the user understand his current options What functions are available? What links are live? What content is relevant?
Where have I been, where am I going? The interface must facilitate navigation. Provide a “map” (implemented in a way that is easy to
understand) of where the user has been and what paths may be taken to move elsewhere within the WebApp.
15
Effective WebApp design Effective interfaces are visually apparent and
forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work.
Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.
Effective applications and services perform a maximum of work, while requiring a minimum of information from users
16
Evaluate quality & usability of user interface Some benefits of good usability system such as
increased productivity, reduce the number of errors during the interaction and the decrease of necessary support & training (Maguire, 2001).
Some criteria can evaluate such as performance time, number of usability problem identified, critically of the raised usability problem & number of usability problems for the information design
17
Evaluate quality & usability of user interface Evaluate product methods (Duman & Salzman,
2006):- Inspection method (heuristic & cognitive walkthrough)
Usability testing (effectiveness, efficiency, satisfaction, errors, learnability & flexibility)
Self-report methods (questionnaire, interviews, focus groups)
Method of observation (ethnography)
18
Usability testing (example 1) Health Management System
Purpose of HMS is to assist people to record the variety of physiological data & monitor their health status by themselves.
Method: questionnaire, participants, experiments
19
“Questionnaire”
Questionnaire is divided into three parts: Regular product usability metrics
Create new user account at first time
Product interaction customized for kinect product
“Participants”
45 participants to execute the tasks in the experimental process
29 male & 16 female
Usability testing (example 1)
20
“Design of Experiment”
Fig. 1 show the experimental process
Usability testing (example 1)
Measurement of the HR
Initializing HMS
Execute the task by Kinect
game
Measurement of the HR
Fill in the Usability
Questionnaire
Fig. 1 Experimental process
“Experiment Equipment”
The participants played & evaluated the Kinect sport game based HMS in the experiment
The experimental equipment was blood pressure meter (Fig. 2) and system devices (Fig. 3 and Fig. 4)
Usability testing (example 1)
Fig. 2 Blood pressure Fig. 3 Kinect device
Fig. 4 Monitor device
“Result”
A system is recorded the participant’s heart rate before & after the experiment
Usability testing (example 1)
Fig. 5 Male participant Fig. 6 Female participant
“Heart rate variety”
Table 1 shows the average increased of heart rate. There are eight participants had 55%, 11 participants increased 65%, 16 participants increased 75% and 10 participants increased 75%.
The results indicated that the users would lead to effective in the system
Usability testing (example 1)
Increased percentages Participants
55% 8
65% 11
75% 16
85% 10
Table 1. Average increased heart rate
“Questionnaire results”
From three items in the analysis results of the product interaction are positive significant (p < 0.05).
They are includes the “pay attention in the use the product”, “use the product would not tired”, and “use the product was uncomfortable”.
Usability testing (example 1)