Designing the User Interface

2

Overview

• User interfaces handle input and output that involve a system user directly

• Focus on interaction between user and computer, called human-computer interaction (HCI)

• Metaphors to describe the user interface

• Usability and Web-based development guidelines

• Approaches to documenting dialog designs, including UML diagrams from OO approach

3

Identifying and Classifying Inputs and Outputs

• Identified by analyst when defining system scope

• Requirements model produced during analysis

– Event table includes trigger to each external event

– Triggers represent inputs

– Outputs are shown as responses to events

4

Traditional and OO Approaches to Inputs and Outputs

• Traditional approach to inputs and outputs – Shown as data flows on context diagram, data flow

diagram (DFD) fragments, and detailed DFDs

• OO approach to inputs and outputs– Defined by message entering or leaving system– Included in event table as triggers and responses– Actors provide inputs for many use cases– Use cases provide outputs to actors

5

User versus System Interface

• System interfaces: I/O requiring minimal human interaction

• User interfaces: – I/O requiring human interaction– User interface is everything end user comes into

contact with while using the system– To the user, the interface is the system

• Analyst designs system interfaces separate from user interfaces

• Requires different expertise and technology

6

Understanding the User Interface

• Physical Aspects of the User Interface– Devices touched by user, manuals, documentation,

and forms

• Perceptual Aspects of the User Interface– Everything else user sees, hears, or touches such as

screen objects, menus, and buttons

• Conceptual Aspects of the User Interface– What user knows about system and logical function of

system

7

Aspects of the User Interface

8

User-Centered Design

• Focus early on the users and their work by focusing on requirements

• Usability - system is easy to learn and use• Iterative development keeps focus on user

– Continual return to user requirements and evaluate system after each iteration

• Human-computer interaction (HCI) – Study of end users and interaction with computers– A field of study evolved from the study of ergonomics

• Human factors engineering (ergonomics)– The study of human interaction with machines in general

9

Fields Contributing to the Study of HCI

10

Metaphors for Human-Computer Interaction

• Direct manipulation metaphor

• Document metaphor

• Dialog metaphor

11

Direct Manipulation Metaphor

• User interacts with objects on display screen instead of typing commands on a command line.

• Desktop metaphor– A direct manipulation approach in which the display

screen includes an arrangement of common objects found on a desk

• A notepad, a calendar, a calculator, and folders containing documents

12

Desktop Metaphor Based on Direct Manipulation Shown on Display Screen

13

Document Metaphor

• Interaction with the computer involves with browsing and entering data on electronic documents– WWW: based on the document metaphor; everything

at a Web site is organized as pages that are linked as hypertext

– Hypertext: document that allow the user to click on a link and jump to a different part of the document or to another document

– Hypermedia: technology that extends the hypertext concepts to include multimedia content such as graphics, video, and audio

14

Document Metaphor Shown as Hypermedia in a Web Browser

15

Dialog Metaphor

• Much like carrying on a conversation or dialog

• A way of thinking about human-computer interaction– Computer listens to and response to user questions or

comments– User listens to and response to the computer’s

questions

16

Dialog Metaphor Expresses the Messaging Concept

17

Guidelines for DesigningUser Interfaces

• Visibility– All controls should be visible– Provide immediate feedback to indicate control is

responding

• Affordance– Appearance of control should suggest its functionality

– purpose for which it is used

• System developers should use published interface design standards and guidelines

18

Eight Golden Rules for Interactive Interface Design

19

Strive for Consistency

• Forms, names, menu, size and shape of icons, and sequence followed to carry out tasks should be consistency throughout the system.

• Easy to learn• Increase productivity• If the user is interacting with multiple applications in

separate windows, a different visual appearance may help the user differentiate them

• When the user is learning several applications in on session, some difference in the interfaces may help the user remember which application is which.

20

Strive for Consistency

• Standard operation is achieved by:– Keeping header and footer information in the same locations for

all screens.– Using the same keystrokes to exit a program.– Using the same keystroke to cancel a transaction.– Using a standard key for obtaining help.– Standardized use of icons when using graphical user interface

screens.– Consistent use of terminology within a screen or Web site.– Providing a consistent way to navigate through the dialog.– Consistent font alignment, size, and color on a Web page.

21

Enable Frequent Users to Use Shortcuts

• As the frequency of use increases, so do the user’s desires to reduce the number of interactions and to increase the pace of interaction.

• Abbreviations, special keys, hidden commands, and macro facilities are appreciated by knowledgeable users

• Fast response times and fast display rates are other attractions for frequent users.

22

Offer informative Feedback

• For every user action, there should be system feedback.

• For frequent and minor actions, the response can be modest where as for infrequent and major actions, the response should be more substantial.

23

Offer informative Feedback

Feedback to the user is necessary in seven distinct situations:– The computer has accepted the input.– The input is in the correct form.– The input is not in the correct form.– There will be a delay in processing.– The request has been completed.– The computer cannot complete the request.– More detailed feedback is available.

24

Design Dialogs to Yield Closure

• Each dialog with the system should be organized with a clear sequence (beginning, middle, and end).

• A well-defined task has a beginning, middle, and end, so user’s tasks on the computer should also feel this way.

• The user often focuses on a task.

25

Offer Simple Error Handling

• The systems designer must prevent the user from making errors whenever possible.

• The ways to do this is – to limit available options and allow the user to choose

from valid options– to provide adequate feedback– to provide mechanism to handling errors

• If an error does occur, the system must help the user correct the error.

26

Permit Easy Reversal of Actions

• Users need to feel that they can explore options and take actions that can be canceled or reversed without difficulty.

• The designers should be sure to – include cancel buttons on all dialog boxes – allow users to go back one step at any time– delete something substantial

• a file, a record, a transaction

– ask the user to confirm the action

27

Support Internal Locus of Control

• Experienced users want to feel that they are in charge of the system and the system responds to their commands.

• Designers can provide much of this comfort and control through the wording of prompts and messages.– Writing out a dialog like the manager and assistant

message dialog will lead to a design that conveys the feeling of control.

28

Reduce Short-Term Memory Load

• People have many limitations, and short-term memory .

• People can remember only about 7 chunks of information at a time.

• The interface designer cannot assume that the user will remember anything from form to form, or dialog box, during an interaction with the system.

29

Documenting Dialog Designs

• Done simultaneously with other system activities

• Based on inputs and outputs requiring user interaction

• Used to define menu hierarchy – Allows user to navigate to each dialog– Provides overall system structure

• Storyboards, prototypes, and UML diagrams

30

Documenting Dialog Designs

• The structure charts for subsystems (transaction analysis) include details about menu structure of the interactive parts of the system.

• The structure charts for each event (transform analysis) includes details about the dialog with the user.

• The menu reflect the overall system structure from the standpoint of the user.

• Each menu contains a hierarchy of options, and often arranged by subsystem or by actions on objects.

• Each menu might include duplicate functions.

31

Overall Menu Hierarchy Design

32

Documenting Dialog Designs

• Sometimes several versions of the menus are needed based on the type of user.

• Menus should include options that are not activities from the event list.– backup, recovery, user account maintenance, user

preferences, help

33

Virious Types Of Menu Configurations

34

Dialogs and Storyboards

• Many methods exist for documenting dialogs

– Written descriptions following flow of events

– Narratives

– Sketches of screens

– Storyboarding – showing sequence of sketches of display screen during a dialog

35

Storyboard for Downtown Videos

36

Sections of a Dialog Diagram Box

37

Dialog Diagram Illustrating Sequence, Selection, And Iteration

38

Dialog diagram for the Customer Information System

39

Guidelines for Designing Windows and Browser Forms

• Each dialog might require several window forms• Standard forms are widely available

– Windows forms: Visual Basic, C++, Java– Browser forms: HTML, VB-Script, JavaScript, ASP or

Java servlets

• Implementation– Identify objectives of form and associated data fields– Construct form with prototyping tools

40

Forms Design Issues

• Form layout and formatting consistency– Headings, labels, logos– Font sizes, highlighting, colors– Order of data-entry fields and buttons

• Data keying and data entry (use standard control)– Text boxes, list boxes, combo boxes, etc.

• Navigation and support controls

• Help support: tutorials, indexed, context-sensitive

41

Proper Flow Between Data Entry Fields

42

Poor Flow Between Data Entry Fields

43

Standard Control

• Text boxes• Radio buttons• Check boxes• List boxes• Drop down lists• Combination boxes• Spin boxes• Buttons

44

Standard Control

• Text boxes– When the input data values are unlimited in scope

• Radio buttons– When data has limited predefined set of mutually exclusive values

• Check boxes– When value set consists of a simple yes or no value

• List boxes– When data has a large number of possible values

• Drop down lists– When data has large number of possible values and screen space is too

limited for a list box• Combination boxes

– When need to provide the user with option of selecting a value from a list or typing a value that may or may not appear in the list

• Spin boxes– When need to navigate through a small set of choices or directly typing

a data value

45

Standard Control

• Drop down calendars• Slider edit controls• Masked edit controls• Ellipsis controls• Alternate numerical

spinners• Check list boxes• Check tree boxes

46

Standard Control

47

Sample of Input Form

48

Navigation and Support Controls

• Minimize, maximize and close buttons in the top-right corner.

• Horizontal and vertical scroll bars, the record selection bar on the left panel.

• Record navigation arrows at the bottom of the window

49

Help Support

• Tutorial– Assist in training new users– Can be organized by task

• Indexed list of help topics– Can be invoked either through a keyword search or with a help

wizard• Help wizard is simply a program that does an automatic keyword

search based on words found in a question or sentence

• Context-sensitive help– Can be based on indexed list of help, but it is invoked differently– Automatically displays the appropriate help topic based on the

location of the cursor.

50

Guidelines for Designing Web Sites

• Draw from guidelines and rules for designing Windows forms and browser forms

• Website uses:

– Corporate communication

– Customer information and service

– Sales, distribution, and marketing

• Must work seamlessly with customers 24/7

51

10 Good Deeds in Web Design

• Place the organization’s name and logo on every page.• Provide a search function if the site has more than 100 pages.• Write simple headlines and page titles that clearly explain what the page is

about.• Structure the page to facilitate reader scanning and help users ignore large

chunk of the page• Use hypertext to structure the content.• Use product photos, but avoid cluttered and bloated product family pages

with lots of photos.• Use relevance-enhanced image reduction when preparing small photos and

images.• Use link titles to provide users with a preview of where each link will take

them before they have clicked on it.• Ensure that all important pages are accessible for users with disabilities.• Do the same as everybody else.

52

Web Site Design Principles

• 3 broad aspect of Web design– Designing for the computer medium– Designing the whole site– Designing for the user

53

Designing for the Computer Medium

• Designers can select from a wide array of video display fonts, colors, and layouts, but the look of the site should flow from its function and organization’s goals – Craft the look and feel of the pages to take advantages of the

medium.– Make the design portable since it will be accessed with a wide

range of technology.– Design for low bandwidth since users will not want to wait for a

page to load.– Plan for clear presentation and easy access to information to

ease user’s navigation through the site.– Reformat information for on-line presentation when it comes from

other sources.

54

Designing the Whole Site

• The entire site must have unifying themes and a structure.– Craft the look and feel of the pages to match the

impression desired by the organization.– Create smooth transitions b/w Web pages so users

are clear about where they have been and where they are going.

– Lay out each page using a grid pattern to provide visual structure for related groups of information

– Leave a reasonable amount of white space on each page b/w groups of information.

55

Designing for the User

• It is important to focus Web design efforts on the users and their needs.– Design for interaction b/c Web users expect sites to be

interactive and dynamic.– Guide the user’s eye to information on the page that is the most

important.– Keep a flat hierarchy so that user does not have to drill down too

deeply to find detailed information.– Use the power of hypertext linking to help users move around

and through the site.– Decide how much content per page is enough based on the

characteristics of the typical user.– Design for accessibility for a diverse group of users, including

those with disabilities.

56

Dialog Design for RMO Phone-Order

• Steps in dialog models

1. Record customer information

2. Create new order

3. Record transaction details

4. Produce order confirmation

• Traditional approach – produce structure chart

• OO approach – expand SSD to include forms

57

Required Forms for RMO

• Main menu

• Customer

• Item search

• Product detail

• Order summary

• Shipping and payment options

• Order confirmation

58

Design Concept for Sequential Approach to Create New Order Dialog

59

Design Concept for Order-Centered Approach to Create New Order Dialog

60

Prototype Forms for an Order-Centered Approach to the Dialog

61

Prototype Forms for an Order-Centered Approach to the Dialog (continued)

62

Dialog Design for RMO Web Site

• Basic dialog between user and customer similar to phone-order representative

• Web site will provide more information for user, be more flexible, and be easier to use

• More product pictures are needed

• Information needs are different for customer than for phone-order employees

• Guidelines for visibility and affordance are used to convey positive company image

63

RMO’s Home Page

64

Product Detail Page from RMO Web Site

65

Shopping Cart Page from RMO Web Site

66

Summary

• User interface is everything user comes into contact with while using the system

– Physically, perceptually, and conceptually

• To some users, user interface is the system

• User-centered design means:

– Focusing early on users and their work

– Evaluating designs to ensure usability

– Applying iterative development

67

Summary (continued)

• User interface is described with metaphors (desktop, document, dialog)

• Interface design guidelines and standards are available from many sources

• Dialog design starts with events, adds dialogs for integrity controls, user preferences, help, menus

• OO approach provides UML models to document dialog designs, including sequence diagrams, collaboration diagrams, and class diagrams