1 Chapter 4: User Interface Design

2 Introduction … Purpose of user interface design:-  Easy to learn  Easy to use  Easy to understand

3 Interface Design Typical error in design:-  Lack of consistency  Too much memorization  No guide/help  No context sensitivity  Poor response  Arcane/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 interaction  Allow user interaction to be interruptible and undoable.  Streamline interaction as skill levels advance and allow the interaction to be customized  Hide technical internals from the casual user  Design for direct interaction with objects that appear on the screen

7 Place the user in control  Reduce demand on short-term memory.  Establish meaningful defaults.  Define shortcuts that are intuitive.  The visual layout of the interface should be based on a real world metaphor.  Disclose information in a progressive fashion.

8 Reduce user’s memory load  Reduce demand on short-term memory.  Establish meaningful defaults.  Define shortcuts that are intuitive.  The visual layout of the interface should be based on a real world metaphor.  Disclose information in a progressive fashion.

9 Make a interface consistent  Allow the user to put the current task into a meaningful context.  Maintain consistency across a family of applications.  If past interactive models have created user expectations, do not make changes unless 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 analysis Interface 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 percentagesParticipants 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)