design basics and rules of human interface dr. yan liu department of biomedical, industrial and...
TRANSCRIPT
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Screen Design and Layout
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
Shneiderman’s Eight Golden Rules
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
Shneiderman’s Eight Golden Rules
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