22CDX01 -

FUNDAMENTALS OF USER
INTERACTIVE DESIGN
Unit - II Interaction and Visual Design
 Interactions
 Controls
 Commands
 Labels And Instructions
 Feedback
 Task Steps and Navigation
 Surfaces
 Errors And Notifications
 Dynamic Elements
 Importance of Visual Design
 Graphic Designers
 Layout
 Typography And Text
 Color - Affordances - Icons And Glyphs-
 Animations And Transitions – Demanding Attention.
“Everything is best for something and worst for something else.
The trick is knowing for what, when, for whom, and why.”

–BILL BUXTON
• That flashing icon on the taskbar is very distracting and makes it hard to concentrate. It’s
great choice for something that really requires attention; otherwise, it interferes with getting
work done.

The language of UI maps well to the parts of natural speech

and other elements of communication.
INTERACTIONS :
A typical UI element can be broken down into these constituent parts:
Purpose
Affordance
Body language
Interaction
Labeling

UI elements can be decomposed into purpose, body language,

affordance, interaction, and labeling. In this case, the body language
is the width of the control.
Here are the common mouse interactions used by desktop UI:


Here are the common keyboard interactions used by desktop UI:

[Link] keys [Link] keys

Here are some common interactions and gestures for touch-based UI:
 CONTROLS (WORDS)

Size of expected input

Number of items
Screen space required
Immediate versus delayed effect
Default values
Required input
Encourage change
Presentation, order
Level of commitment
Forgiveness
Complexity
Discoverability
Common controls
Data controls
Mobile controls
Removing, disabling, or giving an error message:
Remove the control
Disable the control
Give an error message
 COMMANDS (VERBS)
• Discoverability.
• Directness
• Consolidation.
• Context.
• Simplicity.
• Space efficiency
In-place commands

Sometimes in-place commanding can be eliminated by giving actions

immediate effect.
Pop-up menus :
Pop-up menus are simple and yet still have a contextual feel. These
menus are called action sheets in iOS.
Menu bars
• Toolbars :
A typical toolbar with the most frequently used commands.
Toolbars are strong where menu bars are weak, so the two are
often combined.
 Ribbons:
Ribbons organize commands into grouped tabs

Context
menus:Context
menus display the
most frequently
used commands for
a specific object or
context .
 Palettes
• Palettes display the most frequently used commands for a specific
task on a user-movable surface
 Command-labeling patterns:
• Commands are labeled with some combination of text labels and icons:
Text-only labels :

They require tooltips to help users understand them.

Icon-only labels (plus tooltips):
 Icon and text labels:

LABELS AND INSTRUCTIONS

Labels refer to text or icons directly on

controls or associated with controls,
whereas instructions refer to additional
explanations beyond the labels.
Most controls need a label for users to understand their purpose
and effect.

Main instructions are large text instructions at the top of a

page that explain the purpose of the page.

Ordinary (not main) instructions should rarely be needed.

• Very few users will click on Format without reading the button
label, but many users will click OK without reading the warning.
Concise vs. self-explanatory: Getting the right
balance
• Attributes of effective labels and instructions (Discussed in Chapter
1)
Useful, relevant, necessary
Purposeful
Clear and natural
Easy to understand
Specific and explicit
Concise and efficient
Good personality and tone
Label and instruction details:
When crafting label and instruction text, here are some
details to get right
Placeholders:

Ellipses:
Capitalization:

Periods:

Underlining :
FEEDBACK :
Feedback indicates that the action is happening and was either
successful or unsuccessful, providing specific details when
needed

Effective feedback is responsive

Progressive rendering:

Animations:
Activity indicators:

Progress feedback:
Modal dialog boxes:

Flashing or bouncing :
Beeping:

Grouping (sentences):
Group boxes:
Group boxes are commonly used on the iOS.
Group boxes are labeled rectangular frames that
surround a set of related controls.
 Separators or heading banners
• Separators and heading banners are essentially group boxes without
the box—using labeled lines or banners to separate groups of
related controls.
 Rich headings and layout
• You can use layout alone to show relationships between controls
 Progressive disclosure
• Progressive disclosure, in which additional information is displayed on
demand, is a way to group dynamically.
 Sentence-style grouping
• Sentence-style grouping shows the relationship between controls by
composing them into complete thoughts—much like a sentence.

A more practical approach is to present an entire

Some mobile settings read like complete
thought without making an actual sentence
thoughts.
TASK STEPS (PARAGRAPHS, MONOLOGUES, AND
DIALOGUES)

Here are some conversation patterns to consider:

 A speech.
 A monologue
 App-driven dialogue
 User-driven dialogue
 A form
Many complex, hard-to-use UIs use heavy monologues
or app-driven dialogues when they should be using
simple user-driven dialogues
Monologues are often boring.
Many complex, hard-to-use UIs use heavy
monologues or app-driven dialogues when they
should be using simple user-driven dialogues.
Here are the common techniques to present dialogues that are simpler and more user
driven:
• Present less stuff
• Better organization and a visual hierarchy
• Progressive disclosure
• Modes
• Tabs
• Pages
 TASK NAVIGATION
• A great way to simplify a complex task and let the user drive the
conversation is to break a task down into simple steps.
• A helpful way to think about task navigation is to think about how you find
your way around in an unfamiliar city as a tourist
• There are many possible navigation models, but some variation of Web
navigation is often the best choice. By Web navigation, I mean a navigation
model that:
• Has clear means to advance to the next step
• Offers a consistent way to go back to the previous step when needed
• Has a consistent way to get home or cancel the task
• If helpful, has a consistent way to search
Clear landmarks
Possible routes
“You are here” marks
How you got here
Task progress
A choice
Recommendations.
A clear next step
Go back to the last step
Home.
SURFACES (DOCUMENTS)
Surfaces have these characteristics:
 Weight
 Floating versus fixed
 Modality
Here are the common UI surfaces, starting from the lightest to the heaviest:
 Pages
 Panes and bars
 Dialog boxes
 Properties
 Windows
Modern UI tends to favor lightweight, fixed, and modeless,
whereas classic UI often used heavy, floating, and moda l.
 ERRORS, WARNINGS, CONFIRMATIONS, AND
NOTIFICATIONS (INTERRUPTIONS)

As with real-world interruptions, some UI situations must demand the

user’s attention:
• Errors
• Warnings
• Confirmations
• Notifications
All these message types are potentially annoying, so reserve them for
situations in which they are really needed.
 For errors
• Don’t give an error message unless users are likely to do something differently.
• Clearly state a specific problem with a user-centered explanation.
• Whenever possible, propose helpful solutions that are likely to fix the problem.
• Don't blame the user.
• Don’t use the following words:
• • Error, failure (use problem instead)
• • Failed to (use unable to instead)
• • Illegal, invalid, bad (use incorrect or not valid instead)
• • Abort, kill, terminate (use stop instead)
• • Catastrophic, fatal (use serious instead)
Such language is unnecessarily harsh and has a poor personality.
For warnings
• Use warnings to describe exceptional conditions that might cause a problem in
the future.
• Don’t give a warning unless users are likely to do something differently.
• Clearly state a specific condition, the potential problem and its consequences,
and what the user needs to do about it.
• Don’t overwarn.
 For confirmations
• Use confirmations only for risky actions or to alert users to significant,
unintended consequences.
• Effective confirmations present users a good, unobvious reason not to proceed—
and a reasonable chance that sometimes users won’t.
• Use either completely self-explanatory responses or Yes or No responses to
confirmations.
 And for notifications
• Use notifications to keep users informed about timely, important events
unrelated to the current activity that are useful and relevant but not
critical enough to interrupt users’ workflow
• Notifications are potentially annoying, so make them rare
• Don’t try to force users to see notifications
 DYNAMIC ELEMENTS
• In classic UI, nearly all elements are displayed statically on the
screen, whereas modern UI has many dynamic elements.
Most dynamic elements fall into one of these categories:
• Progressive disclosure
• Dynamic resizing
• Dynamic secondary commands and affordances
• Direct manipulation
 Progressive disclosure
• With progressive disclosure, the most commonly used controls and
information is displayed by default, but users can display more on
demand.
 Dynamic resizing:
• With dynamic sizing, the controls are visible statically (and therefore
discoverable), but their sizes change dynamically based on the
current context.
 Dynamic secondary commands and
affordances
• Dynamic secondary UI elements are normally hidden but displayed
automatically when users click on or hover over a control or perform
an action to make them relevant.
• Displaying these secondary elements dynamically reduces the overall
heaviness of the static UI, while displaying the primary
affordances statically makes it clear what to do.
• By contrast, hiding primary affordances risks turning your program
into a puzzle because users won’t know what to do and will have no
reason—other than desperation—to click or hover.
Direct manipulation
• With direct manipulation, users move, edit, transform, or perform commands by directly
interacting with an object instead of going through an intermediary UI, such as dialog boxes
and menus.
• Direct manipulation has the advantage of being direct, engaging, and modern as well as simple
and efficient. With direct manipulation, your program’s content can be the user interface!
• Your first plan of attack is to design frequently used or unexpected direct manipulations to be
easily discoverable
Here are the typical approaches listed in order of discoverability for
novice users:
• Explicit instructions
• Contextual commands
• Manipulation affordances
• Hand cursors
• Experimentation
• Fortunately, the solution to the discoverability problem is simple:
Use less discoverable direct manipulation as a redundant, efficient
shortcut for advanced users
 Dropbox uses a placeholder to
indicate that users can drop files.

On hover, SketchBook shows contextual

commands using marking menus
 Selecting a form field in
Wufoo dynamically reveals
everything you can do with
it.

The iOS photo Crop command reveals its manipulation

affordances
 The AllRecipes Menu
Planner reveals a drag
affordance for the recipes
on hover as well as giving
instructions for the drop
targets.

Google Maps indicates that a map can be

panned with a hand cursor.
 The Macintosh Dock has no drag
affordance, but users expect to be able to
move items, and a quick experiment
confirms this ability.

Although users can move and copy files using direct

manipulation, the good ol’ Copy and Paste commands
should still be available
 Visual Design
• Here is what common visual design elements should communicate:
Layout
Typography
Icons and glyphs
Affordances
Graphics
Color
Animations and transitions
THE IMPORTANCE OF EFFECTIVE VISUAL DESIGN

Visual appearance is essential to our perception of quality.

WORKING WITH GRAPHIC DESIGNERS

• These are important UI design skills.

• You can design the basics more efficiently at the wireframe
level
• Understanding visual design will help ensure that important
design details are faithfully executed during development
• These skills will help you work with your designers more
effectively and productively
Here are some additional tips for working
with graphic designers:
• Hire the best graphic designers
• Hire graphic designers early in the process
• Tell them how to do their job
• Focus on your high-level project vision, goals, requirements,
direction, and branding guidelines
• Provide constructive feedback and give the designer the benefit of
any doubt
• Don’t trivialize designers’ contributions.
 LAYOUT
• Layout is the placement, sizing, spacing, and emphasis of UI
elements and content within a page.
• The biggest problem non designers have with layout is that they are
focused on the mechanical layout getting stuff to fit.
There are two modes of reading: immersive
reading and scanning.
• Layout design principles
Reading patterns

A scanning pattern for finding things quickly

• Users follow these patterns generally, but the patterns change when
there is content that attracts or repulses attention.

Interactive controls get the user’s

immediate attention.
Small screens found on smartphones have a
different scanning pattern.

The scan path for small screens

is straight down.
Conversation patterns

Logical order versus out-of-sequence

This agreement is like a monologue.
The inverted pyramid presentation style allows users to
stop reading once they have the information they need
Attributes of an effective layout
• Focus
• Flow
• Termination
• Order
• Control sizing and spacing
• Emphasis

The eye starts at the focal point, scans across

the page, and ends at the termination point
• Layout grids
 Label alignment

It takes a lot of horizontal space if there are long labels or

controls.

screen is zoomed and the vertical format works well with

vertical scrolling.
• Because of automatic zooming, top-aligned labels are the best
alignment choice for smartphones with small screens. Note how the
left-aligned labels aren't visible after zooming.
 Left-aligned labels
Right-aligned labels with left-justified controls
Grouping
Layout efficiency
Balance
DESIGNING FOR SCANNING
• The goal of scanning is to find things quickly
A model for scanning
overall visible portion of the page to get an idea what is there
start to scan at the page’s focal point
scan the page in roughly a left-to-right, top-to-bottom order
check any UI elements that attract their attention
skip over any UI elements that repulse their attention
expect to find the command to complete the step or task there.
don’t optimize, they satisfice
won’t scroll the page
 Designing a layout for scanning
• that initiate the task in the upper-left corner or upper-center
• that complete the task in the lower-right corner
• If the page scrolls, design the page so that commands to complete the task don’t require
scrolling.
• Place primary UI elements required to perform the task prominently along the scan path
• Place secondary UI elements for general tasks in the upper-right corner.
• Place secondary UI elements for interacting with the page content in the lower-left corner.
• Place general information about your product or company or contact information in a footer
• Whenever possible, put crucial text on interactive controls instead of using static text labels.
• Reconsider banners and large blocks of mostly unformatted text.
Quick fixes to scanning problems
• Multiple focal points
• An unnatural flow order
• Primary elements not attracting
enough attention
• Secondary elements attracting
too much attention
 TYPOGRAPHY AND TEXT
• Well-presented text is beautiful -Calligraphy
• Better typography

• Visual hierarchy
• Better, more concise text

Clear, minimal text is beautiful when well presented.

 Typography and system fonts
• Fonts not only have their obvious visual differences in appearance and style,
they also have different reading characteristics.
• Readability and legibility are often tradeoffs
• Using the appropriate system font for your platform is always a safe choice
 Text attribute guidelines
• Color

• Shade
• Bold

• Italic
• Bold italic
• Underline
• Capitalization
 Background guidelines
Text needs to have good contrast with its background to be legible.
• Normal text
• Contrasting text
• Solid background colors
COLOR

Beyond aesthetics, the interpretation of color is often

culturally dependent
• Another challenge is that color affects your product’s accessibility
• Never use color as the only method of communication
The interpretation of these status colors is globally
consistent

Stop! … and good luck!

What if you want to use red, yellow, or green
without suggesting status?
• These perceptions suggest that color can be used strategically to help
users scan a page.
• Focal point
• Next step
• Differentiation
• Even though there is flexibility with these colors, you should keep
these perceptions in mind when you’re choosing colors.
some recommendations for designing with
color
• Start your design process using monochrome wireframes.
• Keep your use of color simple
• When you’re choosing colors, consider what each UI element
communicates and choose a color consistent with that
communication
• Use a graphic designer if you want to use complex color
 AFFORDANCES
• Affordances are the visual properties of a UI element that indicate
how to perform an interaction.
ICONS AND GLYPHS
EXPLORE IT?
Recognition versus comprehension
Quick: Find the New Comment command Based on the icon alone, can you
determine what the Format Painter command does? Try this exercise
enough, and you’ll see that labels are best for comprehension, icons are
best for recognition, and labeled icons are best for both.
• The icons on the left have distinct shapes and colors, whereas the
icons on the right have similar shapes, colors, and designs and are
more likely to be confused.
 Intuitive icon designs
The user’s ability to understand an icon is primarily determined by the icon
type
• Standard symbols
• Preview of results
• Simple nouns
• Simple nouns doing simple verbs
• Simple nouns showing simple adjectives
• Well-known logos
• All of the above with a single standard overlay (error, warning, disabled,
etc.)
• Standard and simple works well
The following icon types are moderately difficult to understand:
• Metaphors. When an object with similar behaviors or properties is
used as a substitute.
• Metonyms. When a completely different but related object is used as a
substitute.
• Synecdoche. When a part represents the whole.
The following icon types are difficult to understand:
• Unfamiliar nouns
• Complex, detailed icons
• Abstract concepts
• Obscure logos
• Puns
In addition to type, context plays an important role in helping users
easily deduce meaning.
• In the context of a database program, users can figure out that this
funnel icon is a metaphor for filtering. But the meaning of this icon
is unclear in any other context. Martinis, anyone?
Everett’s Laws of Icon Design
I have a couple laws for icon design:
• The longer it takes to come up with an idea for an icon, the less
comprehensible the icon is going to be.
and
• If an icon requires a tooltip to understand, it’s not comprehensible.
At best, such icons help in recognition.
What to do if your icons aren’t good ?
• If you are dissatisfied with your icons, consider the following, in
priority order.
• Reconsider the need
• Reconsider consistency
• Hire an icon design specialist

You don’t need an icon for every command.

• Standard icons and glyphs
• To reinforce the meaning of these standard icons, choose them based
on their meanings, not their appearance.
• You can use these standard icons unlabeled and be confident that
users will understand them.
• For unlabeled, nonstandard icons, assume that users won’t
understand them and will experiment to figure them out.
Icon overlays
• Overlays are used to modify the
meaning of an icon
• The only trick to icon overlays is to
use only one at a time
ANIMATIONS AND TRANSITIONS
• make your product easier to understand, feel smoother and more
natural, and have a modern, engaging, high-quality feel .
• Effective animations and transitions communicate what is happening
visually.
Pointless animations aren’t cool. Trust me!
Effective nonverbal communication
• The best way to achieve consistency is to define an animation
vocabulary for all meaningful animations and transitions.
• Meaningful animations should be assigned a single meaning, and that
meaning should be applied consistently throughout the product.

A right-to-left transition shows that the page content

is being replaced by the next item.
• Cross-fade transitions don’t have a specific meaning and can be used
for many purposes without confusion.
An example transition vocabulary
 Designing an appropriate personality
• For animations and transitions, the “what you say” is the meaning of
the effect and the “how you say it” is its personality.
• An animation’s personality can be relaxed, energetic, or even happy.

An Attention animation for a product

with a relaxed personality.
An Attention animation for a product with an energetic
personality.

An Attention animation for a product with a happy personality.

Animation and transition guidelines:
• Don’t use animations and transitions just because you can
• For accessibility, never use animations as the only method to
communicate important information
• Choose transitions that don’t harm users’ productivity
• Choose transitions that feel responsive
• Choose animations and transitions that aren’t tiresome after repeated
viewings
DEMANDING ATTENTION

Here are some situations worthy of breaking users’ flow and demanding
their full attention:
• Potential for physical harm
• Potential harm to device (hardware or software) or access to it.
• Critical change in status.
• Potential for significant loss of data or user effort
• Disclosure personal or sensitive information
Attention-getting techniques:
• Put critical text on control labels
• Use an attention-getting presentation
• Use warning icons
• Animations
• Notifications
• Modal dialog boxes
• Flashing
• Beeping and alarms.
Abuse and habituation
• All the previous techniques can be abused if overused or if the
attention they draw is undeserved
 Recommendations
• Think about what you would do in person
• Use the least obtrusive attention-getting technique that does the job
• Make sure that the need to demand attention is rare
• Use progressive escalation