Presentation is loading. Please wait.

Presentation is loading. Please wait.

Design basics and rules of human interface Dr. Yan Liu Department of Biomedical, Industrial and Human Factors Engineering Wright State University.

Similar presentations

Presentation on theme: "Design basics and rules of human interface Dr. Yan Liu Department of Biomedical, Industrial and Human Factors Engineering Wright State University."— Presentation transcript:

1 Design basics and rules of human interface Dr. Yan Liu Department of Biomedical, Industrial and Human Factors Engineering Wright State University

2 2 To Err is Human Many Accidents Are Inherent in Design or Installation of Human Interfaces (Example) (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 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 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 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 6 website top level category sub-category this page live links to higher levels “Breadcrumbs” Showing Path Through the Website Hierarchy

7 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 helpmanagementmessages add userremove user Functional Hierarchy of a Messaging System

8 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 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 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 11 Main screenRemove userConfirm Add user Network Diagram Showing the Process of Adding or Removing a User from the Messaging System

12 12 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 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 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 cost size 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 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 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 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.583 2502.56 432.935 2.0175 652.87 56.34 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256 532 179 256 15 73 1035 5 497

18 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 sherbet75 toffee120 chocolate35 fruit gums27 coconut dreams85

19 19 sherbet75 toffee120 chocolate35 fruit gums27 coconut dreams85 Leaders Color Background Right Aligning Text Items (good if the user scans the numbers frequently but only occasionally scans the names of items)

20 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 EF D BC A Space to Separate Space to Structure Space to highlight

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

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

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

24 24 Gaps to aid grouping White Space

25 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 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 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 28 Illustration of Perspective Effect

29 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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;  A very comprehensive catalog of guidelines  Contains six basic categories: data entry, data display, sequence control, user guidance, data transmission, and data protection

44 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 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 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 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 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 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

Download ppt "Design basics and rules of human interface Dr. Yan Liu Department of Biomedical, Industrial and Human Factors Engineering Wright State University."

Similar presentations

Ads by Google