Fluid Navigation and Linear Navigation Project Organize the following into prototypes for Linear Navigation, Hierarchical Navigation or Tree Navigation, an
Fluid Navigation and Linear Navigation Project Organize the following into prototypes for Linear Navigation, Hierarchical Navigation or Tree Navigation, and a Networked Navigation. For each task/drawing below find its depth (how many clicks it takes). Describe if you have an error how many steps it would take to correct each task. At the end you should have 3 complete drawings, each one including all the tasks below.
If it helps the navigation you may add tasks or categories.
————————-
Open File
Paste
Rename
Duplicate
Spell Check
Change Font Color
Change Background Color
Grammar Check
Change Language
Delete File
Copy
Count Characters
Print in BW (black and white)
Find Plagiarism
Create Citation
Indent right
Remove Indent
Increase Font
Change Font
Print on 1 page
Bold
Decrease Font
Underline
Add Footer
Add Header
Italicize
Change Line Spacing
Change Word Spacing
Strikeout
Count Sentences
Evaluate writing grade level
Add Page Numbers
Word Count
——-
please make it look simple and clear Assignment (Fluid Navagation)
Organize the following into prototypes for Linear Navigation, Hierarchical Navigation or
Tree Navigation, and a Networked Navigation. For each task/drawing below find its depth
(how many clicks it takes). Describe if you have an error how many steps it would take to
correct each task. At the end you should have 3 complete drawings, each one including all
the tasks below.
If it helps the navigation you may add tasks or categories.
————————Open File
Paste
Rename
Duplicate
Print
Spell Check
Change Font Color
Change Background Color
Grammar Check
Change Language
Delete File
Copy
Count Characters
Print in BW (black and white)
Find Plagiarism
Create Citation
Indent right
Remove Indent
Increase Font
Change Font
Print on 1 page
Bold
Decrease Font
Underline
Add Footer
Add Header
Italicize
Change Line Spacing
Change Word Spacing
Strikeout
Count Sentences
Evaluate writing grade level
Add Page Numbers
Word Count
CHAPTER 8:
Fluid Navigation
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Sixth Edition
Ben Shneiderman, Catherine Plaisant,
Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
Addison Wesley
is an imprint of
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Fluid Navigation
Topics
1. Introduction
2. Navigation by selection
3. Small displays
4. Content Organization
5. Audio menus
6. Form fill-in and dialog boxes
1-2
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-2
Introduction
Navigation
Enables users to know where they are and to steer
themselves to their intended destination
Is about getting work done or having fun through a series of
actions, much like sailors who steer their boat to a harbor
Is key to:
successfully operating interactive applications, such as installing a
mobile app, completing an on-line survey, or purchasing a train ticket
(task navigation)
finding information on a website or browsing social media (web
navigation)
finding the action needed in a desktop application (command menu
navigation)
1-3
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-3
Introduction (concluded)
Navigation
Note that even if a designer uses slick graphical menus,
elegant form fill-in, or well known gestures there is no
guarantee that the interface will be appealing and easy to
use
Effective interfaces emerge only after careful consideration
of and testing for numerous design issues, such as:
task-related organization
phrasing of items
sequence of items
graphic layout and design
responsive design to adapt to various sizes of devices
shortcuts for knowledgeable frequent users
online help and error correction
(Bailly, G., Lecolinet, E., Nigay, L., Visual menu techniques (2015) in preparation)
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-4
8-4
Navigation By Selection
Menu bars, pop-up menus, toolbars, palettes and ribbons
Shortcuts and gestures for rapid interaction
Long lists
Linear versus simultaneous presentation
Sample menus
1-5
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-5
Navigation By Selection (continued)
Radio Buttons and Checkboxes
1-6
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-6
Navigation By Selection (continued)
Menu bars, pop-up menus, toolbars, palettes and ribbons
On the top menu bar of Microsoft Powerpoint the Edit cascading pull-down menu (also
called pulled-right) is open, followed by the Find menu
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-7
8-7
Navigation By Selection (continued)
Menu bars, pop-up menus, toolbars, palettes and ribbons
A
B
C
D
The main menu of Soundhound has only 6 items, but it is still too much to be
displayed on every page
A main menu hamburger icon appears at the top right of all appropriate pages, e.g. it
appears in A and C, but not in the recording screen D, where only the X close icon is
visible
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-8
8-8
Navigation By Selection (continued)
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
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-9
8-9
Navigation By Selection (continued)
Menu bars, pop-up menus, toolbars, palettes, and ribbons
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
The NASA website on the left consists of a
large scrollable two-dimensional menu
Below the main menu each square or
rectangle is a large button
Scrolling gives access to dozens of
items easily updated and rearranged
This adaptive grid design scales down
nicely to the small displays
Above is the same webpage displayed on an
Android phone
The grid now appears as a single
column of items
1-10
8-10
Navigation By Selection (continued)
Menus for long lists
Sliders and alpha-sliders
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
1-11
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-11
Navigation By Selection (concluded)
Menu bars, pop-up menus, toolbars, palettes and ribbons
http://www.awwwards.com gives awards to a large number of websites, which are tagged
A tag index at the top of the page displays all the tags, sorted by total count
The counts are indicated in parenthesis
The green colored tags are the popular tags that have been selected more often (which most likely will
lead to even more selection)
1-12
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-12
Small Displays
Small devices have very focused functionalities and few
selectable areas.
Discoverability is often an issue
1-13
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-13
Small Displays (concluded)
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
1-14
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-14
Content Organization
Organizing menus in a meaningful structure
results in faster selection time and higher user
satisfaction
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)
1-15
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-15
Content Organization (continued)
Content organization design:
Tree-structure: designers can form categories of similar
items, e.g. online grocery markets divided into produce,
meat, dairy, etc. further divided into vegetables, fruit, etc. for
produce, and milk, cheese, etc. for dairy
Breadth versus depth: the depth (number of levels) of a
menu tree depends in part on the breadth (number of items
per level)
Networks: choices may be reachable by more than one
path, e.g. websites for online shopping that provide access
to banking information from both the personal profile and the
checkout section of a link structure
1-16
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-16
Content Organization (continued)
In the REI website, the categories for Cycle are expanded all at once below the
top menu, showing 34 items organized in a meaningful hierarchy as a large menu
1-17
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-17
Content Organization (continued)
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
1-18
in dedicated section of the menu)
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-18
Content Organization (continued)
Additional considerations for content organization
design include:
sequence, phrasing and layout
Typical lists are alphabetically ordered, but
categorical lists may be useful
Principles of menu-list sequencing apply,
e.g. sequencing menu items by frequency
of use can be more useful than sequencing
by category or alphabetical order
Example of adaptive split menus in Microsoft Office
A font-selection menu lists the theme fonts and then
the recently used fonts near the top of the menu (as
well as in the full list), making it easier to quickly
select the popular fonts
A thin line separates the sections
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-19
8-19
Content Organization (continued)
Phrasing:
Use familiar and consistent terminology.
Carefully select terminology that is familiar to the designated user community and keep a
list of these terms to facilitate consistent use
Ensure that items are distinct from one another
Each item should be distinguished clearly from other items. For example, Slow tours of
the countryside, Journeys with visits to parks, and Leisurely voyages are less
distinctive than are Bike tours, Train tours to national parks, and Cruise-ship tours
Use consistent and concise phrasing
Review the collection of items to ensure consistency and conciseness. Users are likely to
feel more comfortable and to be more successful with Animal, Vegetable, and Mineral
than with Information about animals, Vegetable choices you can make, and Viewing
mineral categories
Bring the keyword to the fore
Try to write menu items such that the first word aids the user in recognizing and
discriminating between items use Size of type instead of Set the type size. Then, if
the first word indicates that this item is not relevant, users can begin scanning the next
1-20
item
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-20
Content Organization (concluded)
Layout
Techniques to indicate position in the menu structure can be useful
The set of headers below from the Library of Congress collections
webpages gives a clear indication of progress down the tree
When users want to do a traversal back up the tree or to an adjoining menu at
the same level, they will feel confident about what action to take
1-21
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-21
Audio Menus
For Interactive Voice Response (IVR) systems,
instruction prompts and lists of options are spoken
to users, who respond by using the keys of a
keyboard, phone, or by speaking
Complex and deep menu structures should be
avoided
Listen carefully, as our menu options have recently changed ?
More in Chapter 9
1-22
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-22
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 (opposed to being validated when the form
is submitted) and error messages explain how to correct the problem
(http://www.ieee.org)
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-23
8-23
Data Entry with Form Fill-in
Form Fill-in
Appropriate when many fields of data must be
entered:
Full complement of information is visible to user
Display resembles familiar paper forms
Few instructions are required for many types of
entries
Users must be familiar with:
Keyboards
Use of TAB key or mouse to move the cursor
Error correction methods
Field-label meanings
Permissible field contents
Use of the ENTER and/or RETURN key
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-24
6-24
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
1-25
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-25
Dialog Boxes (continued)
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
1-26
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-26
Data Entry with Dialog Boxes
Dialog Boxes
Combination of menu and form fill-in techniques
Internal layout guidelines:
Meaningful title, consistent style
Top-left to bottom-right sequencing
Clustering and emphasis
Consistent layouts (margins, grid, white space, lines, boxes)
Consistent terminology, fonts, capitalization, justification
Standard buttons (OK, Cancel)
Error prevention by direct manipulation
1-27
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-27
Data Entry with Dialog Boxes
(concluded)
Dialog Boxes
External Relationship
Smooth appearance and disappearance
Distinguishable but small boundary
Size small enough to reduce overlap problems
Display close to appropriate items
No overlap of required items
Easy to make disappear
Clear how to complete/cancel
1-28
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
8-28
Purchase answer to see full
attachment
