UNIT-3

Fluid Navigation
 Introduction
• Navigation is key to successfully operating
interactive applications, such as installing a
mobile app, filling in a survey, or purchasing a
train ticket (task navigation). It is also the key
to finding information on a website or
browsing social media (web navigation) or to
finding the action needed in a desktop
application (command menu navigation).
• The goal for designers is to enable fluid
navigation that allows users to gracefully and
confidently get to where they want to go,
explore novel possible routes, and backtrack
when necessary. Navigation depends on
recognition of landmarks that travelers use to
guide their choices, which differs greatly from
search, which requires users to describe what
they want by typing keywords in a blank
search box
• While the search box is the main technique to
initiate the process of finding information in
vast information spaces (like the internet or
digital libraries), navigation techniques such as
small or large menus, embedded links, or tool
palettes are the workhorses of navigation.
Users indicate their choices with a touch, tap,
or swipe of the finger or by using a pointing
device
 Navigation by Selection
• For example, maps can orient users about the
geography of the area before users select an
item of interest, and calendars or timelines
can inform users of availability and constraints
before a date or time is selected. Interactive
visualization of information can also help
analysts navigate large amount of data in a
fluid visual manner.
• The simplest case of explicit menus is a binary menu for
yes/no, true/false choices .Another example of a simple
menu is the grid menu popularized by mobile devices,
with a small set of icons and labels).
• When users need to make a series of choices (e.g., in a
survey or to select parameters of an application), there
are well-established methods of presenting choices. Radio
buttons support single-item selection from a multiple-
item menu, while check boxes allow the selection of one
or more items in a menu.
• A multiple-selection menu is a convenient method for
handling multiple binary choices, since the user is able to
scan the full list of items while deciding Unavailable
choices can be grayed out
 Menu bars, pop-up menus, toolbars,
palettes, and ribbons
• Menu bars are typically found at the top of the each
application or both at the top and on the side of the
screen. Common items in desktop or tablet applications
are File, Edit, View, and Help, and menus that follow this
order will seem familiar to most users. Clicking on a
menu title brings up a list of related items, and users
can then make a selection by moving the pointing
device over the items (which respond by highlighting)
and clicking on the desired choice. Since positional
constancy is such a strong principle, when an item is not
available for selection, it is important to gray it out
rather than removing it from the list.
Shortcuts and gestures for rapid interaction

• For rapid selection, keyboard shortcuts (also sometime called

hotkeys, such as Ctrl-C on PCs or -C on Macs for Copy) are
essential for expert users using desktop computers . Users
can memorize the keystrokes for the menu items they use
often and thus speed up the interaction considerably. The
first letter of the command is often used for the shortcut to
favor memorability, but caution is required to avoid collisions.
If at all possible, shortcuts should be used consistently across
applications; for example, Ctrl-S on a PC or -S on a Mac is
usually used for Save and Ctrl-P or -P for Print. Keyboard
shortcuts should be indicated next to their corresponding
menu items and in the tooltip of the menu icons.
 Long lists
Sometimes the list of menu items may be longer than the
30 to 40 lines that can reasonably fit on a display. One
common solution is to create a tree-structured menu
sometimes the desire to limit the interface to one
conceptual menu is strong—for example, when users
must select a state from the 50 states in the United
States or a country from an extensive list of
possibilities. Typical lists are alphabetically ordered, but
categorical lists may be useful. The principles of menu-
list sequencing apply
• Scrolling menus, combo boxes, and fisheye menus
• Sliders and alphasliders
• Two-dimensional mega menus
 Linear versus simultaneous presentation

• Often, a sequence of interdependent menus can be

used to guide users through a series of choices. For
example, a pizza-ordering interface might include a
linear sequence of menus in which users choose the
size (small, medium, or large), thickness (thick, normal,
or thin crust), and finally toppings. Other familiar
examples are online examinations that have sequences
of multiple-choice test items, each made up as a menu,
or wizards (a Microsoft term) that steer users through
software installation by presenting a sequence of menu
options
 Small Displays
• While most designs adapt fairly easily from
desktop displays to the larger tablets (once the
design has been reviewed for touchability), small
displays make most desktop designs impractical,
and dumbed-down designs are very likely to fail.
Small displays require a radical rethinking of what
functionalities should be included and often lead
to novel interface and menu designs specifically
adapted to particular devices and applications
• The smaller the screen, the more temporal the interface
becomes (all the way to entirely linear audio interfaces when
no display is available). For example, linear sequences of
menus are possible, while simultaneous menus are much
harder to fit in. On tiny devices (such as watches or fitness
wearable's), a deck of card menu can be used, where each
single tap advances to the next choice and a long press or
two-finger press may select the item to access more
information. Animated attention-catching ticker menus have
also been used. Users don’t need to manually scroll or page
through the menu items, and with a single touch they can
stop the scrolling and select an item in view. On the other
hand, having to wait for an item to appear or reappear will
be frustrating to some users, especially as the number of
items grows
Design considerations for small displays
• Simplify: Less is more.
• Strive to reduce or eliminate data entry.
• Learn ability 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.
 Content Organization
• Meaningful grouping and sequencing of choices, along
with careful editing of titles and labels and appropriate
layout design, can lead to easier-to-learn menus and
increased navigation speed. In this section, This section
reviews the content organization issues and provides
guidelines for design. This area of design has been heavily
researched in the context of traditional menus for desktop
applications, but most results are useful for website and
phone application designs (Krug, 2014). Web pages act as
large menus where items are the embedded links or
buttons that can be used to navigate to another page
Structure and breath versus depth
• When a collection of items grows, designers can
form categories of similar items, creating a tree
structure . Some collections can be partitioned
easily into mutually exclusive groups with
distinctive identifiers. For example, the products
in an online grocery store can be organized into
categories such as produce, meat, dairy, cleaning
products, and so on. Produce can then be
organized into vegetables, fruits, and nuts, while
dairy is organized into milk, cheese, yogurt, and
so on.
Sequence, phrasing, and layout Sequence
• Once the items in a menu have been chosen, the designer is
still confronted with the choice of presentation sequence. If
the items have a natural sequence—such as days of the week,
chapters in a book, or sizes of eggs—the decision is trivial.
Many cases have no task-related ordering, though, so the
designer must choose from either alphabetic order, grouping
of related items, and most frequently used items first.
Categorical organization is generally preferable over
alphabetical. Using frequency of use does speed up selection
of the topmost items, but the loss of a meaningful ordering
for low-frequency items may be disruptive, so it is best
limited to small lists
 Phrasing
• For single menus, a simple descriptive title that identifies the
situation is all that is necessary. For tree-structured menus,
choosing titles is more difficult. One helpful rule is to use the
words used for the menu items as the titles for the submenu
or next pages. For example, it is reassuring to users to find
that when they select “Business and financial services”, they
are shown a display that is titled “Business and financial
services”. It might be unsettling to get a display titled
“Managing your money”, even though the intent is similar.
For webpages, a distinctive short title displayed as browser
tab label will help users return to the page after they visit
other tabs. A distinctive icon improves the tab label as well.
 Layout
While the layout of applications and websites can be assisted by the use of
templates and website management tools, designers who establish guidelines
for consistency across dozens or hundreds of screens will reduce users’
anxiety by offering predictability (see Section 3.2). The following elements can
be included:
• Titles. Some people prefer centered titles, but left justification is also
acceptable.
• Item placement. Typically, items are left justified, with the item number or
letter preceding the item description. Blank lines may be used to separate
meaningful groups of items. If multiple columns are used, a consistent pattern
of numbering or lettering should be used (for example, it is easier to scan
down columns than across rows).
• Instructions. The instructions should be identical in each menu and should be
placed in the same position. This rule includes instructions about traversals,
help, or function-key usage.
• Error messages. If the users make unacceptable choices, the error messages
should appear in a consistent position and should use consistent terminology
and syntax. Graying out unacceptable choices will help reduce errors
 Audio Menus
• Audio menus found in interactive voice response (IVR) systems
(Lewis, 2010) are useful when hands and eyes are busy, such as
when users are driving or testing equipment and are
ubiquitous in phone surveys or services and public-access
situations that need to accommodate blind or vision-impaired
users, such as information kiosks or voting machines.
• With audio menus, instruction prompts and lists of options are
spoken to users, who respond by using the keys of a keyboard
or phone or by speaking. While visual menus have the distinct
advantage of persistence, audio menus have to be memorized.
Similarly, visual highlighting can confirm users’ selections,
while audio menus have to provide a confirmation step
following the selection. As the list of options is read to them,
users must compare each proposed option with their goal and
place it on a scale from no match to perfect match.
• 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 (preferably by detecting
user inaction). Complex and deep menu structures
should be avoided. A simple guideline is to limit the
number of choices to three or four to avoid
memorization problems, but this rule should be re-
evaluated in light of the application. For example, a
theater information system will benefit from using a
longer list of all the movie titles rather than breaking
them into two smaller, arbitrarily grouped menus. Dial-
ahead capabilities allow repeat users to skip through the
prompts.
 Form fill-in
• There is a paucity of empirical research on form
fill-in, but several design guidelines have
emerged from practitioners (Jarrett and
Gaffney, 2008). Software tools simplify design,
help to ensure consistency, ease maintenance,
and speed implementation, but even with
excellent tools, the designer must still make
many complex decisions. The elements of form
fill-in design include the following:
• Meaningful title. Identify the topic and avoid
computer terminology.
• Comprehensible instructions. Describe the user’s
tasks in familiar terminology. Be brief; if more
information is needed, make a set of help screens
available to the novice user. A useful rule is to use the
word “type” for entering information and the word
“press” for special keys such as the Tab, Enter, or
cursor movement (arrow) keys. Since “Enter” often
refers to the special key with that name, avoid using it
in the instructions (for example, do not use “Enter the
address”; instead, stick with “Type the address”).
Once a grammatical style for instructions is
developed, be careful to apply that style consistently.
• Label the fields. Place the label in a consistent
location (e.g., top or left of the field). A less
desirable location is to place labels inside the
fields, using a grayedout font. It saves space,
but the labels disappear as soon as users start
typing, requiring users to remember what is
needed, which often leads to errors.
• Limit data entry. Make sure all fields are really
needed. Carefully set default values (e.g., use
the current location). This is particularly
important for small displays .for example,
using only the zip code instead of the city
• Explanatory messages for fields. Information about a field (e.g.,
“Your e-mail address will be the user name of your account”) or its
permissible values should appear in a standard position, such as
next to or below the field, preferably using a different font and style.
• Error prevention. Where possible, prevent users from entering
incorrect values. For example, in a field requiring a whole number,
do not allow the user to enter letters or decimal points.
• Error recovery. Summarize errors at the top of the page. Highlight
errors in the form. If users enter unacceptable values, indicate
permissible values for the field; for example, if the zip code is
entered as 28K21 or 2380, the message might be “Zip codes should
have 5 digits”.
• Immediate feedback. Immediate feedback about errors is
preferable. When feedback can be provided only after the entire
form has been submitted, the location of the field needing
correction should be made clearly visible (for example, by displaying
the error message in red next to the field in addition to general
instructions at the top of the form).
• Logical grouping and sequencing of fields.
Related fields should be adjacent and should be
aligned with blank spaces for separation
between groups. The sequencing should reflect
common patterns—for example, city followed
by state followed by zip code.
• Visually appealing layout of the form. Alignment
creates a feeling of order and comprehensibility.
For example, the field labels “Name”, “Address”,
and “City” can be right-justified so that the data-
entry fields are vertically aligned. This layout
allows the frequent user to concentrate on the
entry fields and to ignore the labels.
• Familiar field labels. Common terms should be used. If
“Home Address” were replaced by “Domicile”, many
users would be uncertain or anxious about what to
enter.
• Consistent terminology and abbreviations. Prepare a
list of terms and acceptable abbreviations and use the
list diligently, making additions only after careful
consideration. Instead of varying between such terms
as “Address”, “Employee Address”, “ADDR.”, and “Addr.”,
stick to one term, such as “Address”.
• Visible space and boundaries for data-entry fields.
Users should be able to see the size of the field and to
anticipate whether abbreviations or other trimming
strategies will be needed. An appropriately sized box
can show the maximum field length.
• Convenient cursor movement. Provide a mechanism for
moving the cursor between fields using the keyboard,
such as the Tab key or cursor-movement arrows.
• Required fields clearly marked. For fields that must be
filled in, the word “Required” or some other indicator
(e.g., *) should be visible. Optional fields should follow
required fields whenever possible.
• Privacy and data sharing information. Users will be
anxious sharing their personal information and want to
know how the data will be used and who will have access
to it.
• Accessibility. For example, make sure the forms are
navigable with a screen reader.
• Completion signal. It should be clear to the users what
they must do when they are finished filling in the fields.
 Format-specific fields
• Using custom widgets and direct-manipulation
interaction techniques can facilitate data entry
and reduce errors. Calendars can be used to
enter dates, seating maps can help users
select airplane seats, and menus using
photographs might clarify choices of pizza
style.
• Apps for touch screen devices need to open the
keyboard with the appropriate preset; for example,
when a number is requested, the numerical keyword
should appear by default. For e-mail addresses, the
“@” and “.” buttons need to be shown. For URLs, the
“:” and “/” will be handy. Alphabetic fields are
customarily left-justified on entry and on display.
Numeric fields may be left-justified on entry but then
become right-justified on display. When possible, avoid
entry and display of leftmost zeros in numeric fields
(with zip codes being an exception). Numeric fields
with decimal points should line up on the decimal
points. Pay special attention to such common fields as
these:
• Passwords: When asked to type a password, users
also need a means to retrieve or change the
password if they have forgotten it, but it is also
important to avoid malicious use of that functionality
• CAPTCHAs:A CAPTCHA (acronym for Completely
Automated Public Turing test to tell Computers and
Humans Apart) requires users to type text presented
graphically to be illegible to computers. Including an
audio option is necessary to make the CAPTCHA
accessible to users with visual impairments. Newer
versions observe user behavior with the CAPTCHA to
predict whether a human or a robot is interacting
 Dialog boxes
• Many tasks are interrupted to request users to select
options, perform limited data entry, or review alerts and
error messages . The most common solution is to provide a
dialog box . Dialog-box design combines menu-selection and
form fill-in issues with additional concerns about consistency
across potentially hundreds of dialog boxes and relationships
with other items on the screen. A guidelines document for
dialog boxes will help strive for consistency. Dialog boxes
should have meaningful titles to identify them, and the titles
should have consistent visual properties. 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.