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)