Design basics and rules of human interface

1. 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. Start Goal 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

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. top level category sub-category website this page live links to higher levels “Breadcrumbs” Showing Path Through the Website Hierarchy

7. The system info and help management messages add user remove user 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. 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. 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 Global Structure • Dialog • 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. Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … … Screen Design and Layout • Grouping and Structure of Items • If items logically belong together, then they should physically be grouped together • 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 Finlay Abowd Beale Dix Finaly 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 532.56179.3256.3171573.94810353.142497.6256 627.865 1.005763 382.5832502.56 432.935 2.0175 652.87 56.34 532179256157310355497

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 Leaders Color Background sherbet 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Right Aligning Text Items (good if the user scans the numbers frequently but only occasionally scans the names of items)

20. A D B C E F 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 Space to highlight Space to Separate Space to Structure

21. Grouping of Controls Defrost settings Type of food Time to cook

22. Order of Controls • Type of heating • Temperature • Time to cook • Start 1 2 3 4

23. Decoration Different colors for different functions Lines around related buttons (temp up/down)

24. White Space Gaps to aid grouping

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. Shneiderman’s Eight Golden Rules • 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. Shneiderman’s Eight Golden Rules • 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