User Interface DesignSEII-Lecture 12

Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.

2

Recap

• Importance of user interface design– Useful, useable, used

• Three golden rules – Place the user in control– Reduce the user’s memory load– Make the interface consistent

• Analysis and design process– Interface analysis and modeling – Interface design– Interface construction – Interface validation

3

Interface Analysis

• Understand the problem before design– The end users who will interact with the system– The tasks that end user must perform– The content that is presented– The environment

4

User Analysis

• “User interface” justifies the focus on user• Different mental images of users• Different from the design model• User interviews• Sales input• Marketing input• Support input

5

Questions to Better Understand the Users [1/2]

• Are users trained professionals, technicians, clerical, or manufacturing workers?

• What level of formal education does the average user have?

• Are the users capable of learning from written materials or have they expressed a desire for classroom training?

• Are users expert typists or keyboard phobic?• What is the age range of the user community?

6

Questions to Better Understand the Users [2/2]• Will the users be represented predominately by one

gender?• Do user work normal office hours or do they work until the

job is done?• Is the software to be an integral part of the work users do or

will it be used only occasionally?• What is the primary spoken language among users?• Are users expert in the subject matter that is addressed by

the system?• Do users want to know about the technology that sits

behind the interface?

7

Task Analysis and Modeling [1/2]

• What work will the user perform in specific circumstances?

• What tasks and subtasks will be performed as the user does the work?

• What specific problem domain objects will the user manipulate as work is performed?

• What is the sequence of work tasks – the workflow?

• What is the hierarchy of tasks?

8

Task Analysis and Modeling [2/2]

• Use cases– How an actor interact with the system

• Task elaboration– Manual to a new system– Existing system to a new system

• Object elaboration– Physical objects used

• Workflow analysis– Work process with several users

• Hierarchical representation

9

Analysis of Display Content [1/2]

• Different display formats/types• Are different types of data assigned to consistent

geographic locations on the screen?• Can the user customize the screen location for

content?• Is proper on-screen identification assigned to all

content?• If a large report is to be presented, how should it

be partitioned for ease of understanding?

10

Analysis of Display Content [2/2]

• Will mechanisms be available for moving directly to summary information for large collections of data?

• Will graphical output be scaled to fit within the bounds of the display device that is used?

• How will color be used to enhance understanding?

• How will error messages and warnings be presented to the user?

11

Analysis of the Work Environment

• User friendly location– Proper lighting, good display height, easy keyboard

access• Factors to be considered vary in different

environments e.g. factory floor and airplane cockpit

• Workplace culture

12

Interface Design Steps

• Using information developed during interface analysis, define interface objects and actions

• Define events (user actions) that will cause the state of the user interface to change. Model this behavior.

• Depict each interface state as it will actually look to the end user.

• Indicate how the user interprets the state of the system from information provided through the interface.

13

Design Issues [1/4]

• System response time– Primary complaint– Length and variability

• User help facilities– Help for all functions / all the time– Way to request help– Presentation– How to return to normal interaction?– How will help information be structured?

14

Design Issues [2/4]

• Error information handling– “bad news” for users– Often useless or misleading information– Message should be understandable– Message should provide constructive advice– Message should indicate negative consequences– An audible or visual cue– Message should be “nonjudgmental”

15

Design Issues [3/4]

• Menu and command labeling– Command line interfaces– Power-users still prefer it– Will every menu option have a corresponding command?– What form will commands take?– How difficult will it be to learn and remember the

commands?– Can commands be customized or abbreviated?– Are menu labels self-explanatory within the context?– Are submenus consistent with the function implied by a

master menu item?

16

Design Issues [4/4]

• Application accessibility– Easy access for people with special needs– Guidelines available

• Internationalization– Different languages and cultures– “globalized” software– Localization– Guidelines available– Unicode standard

17

Web Application Interface Design

• Where am I?– An indication of the application accessed– Information about the user’s current location

• What can I do now?– User’s current options

• Where have I been, where am I going?– Facilitate navigation– Should provide a map

18

Interface Design Principles and Guidelines [1/2]

• Anticipation• Communication• Consistency• Controlled autonomy• Efficiency• Flexibility• Focus• Fitt’s law

19

Interface Design Principles and Guidelines [2/2]

• Human interface objects• Latency reduction• Learnability• Metaphors• Maintain work product integrity• Readability• Track state• Visible navigation

20

Interface Design Principles and Guidelines

• Nielsen and Wagner guidelines, 1996• Reading speed on a computer monitor is about

25% slower• Avoid “under construction” signs• Users prefer not to scroll• Navigation menus and head bars should be

designed consistently• Aesthetics should never supersede functionality• Navigation options should be obvious

21

Design Evaluation• The length and complexity of the requirements model or written

specification of the system and its interface provide an indication of the amount of learning required by users of the system.

• The number of user tasks specified and the average number of actions per task provide an indication of interaction time and the overall efficiency of the system.

• The number of actions, tasks, and system states indicated by the design model imply the memory load on users of the system.

• Interface style, help facilities, and error handling protocol provide a general indication of the complexity of the interface and the degree to which it will be accepted by the user.

22

Summary• Interface analysis

– User analysis, task analysis and modeling, analysis of display content and work environment

• Interface design steps• Design issues

– System response time, user help facilities, error information handling, menu and command labeling, application accessibility, internationalization

• Web application design interface guidelines– Anticipation, communication, consistency, controlled autonomy,

efficiency, flexibility, focus, Fitt’s law, learnability, readability, metaphors• Design Evaluation