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 it’s 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

——-

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 it’s 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 broad–shallow 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: [0–9]
[10–19] [20–29] 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