Human-Computer Interaction - Tongji University

Human-Computer Interaction - Tongji University

Fluid Navigation YIN G SH E N SC H OO L OF S OFTWARE E N GIN E E RIN G TON GJI U N IVE RS ITY Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION

2 Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION 3

Introduction Navigation enables users to know where they are and to steer themselves to their intended destination Navigation is about getting work done through a series of actions Key to successfully operating interactive applications The goal for designers is to enable fluid navigation that allows users to get to where they want to go Navigation techniques include menus, embedded links, or tool palettes Users can touch, tap, or swipe of the figures to indicate their choices Careful design, keyboard shortcuts, and gestures allow expert users to navigate quickly

02/06/2020 HUMAN COMPUTER INTERACTION 4 Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020

HUMAN COMPUTER INTERACTION 5 Navigation by selection Choices can be presented explicitly Embedded links of webpages were first popularized in the Hyperties system Highlighted names, places became menu items embedded in text Graphical techniques are an attractive way to present choices 02/06/2020 HUMAN COMPUTER INTERACTION 6

Navigation by selection Binary menu Grid menu 02/06/2020 HUMAN COMPUTER INTERACTION 7 Navigation by selection Series of choices Radio Buttons and Checkboxes

02/06/2020 HUMAN COMPUTER INTERACTION 8 Menu bars, pop-up menus, toolbars, palettes, ribbons Menu bars are found at the top of applications or both at the top and on the side of the screen 02/06/2020 HUMAN COMPUTER INTERACTION 9

Menu bars, pop-up menus, toolbars, palettes, ribbons Accordion menus Advantages: Users dont have to scroll too far to find submenu items Disadvantages: When the menu structure is too deep, its not easy for users to find the target item 02/06/2020 HUMAN COMPUTER INTERACTION 10 Menu bars, pop-up menus, toolbars,

palettes, ribbons Large submenus are expanded below or to the side 02/06/2020 HUMAN COMPUTER INTERACTION 11 Menu bars, pop-up menus, toolbars, palettes, ribbons The limited screen space of mobile devices leads to limited items Menu items are moved into a separate screen that is accessible from a main menu icon (hamburger menu icon)

02/06/2020 HUMAN COMPUTER INTERACTION 12 Menu bars, pop-up menus, toolbars, palettes, ribbons Pop-up menus appear when clicking or tapping with a pointing device When the content of the pop-up menu depends on the cursor position, it is called a context menu 02/06/2020

HUMAN COMPUTER INTERACTION 13 Menu bars, pop-up menus, toolbars, palettes, ribbons Pop-up menus can also be organized in a circle to form pie menus Advantages: The average distance to travel to select an item is smaller than linear menus 02/06/2020 HUMAN COMPUTER INTERACTION 14

Menu bars, pop-up menus, toolbars, palettes, ribbons Toolbars, iconic menus, and palettes can offer many actions that users can select with a click and apply to a displayed object Users need to be able to customize toolbars Users can eliminate most or all the toolbars and palettes to conserve screen space Experts can have dense menus with many small icons 02/06/2020 HUMAN COMPUTER INTERACTION 15

Menu bars, pop-up menus, toolbars, palettes, ribbons Ribbons ere introduced in Office 2007 Ribbons attempt to replace menus and toolbars by one-inch tabs grouping commands by task 02/06/2020 HUMAN COMPUTER INTERACTION 16 Shortcuts and gestures for rapid interaction Keyboard shortcuts/hotkeys are essential for expert users Ctrl-C, Ctrl-V, etc

The first letter of the command is often used for the shortcut Shortcuts should be used consistently across applications Learning shortcuts is one useful way to reaching expert performance 02/06/2020 HUMAN COMPUTER INTERACTION 17 Shortcuts and gestures for rapid interaction Since typing keyboard shortcuts become impractical with touchscreen devices, gestures often serve as a shortcut for rapid selection Gestures can be hard to discover and learn and have few or no

affordances Careful design and use of gestures can bead to fluid navigation for expert users but cause frustration when actions are triggered inadvertently Allowing users to customize the gestures may help users remember them and provide better accessibility 02/06/2020 HUMAN COMPUTER INTERACTION 18 Shortcuts and gestures for rapid interaction Examples of common gestures and their effect: Tap: select

Long press: varied, from magnified cursor (iOS) to showing a tooltip (Windows 8) Double tap: varied, e.g. zoom (iOS) Small swipe: varied, e.g. move location or order of objects, reveal a delete button Large swipe: usually scroll Rapid swipe or fling: fast scroll with inertia Pinch and spread: zoom in and out Variation with two or more fingers: varied effects 02/06/2020 HUMAN COMPUTER INTERACTION 19

Long lists Sometimes the menu items may be too long to be displayed A common solution is to create a tree-structured menu Typical lists are alphabetically ordered, but categorical lists may be useful 02/06/2020 HUMAN COMPUTER INTERACTION 20 Long lists Scrolling menus, combo boxes, and fisheye menus 02/06/2020

HUMAN COMPUTER INTERACTION 21 Long lists Sliders and alphasliders When items consist of ranges or numerical values, a slider is a natural choice to allow the selection of a value The alpha-slider uses multiple levels of granularity in moving the slider thumb and therefore can support tens or hundreds of thousand of items 02/06/2020 HUMAN COMPUTER INTERACTION

22 Long lists Two-dimensional mega menus give users a good overview of the choices, reduce the number of required actions, and allow rapid selection 02/06/2020 HUMAN COMPUTER INTERACTION 23 Long lists Some designers choose the more sober style of a text-only large

2D menu Allow users to rapidly scan hundreds of choices Appealing for websites with little or no competition A site map 02/06/2020 HUMAN COMPUTER INTERACTION 24 Long lists Tag clouds 02/06/2020

HUMAN COMPUTER INTERACTION 25 Linear versus simultaneous presentation A sequence of interdependent menus can be used to guide users through a series of choices Pizza-ordering interface Installation wizards Simultaneous menus presentment menus at the same time Faceted search menus 02/06/2020 HUMAN COMPUTER INTERACTION

26 Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION 27

Small displays Small devices have very focused functionalities and few selectable areas. The smaller the screen, the more temporal the interface becomes Linear sequences of menus Discoverability is often an issue 02/06/2020 HUMAN COMPUTER INTERACTION 28

Small displays Design considerations for small displays: Simplify: less is more Strive to reduce or eliminate data entry Learnability is key Consider use frequency and importance Plan for interruptions Use of contextual information Make clear what is selectable and what is not Leave room for scroll and swipe gestures to avoid inadvertent actions Consider relegating less important functions to other platforms

02/06/2020 HUMAN COMPUTER INTERACTION 29 Outline Introduction Navigation by selection Small displays Content organization

Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION 30 Content organization Organizing menus in a meaningful structure results in faster selection time and higher user satisfaction Menu items should be organized by categories and have understandable meanings Comprehensible and distinctive

Approaches: Linear sequence (e.g. in a wizard or survey) Hierarchical structure that is natural and comprehensible (e.g. a store split into departments) Network structure when choices may be reachable by more than one path (e.g. websites) 02/06/2020 HUMAN COMPUTER INTERACTION 31 Structure and breath versus depth Categorize similar items using tree structures

Tree-structured menus are suitable to novice or intermittent users Rules for forming menu trees: Use task semantics to organize menus Limit the number of levels (i.e. prefer broadshallow to narrow deep) Create groups of logically similar items: e.g. Level 1: countries, Level 2: states, Level 3: cities Form groups that cover all possibilities: e.g. Age ranges: [09] [1019] [2029] and [>= 30] Make sure that items are non-overlapping: e.g. use Concerts and Sports. over Entertainment and Events Arrange items in each branch by natural sequence (not alphabetically) or group related items Keep ordering of items fixed (or possibly duplicate frequent items in dedicated section of the menu)

02/06/2020 HUMAN COMPUTER INTERACTION 32 Structure and breath versus depth If the groupings are natural and comprehensible, users can easily accomplish the tasks Use the terminology from the task domain instead of using a vague title Main Menu Options vs Friendlibank Service 02/06/2020

HUMAN COMPUTER INTERACTION 33 Structure and breath versus depth Breadth vs depth The breath is preferred over depth Given sufficient screen space, its better to show a large portion of the menu structure 02/06/2020 HUMAN COMPUTER INTERACTION

34 Sequence, phrasing, and layout Sequence Designer is confronted with the choice of presentation sequence Some items have a natural sequence and some do not Categorical organization is preferred Split menus extract three or four of the most frequently used items and put them near the top while preserving the order of the remaining items Adaptive menus provide users with control over the sequence of menu items

02/06/2020 HUMAN COMPUTER INTERACTION 35 Sequence, phrasing, and layout Phrasing For single menus, a simple descriptive title that identifies the situation is necessary Some directives

Use familiar and consistent terminology. Ensure that items are distinct from one another Use consistent and concise phrasing Bring the keyword to the fore 02/06/2020 HUMAN COMPUTER INTERACTION 36 Sequence, phrasing, and layout

Layout Techniques to indicate position in the menu structure can be useful Elements included: Titles, item placement; instructions, error messages As the user goes down the tree structure, the titles can be designed to indicate the level or distance from the main menu Graphics, fonts, typefaces, or highlighting techniques can be used beneficially 02/06/2020 HUMAN COMPUTER INTERACTION 37

Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION 38 Audio menus

Audio menus are useful in interactive voice response(IVR) systems With audio menus, instruction prompts and options are spoken to users Audio menus have to provide a confirmation step following the selection To reduce dependence on short-term memory, it is preferable to describe the item first and then give the number A way to repeat the list of options and an exit mechanism must be provided 02/06/2020 HUMAN COMPUTER INTERACTION 39

Audio menus Complex and deep menu structures should be avoided The number of choices should be less than three or four To develop successful audio menus, it is critical to know the users goals, make the most common tasks easy to perform rapidly, and keep prompts to a minimum Listen carefully, as our menu options have recently changed More in Chapter 9 02/06/2020 HUMAN COMPUTER INTERACTION 40

Outline Introduction Navigation by selection Small displays Content organization Audio menus Form fill-in and dialog boxes 02/06/2020 HUMAN COMPUTER INTERACTION 41 Form fill-in

This form fill-in allows users to enter information when joining the IEEE Society Fields are grouped meaningfully, and field-specific rules such as password requirements are provided next to the fields The data is validated as soon as it is being provided and error messages explain how to correct the problem 02/06/2020 HUMAN COMPUTER INTERACTION 42 Form fill-in Form fill-in design elements

Meaningful title Comprehensible instructions Label the field Limit data entry Explanatory messages for fields

Error prevention Error recovery Immediate feedback Logical grouping and sequencing of fields Visually appealing layout of the form ... 02/06/2020 HUMAN COMPUTER INTERACTION 43 Format-specific fields Some common fields Telephone numbers

Dates Date: _ _/_ _/_ _ _ _ (04/06/2018 indicates April 6, 2018) Times Dollar amounts Deposit amount: $_ _ _ _ _._ _ Passwords CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) 02/06/2020

HUMAN COMPUTER INTERACTION 44 Dialog boxes Dialog boxes are used to request users to select options, perform limited data entry, or review alerts and error messages Dialog boxes are often shaped and sized to fit each situation, but distinctive sizes or aspect ratios may be used to signal errors, confirmations, or components of the application 02/06/2020 HUMAN COMPUTER INTERACTION

45 Dialog boxes This dialog box includes a binary menu with two choices (Yes or No) The blue highlighting on Yes indicates that this selection is the default and that pressing Return will select it Specific keyboard shortcuts can be made available Escape closes the dialog box Typing the letter N will select No as indicated by the underlined letter N 02/06/2020 HUMAN COMPUTER INTERACTION

46 Dialog boxes This dialog box is used to alert clinicians who try to prescribe the drug Warfarin, because it increases the risk of bleeding of patients already on Aspirin Several possible actions are proposed Overriding the alert is possible but requires confirmation by clicking a check box Because of the severity of the alert, this is a modal dialog box and it requires immediate action 02/06/2020 HUMAN COMPUTER INTERACTION

47

Recently Viewed Presentations

  • A Practical Guide for Implementing a Strengths-Based Faculty ...

    A Practical Guide for Implementing a Strengths-Based Faculty ...

    Strengths-Based Self-Reflection Activities and Faculty Mentoring Sessions. Four required self-reflection activities and faculty mentoring sessions during the academic year: Exploring My Signature Themes of Talent (early Fall semester) Setting My Academic Course (late Fall semester) Developing My Talents Into Strengths...
  • Bild 1 - National-Academies.org

    Bild 1 - National-Academies.org

    for the Prohibition of the Use in War of Asphyxiating, Poisonous, or Other Gases, and of Bacteriological Methods of Warfare
  • The Effects of Cold Working & Annealing on Resistivity

    The Effects of Cold Working & Annealing on Resistivity

    "Influence of Cold Working on the Pitting Corrosion Resistance of Stainless Steels."Corrosion Science. Isbergues:Elsevier, April 2007. 1933-1948. "Materials Engineering; Study data from M. Gonzalez and colleagues update understanding of materials engineering.
  • WARM UP Wed. (5/10)/Thurs. (5/11) Coracias garrulus is

    WARM UP Wed. (5/10)/Thurs. (5/11) Coracias garrulus is

    The offspring of this bird have an effective defense mechanism. The young birds vomit and cover themselves in a foul-smelling orange liquid when they sense a threat by predators. Which two systems alert the young bird to the danger and...
  • C S 6 0 2 7 Chapters 4

    C S 6 0 2 7 Chapters 4

    The total number of addresses is 8 x 256 = 2048 Dr. Clincy Lecture * Explain Supernetting Conceptually Back out this bit from netid into host id Causes these 2 blocks to combine as a single block Dr. Clincy Lecture...
  • Buffer Solutions

    Buffer Solutions

    Drill: Determine the pH of 0.25 M HZ. KaHZ = 2.5 x 10-7 Buffer Solutions Buffer Solution A solution that resists changes in pH Lab Requirements To make accurate measurements, we must have solutions with accurately measured concentrations Standard Solution...
  • Drug Discovery: an Industrial Process How are drugs

    Drug Discovery: an Industrial Process How are drugs

    Joined Eli Lilly in Rheumatology and later joined the CNS department. Involved with the launch of the SERM, raloxifene ... The hypothesis should link a process to a fundamental pathological pathway. Modifying the pathway should be expected to be curative...
  • Global Products & Solutions Global Investment Group

    Global Products & Solutions Global Investment Group

    The Old Paradigm "I . ... Deutsche Bank Trust Company Americas is required by law, under penalty of sanctions, to ensure that securities held by it as a custodian are segregated on its books and records from the Bank's own...