1 chapter 4: user interface design. 2 introduction … purpose of user interface design:- easy to...
TRANSCRIPT
![Page 1: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/1.jpg)
1
Chapter 4: User Interface Design
![Page 2: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/2.jpg)
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
![Page 3: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/3.jpg)
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
![Page 4: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/4.jpg)
4
How to design a good Interface?
Golden Rules……..
![Page 5: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/5.jpg)
5
How to design a good Interface?
Golden Rule
Place the user in control
Make the interface consistent
Reduce the user’s memory load
![Page 6: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/6.jpg)
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
![Page 7: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/7.jpg)
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.
![Page 8: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/8.jpg)
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.
![Page 9: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/9.jpg)
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.
![Page 10: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/10.jpg)
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
![Page 11: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/11.jpg)
11
User interface design process
![Page 12: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/12.jpg)
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
![Page 13: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/13.jpg)
13
Design issue
Response time Help facilities Error handling Menu and command
labeling Application accessibility Internationalization
![Page 14: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/14.jpg)
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.
![Page 15: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/15.jpg)
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
![Page 16: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/16.jpg)
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
![Page 17: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/17.jpg)
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)
![Page 18: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/18.jpg)
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
![Page 19: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/19.jpg)
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)
![Page 20: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/20.jpg)
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
![Page 21: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/21.jpg)
“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
![Page 22: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/22.jpg)
“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
![Page 23: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/23.jpg)
“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
![Page 24: 1 Chapter 4: User Interface Design. 2 Introduction … Purpose of user interface design:- Easy to learn Easy to use Easy to understand](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfaf1a28abf838c9d076/html5/thumbnails/24.jpg)
“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)