design basics and rules of human interface dr. yan liu department of biomedical, industrial and...

Design basics and rules of human interface

Dr. Yan Liu

Department of Biomedical, Industrial and Human Factors Engineering

Wright State University

2

To Err is Human

Many Accidents Are Inherent in Design or Installation of Human Interfaces (Example) Bad interfaces are slow or error-prone to use Bad interfaces cost money and lives

Making Mistakes is Human’s Nature Humans are not infallible consistent creatures Systems should be designed to reduce the likelihood of those mistakes and to

minimize the consequences when mistakes happen

The Core of Interface Design Put the user first Keep the user in the center Remember the user at the end

3

Navigation Design Navigation

The ability to find one’s way around an application (e.g. website) Think about structures

Local structure Structure within a page or screen

Global structure Structure of entire application, movement between screens or pages

Wider still Relationships between different applications

4

Local Structure

Go-Seeking Behavior Users have some idea of what they are after and a partial model of the system,

and meander through the system to try to get closer to their goals System needs to give the users enough knowledge to help them get closer to

their goals

Start Goal

5

Local Structure Four Design Rules

Users should know where they are The web page or screen should make clear where the users are in terms of the

interaction or state of the system e.g. Some web pages show “breadcrumbs” at the top of the screen, the path of

the titles which indicate where the page is in the entire website Users should know what they can do

What can be pressed or clicked to go somewhere or do something Users should know where they are going (or what will happen)

Where they will be taken after clicking a button or a link Icons that are not self-explanatory should always be accompanied by labels or at the

very least tooltips or some similar techniques Users should know where they have been (or what they have done)

The system should give feedback or confirmation of what the users have done e.g. When a file in Microsoft Word is being saved, a status bar at the bottom of

its page shows its progress

6

website

top level category sub-categorythis page

live linksto higher levels

“Breadcrumbs” Showing Path Through the Website Hierarchy

7

Global Structure

Overall Structure of An Application The way how various screens, pages or device states link together

Hierarchy Organization Usually by functions of system elements, but can also by roles, user types,

modules, etc.

The system

info and help management messages

add user remove user

Functional Hierarchy of a Messaging System

8

Global Structure

Hierarchy Organization (Cont.) Detailed knowledge of the intended user is essential

Different people may have different internal structures for their knowledge and may use different vocabulary

It is not good to create a hierarchy that the designer understands but not the users Deep hierarchies are difficult to navigate

It is better to have broad top-level categories or to present just a few levels of menu on one screen or web page

Items on a screen or page should be structured, depending on the user’s purpose e.g. If the user wants to look up information of a particular state in the USA, an

alphabetical list of all state names would be best; if the user wants to search for states in a particular region, then a list by region would be more appropriate

9

Global Structure

Dialog

Pastor: [Groom’s name], do you take [Bride’s name] to be your lawful wedding wife, ….

Man: I do

Pastor: [Bride’s name], do you take [Groom’s name] to be your lawful wedding husband, ….

Woman: I do

Pastor: I now pronounce you husband and wife

Dialog in a Wedding Vow

• Describes the general flow of the wedding vow, with blanks for the names of the bride and groom• Shows the pattern of interaction between the three parties

10

Global Structure

Dialog (Cont.) Human-computer dialogue

Overall patterns of interaction between the user and system Details may differ

Network diagrams Principal states or screens are linked together with arrows They can

Show what leads to what Show what happens when Include branches and loops Be more task-oriented than hierarchy

11

Main screen Remove user Confirm

Add user

Network Diagram Showing the Process of Adding or Removing a User from the Messaging System

12

Wider Still

Wider Still Everything we design sits among other devices and applications Implications

Style issues Conform to platform standards to ensure consistency between applications

e.g. Main menus of windows are normally placed on the top of the windows

Functional issues Be able to interact with files, read standard formats, and handle “cut and paste”

across files Navigation issues

Support linkages between applications e.g. In a email, being able to double click an attachment icon and have the

right application launched for the attachment

13

Screen Design and Layout

Form Follows Functions Let the required interactions drive the design and layout

What actions do the users perform? What kinds of information do users need? In what order different kinds of information are likely to be needed?

Visual Tools for Layout Grouping and structure of items Order of groups and items Decoration features Alignment of items White space between items

14


Grouping and Structure of Items If items logically belong together, then they should physically be grouped

together

Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details:item quantity cost/item costsize 10 screws (boxes) 7 3.71 25.97 …… … … …

• Details for billing and delivery are grouped spatially• The list of items actually ordered are separated from billing and delivery details by a line as well as spatially

Grouping Related Items in an Order Screen

15


Order of Groups and Items We need to think “what is the natural order for the user?” and match the natural

order to the order on screen Occasionally we may need to force a particular order

e.g. Forcing online customers to fill out their mailing addresses before inputting other information

Decoration Features like font style, text or background colors can be used to emphasize

groupings

16


Alignment For users who read text from left to right, lists of text items should normally be

aligned to the left

Dix

Finaly

Abowd

Beale

Dix

Finlay

Abowd

Beale

17


Alignment (Cont.) Numbers should normally be aligned to the right (for integers) or at the decimal

point Shape of the column gives an indication of magnitude

627.865 1.005763 382.5832502.56 432.935 2.0175 652.87 56.34

532.56179.3

256.31715

73.9481035

3.142497.6256

532179256

1573

10355

497

18


Alignment (Cont.) In multiple column lists, text columns have to be wide enough for the largest

item; this means there can be large gaps between columns, which can make it hard to scan across rows

Using leaders – lines of dots linking the columns Using soft tone grays or colors for the background of the rows It may sometimes be worth breaking other alignment rules to trade off good column

alignment for the ability to see relationship across rows

sherbet

75toffee

120chocolate

35fruit gums

27coconut dreams

85

19

sherbet

75toffee

120chocolate

35fruit gums

27coconut dreams

85

sherbet

75toffee

120chocolate

35fruit gums

27coconut dreams

85

sherbet

75 toffee

120 chocolate

35 fruit gums

27 coconut dreams

85

Leaders

Color Background

Right Aligning Text Items(good if the user scans the numbers frequently but only occasionally scans the names of items)

20


White Space Space to separate blocks

e.g. Gaps between paragraphs or space between sections in a report Space to create complex structures Space to highlight

e.g. Used frequently in magazines to highlight a quote or graphic

E F

DB C

A

Space to Separate

Space to Structure

Space to highlight

21

Type of food

Time to cook

Defrost settings

Grouping of Controls

22

4

2

3

11) Type of heating2) Temperature3) Time to cook4) Start

Order of Controls

23

Different colors for different functions

Lines around related buttons (temp up/down)

Decoration

24

Gaps to aid grouping

White Space

25


Appropriate Appearance How to present information should depend on

The kind of information Text, numbers, maps, tables, etc.

The technology available to present it Character display, graphics, virtual reality, etc.

Depends on the purpose (Most Important!) e.g. To present hierarchical structures, we may use node-link diagrams; to

present correlation relationships between variables, we may use scattered plots

26


Appropriate Appearance (Cont.) Aesthetics and utility

Aesthetically pleasing designs Can increase user satisfaction and improve productivity

Beauty and utility may conflict e.g. Graphic designers like using excessively complex and strong backgrounds

because they look good, but they may make the text hard to read Beauty and utility can work together

Use of white space

good to look at, but hard to read

27


Appropriate Appearance Color and 3D effects

Both often used very badly in interface design! Color

Older monitors only support a limited range of primary colors Overuse of color can be distracting A significant portion of people suffer from color-blindness Should be used sparingly to reinforce other information

3D effects Good for physical information and in some graphs Poor in showing quantitative information

e.g. 3D pie chart is not effective in showing the volumes of the sections because of the perspective effect

28

Illustration of Perspective Effect

29

Design Rules

Overview Rules that a designer can follow in order to increase the usability of the

eventual product Can be supported by psychological, cognitive, ergonomic, sociological,

economic or computational theories

Types of Design Rules Principles

Derived from knowledge of the psychological, computational and sociological aspects of the problem domains

Largely independent of the technology and dependent to a much greater extent on a deeper understanding of the human element in the interaction

Abstract design rules

30

Design Rules

Types of Design Rules (Cont.) Guidelines

Less abstract than principles and often more technology oriented Still general, so it is important for a designer to know what theoretical evidence there

is to support them Standards

Specific design rules, so it is less important for a designer to know the underlying theory

31

Design Rules

Issues Conflicts between design rules

The theories underlying the design rules can help the designer understand the trade-off for the design

When to use design rules within the design process Design rules would be most effective if they could be adopted in the earliest stages

of the life cycle when the space of possible designs is still very large Requirements specification, architectural design

Some specific design rules are applicable only in later stages of the design life cycle e.g. Design rules on color vs. monochrome screens and two- versus three-button

mouse depend on the particular hardware platform

32

Principles to Support Usability

Categories Learnability

The ease with which new users can begin effective interaction and achieve maximal performance

Flexibility The multiplicity of ways in which the user and system exchange information

Robustness The level of support provided to the user to achieve the interaction goals and

assessment of goals

33

Learnability

Familiarity The degree of correlation between the user’s prior knowledge and the

knowledge required for using the new system e.g. Most users expect a Microsoft office application to include a working space, a

menu, some toolbars and help functions.

Predictability Building a system that works in the way as the user expects

e.g. Advanced browsing options in Internet Explorer are under the item “Internet Options” Under the “Tools” menu. The same mechanism applies in Mozilla.

Consistency The likeness in behavior arising from similar situations or similar task

objectives Users expect a program to act in a consistent fashion

e.g. If buttons “OK” and “Cancel” are placed next to each other in one part of the program, then they should always show up together

34

Learnability

Synthesizability The ability of the user to assess the effect of past operations on the current state “Honesty” of the system

The ability of the user interface to provide an observable and informative account of any change in the internal state of the system

In the best circumstance, this notification can come immediately, requiring no further interaction by the user (immediate honesty)

e.g. In a Windows system, to move a file from one directory to another directory, the user drags the visual icon of the file from the original directory to the destination directory where it remains visible

At the very least, the notification should appear eventually, after explicit user directives to make the change observable (eventual honesty)

e.g. In a command language system, the user would have to remember the destination directory and ask to see the contents the directory in order to verify that the file has been moved successfully

35

Flexibility

Dialog Initiative Machine pre-emptive

The machine initiates all the dialogs and the user simply responds to requests for information; allows little flexibility

e.g. The search dialog box at the WSU library website only allows users to input the search criterion

Usually undesirable but may be required in some situations e.g. For safety reasons, it may be necessary to prohibit the user from the

“freedom” to do potentially serious damages User pre-emptive

The user is entirely free to initiate any action towards the system; allows the maximum flexibility

A complete user pre-emptive is not necessary a desirable situation, as it increases the likelihood that the user will lose track of the tasks that have been initiated and not yet completed

36

Flexibility

Multi-Modality Provides the user with multiple modes of interfacing with a system beyond the

traditional keyboard and mouse input/output Combines human visual, auditory, and haptic communication channels e.g. To open a new window, the user can choose to click the “new window” icon or

say “opening a new window”; Error warnings usually contain a textual message accompanied by an audible beep

37

Flexibility

Task Migratability The transfer of control for execution of tasks between machine and user

e.g. On the flight deck of an aircraft, there are so many control tasks that must be performed that a pilot would be overwhelmed if he had to perform them all. Therefore, mundane control of the aircraft’s position within its flight envelope is greatly automated. However, in the event of an emergency, it must be possible to transfer flying controls easily and seamlessly from the machine to the pilot

38

Flexibility

Customizability Modifiability of the user interface by the user or the system Adaptability

The user’s ability to adjust the form of input and output e.g. The user can adjust the position of the icons on the screen, change the font

of texts, etc. Adaptivity

Automatic customization of the user interface by the system Decision for adaptation can be based on user expertise or observed repetition of

certain task sequences e.g. A system can be trained to recognize the behavior of an expert or novice

and accordingly adjust its dialog control or help system automatically to match the needs of the current user

The user’s role is more implicit in adaptive interfaces than in adaptable ones

39

Robustness

Covers features that support the successful achievement and assessment of the goals

Observability Allows the user to evaluate the internal state of the system by means of its

perceivable representation at the interface Browsability

Allows the user to explore the current internal state of the system via the limited view provided at the interface

e.g. Pressing “Ctrl”+”Alt”+”Del” keys brings up the Windows Task Manager window which shows the applications currently running in the computer

Availability of defaults Assists the user by passive recall

e.g. Providing the user his login ID when he needs to access his account Reduces the number of physical actions necessary for inputting

40

Robustness

Observability (Cont.) Persistence

Deals with the duration of the effect of a communication act and the ability of the user to make use of that effect

The effect of vocal communication does not persist except in the memory of the receiver

e.g. If you are informed of a new email message by a beep at your terminal, you may know at that moment and for a short while after you have received a message. But if you do not attend to that message immediately, you may forget about it

Visual communication can remain as an object which the user can subsequently manipulate long after the act of presentation

e.g. If some persistent visual information (such as a flag going up on your email box) informs you of the incoming message, then that will serve as a reminder that an unread message remains long after its initial receipt

41

Robustness

Recoverability The ability to reach a desired goal after recognition of some error in a previous

interaction Forward error recovery

Involves the acceptance of the current state and negotiation from that state towards the desired state

May be the only possibility for recovery if the effects of interaction are not revocable

e.g. In a text editor, after you save the changes you have made on a text, you cannot undo the effect of saving

Backward error recovery An attempt to undo the effects of previous interaction in order to return to a prior

state before proceeding e.g. In a text editor, a mistyped keystroke may wipe out a large section of text,

but you can retrieve the wiped out text by an equally simple undo button

42

Robustness

Recoverability (Cont.) Commensurate effort

If it is difficult to undo a given effect on the state, then it should have been difficult to do in the first place; easily undone actions should be easily doable

e.g. If it is difficult to recover files which have been deleted in an operating system, then it should at least require some effort to remove them in the first place

43

Guidelines

More Specific Than Principles The more abstract a guideline, the more it resembles a principle The more specific a guideline, the more suited it is to detailed design

Guidelines for Designing User Interface Software (Smith & Mosier, 1986; http://www.hcibib.org/sam/) A very comprehensive catalog of guidelines Contains six basic categories: data entry, data display, sequence control, user

guidance, data transmission, and data protection

44

Guidelines

Principles and Guidelines in Software User Interface Design (Mayhew, 1997) Another comprehensive catalog of general guidelines One of the best sources for the experimental results which back the specific

guidelines

Style Guides for Graphic User Interface (GUI) Systems Not hard or fast rules, but suggestions on conventions for programming in that

environment Aim to promote consistency within and between applications on the same

computer platform

45

Golden Rules and Heuristics

Heuristics Rules of thumb for reasoning, a simplification, or educated guess that reduces or

limits the search for solutions in domains that are difficult and poorly understood

May not be applicable to every situation, but provide a useful checklist or summary of the essence of design advice

Any designer following these simple rules will produce a better system than one who ignores them

Shneiderman’s eight golden rules Designing the User Interface (Shneiderman,2004) Provide a convenient and succinct summary of the key principles of interface design

46

Shneiderman’s Eight Golden Rules

Rule 1: Strive for Consistency Consistent sequences of actions should be required in similar situations;

identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout

Rule 2: Enable Frequent Users to Use Shortcuts to Perform Regular, Familiar Actions More Quickly 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, function keys, hidden commands, and macro facilities are very helpful to an expert user

Rule 3: Offer Informative Feedback For every operator action, there should be some system feedback. For frequent

and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial

47

Rule 4: Design Dialogs to Yield Closure Sequences of actions should be organized into groups with a beginning, middle,

and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions

Rule 5: Offer Simple Error Handling As much as possible, design the system so the user cannot make a serious error.

If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error


48

Rule 6: Permit Easy Reversal of Actions This feature relieves anxiety, since the user knows that errors can be undone; it

thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions

Rule 7: Support Internal Locus of Control Experienced operators strongly desire the sense that they are in charge of the

system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders

Rule 8: Reduce Short-Term Memory Load by Keeping Displays Simple, Consolidating Multiple Page Displays and Providing Time for Learning Action Sequences The limitation of human information processing in short-term memory requires

that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions


49

Cockpit Control Panels of B-17 Bombers in WWII

It was cheaper and faster to design and build the panels using a series of closely spaced toggle switches. Unfortunately, two of these adjacent switches were the flaps and the landing gear. When they were initially deployed, it was not uncommon for a just-landed and taxiing B-17 to suddenly belly-flop onto the concrete when the pilot mistakenly hit the landing gear toggle instead of the one for the flaps.

Back

design basics and rules of human interface dr. yan liu department of biomedical, industrial and...

Documents

website hierarchy slide

messaging system slide

design rules users

goals system

entire website users

behavior users

end slide

goal slide