4. Good app = designed for all 4 layers
Application structure
Screen layouts
UI Controls
Interactions
Last week, we
talked about
application
structures and
screen layouts
This week, it’s
UI Controls +
Interactions
10. Wrap up
1. Hub and spoke model for app design
2. 4 basic elements of application design
3. 3 application type(s) to help us meet our
users’ goals
4. 15 basic screen layout patterns known to
help with user work flow
5. 1 goal for 1 screen
11. Layers: UI Controls + Interaction
UI control and Interaction layers are about
telling a story.
A compelling story line helps users
accomplish tasks
Story = Task + Context
13. 6 Rules for interaction design
(Rules from software design)
#1 Make It Direct
where there is output, there should be input – Alan Cooper
#2 Keep It Lightweight
application should stay out of the user’s way
#3 Stay In the Page
application should stay out of the user’s way
#4 Provide An Invitation
use animations and user events to invite discovery
#5 Use Transitions
help user understand beginnings, endings
#6 React Immediately
provide feedback as soon as possible (auto suggest, live search, etc.)
14. UI Controls – some examples
auto-suggest
auto-complete
Breadcrumb
carousel/coverflow
charts
graphs
collapsible panels
color picker
combobox
date-picker
dialog
docking
drag & drop manager
dynamic filter
feedback/status
fisheye/spotlight
gauges
help tips
hot keys
hover action
hover detail
inline edit
progress indicator
magnify
map pin
Menu
Multi-page
nav bar
rating system
paginator
slide show
range slider
scoped search
sparklines
spinner
tabs
table or data grid
toolbar
tree view
vertical browser
view toggle
WYSIWYG editor
zoom/pan
16. 6 Rules for interaction design
(Rules from software design)
#1 Make It Direct
where there is output, let there be input – Alan Cooper
#2 Keep It Lightweight
application should stay out of the user’s way
#3 Stay In the Page
application should stay out of the user’s way
#4 Provide An Invitation
use animations and user events to invite discovery
#5 Use Transitions
help user understand beginnings, endings
#6 React Immediately
provide feedback as soon as possible (auto suggest, live search, etc.)
17. #1 Make it direct
• Where there is output, let there be input
• Whenever there is a need to edit content, make
it happen in context rather than on a separate
screen
Three different types of direct manipulation:
1. editing controls
2. drag and drop controls
3. direct selection controls
18. #1 Make it direct – editing
Editing Controls
- Single field inline edit: edit a single line of
text
- Multi-field inline edit: edit multiple lines of
text
- Group edit: Changing a group of items
directly
- Overlay edit: Editing in an overlay panel
- Table edit: Editing items in a grid/table
27. #1 Make it direct – direct selection
Direct selection – allow users to directly select
elements on an interface
Types of direct selection:
− Checkbox or control-based selection
− Collected selection
− Object Selection
29. Direct selection – single or group
Object selection and collected object selection
30. #2 Keep it lightweight
Reducing the effort required to interact with a site
or application
31. #2 Keep it lightweight
always-visible tools: contextual tools are
located directly in content
hover reveal tools: show contextual tools on
hover
toggle-reveal tools: a switch to toggle on/off
contextual tools for page or module
multi-level tools: progressively reveal actions
based on user interaction
secondary menu: show a secondary menu
(usually by right-clicking on an object)
36. #3 Stay on page
Paging to a new screen and page refreshes are
disruptive to a user’s flow
Instead of assuming a new page for every action,
model the user’s process by keeping all sub-
tasks in the page
Methods for keeping the flow:
1. Overlay: display a lightweight layer over the main page action
2. Inlay: information or actions inlaid within the screen
3. Virtual page: extend the virtual space of the page with dynamic
content and animation
4. Process flow: create flow within the page, usually by modeling
user task flow
37. #3 Stay on page
Overlays
Inlays
Virtual Paging
Process Flows
38. #3 Stay on page (cont’d)
Overlays
Dialog overlay: an overlay containing additional
information, details, actions
Inlays
List inlays: expanding a list to show more details
Dialog inlays: expanding a section to reveal a dialog
process
Detail inlay: show great detail about an element
39. #3 Stay on page (cont’d)
Virtual Paging
virtual (infinite) scrolling: instead of fetching new content
through a paginator, fetch content based on user action
which signal intention or desire to view more
inline paging: switch out content to make experience feel
less like leaving a page
scrolled paging: uses pagination or navigation to scroll
content horizontally (like carousel)
virtual panning: allow users to drag the screen (like
panning a map)
zoomable user interface: zoom in/out of an interface.
Creates possibility of infinite screen
40. #3 Stay on page (cont’d)
Process Flow
interactive single-page process: all process in a task flow stays
on screen (e.g., sign up taskflow)
configurator process: configuration process such as configuring
a car, an online store, etc.
static single-page process: keeps the entire process all on one
long page
dialog overlay process: a subtask process is overlaid as a
dialog box (e.g., lightbox)
inline assistant process: an “assistant” task flow is kept on the
page such as an inline shopping cart
53. #4 Provide an invitation
Findability versus discoverability
Invitations cue the user to another level or layer
of interaction
Cues – just in time and contextual
Types: static and dynamic invitations
54. #4 Provide an invitation
Static invitations:
call to action invitation: to engage in primary task
tour invitation: to explore new features
affordance invitation: designs that use familiar visual
and animation techniques to make it clear an action can
be performed (SIGNIFIER)
blank slate: invites users to fill up a blank space
55. #4 Provide an invitation
Dynamic invitations:
hover invitation: invite during hover action
drag and drop invitation: to grab, drag and then drop
content
more content invitation: to reveal more content
inference invitation: one or a series of invitations that
make logical assumptions – inferences – about what a
user will do next
cursor invitation: to try a lightweight operation by
changing the appearance of the cursor
60. Inference invitation
After I click the + symbol to add a category,
there’s an invitation to add content assuming that
my next step is to name the category
76. #5 Use transitions
Special, cinematic effects that occur over time
Provide feedback during interaction
Transitions are a form information scent. They
tell the user she’s on the right track
Smooth the action: makes screens feel human
Help users understand what has happened and
what could happen
Movement helps capture and focus attention
Central vs peripheral vision and “refrigerator
effect”
77. #5 Use transitions (semantically)
By offloading interpretation of changes to the
perceptual system, animation allows the user to
continue thinking about the task domain, with no
need to shift contexts to the interface domain.
From the paper, Animation: From Cartoons to the User
Interface by Bay-Wei Chang (Stanford) and David Ungar
(at Sun Microsystems) 1995
79. Brighten/dim
Dim one part of screen to make another part appear
brighter
Use for subtle, secondary changes to interface
Cognitive science: change in movement captures
more attention than color change
The faster the change, the more eye catching
The sharper the contrast, the more attention
Yahoo tool icons brighten and dim
82. Self-healing fade
When deleting or moving objects, expose a “hole” where the
object was by using a ghosting or fading technique. Here,
dragging object out of an album
84. Animation
Help make application more life-like
avoid “I Dream of Jeanie” effect
Improve delight and enjoyment of environment
Common types:
• Zoom back/snap back: when a drag and drop fails
• drop: mimic the effect of something dropping
• snap to place: mimic effect of something snapping into
place
• genie effect: mimic effect of genie going back into the bottle
• Dog ears: the effect of continuing motion even after stopping
• Magnetism:
88. #5 Transitions - More transitions
Faceplate: Move between two faces of an interface by
cross-fading between the two
Flip: flipping a card over
Carousel: moving between several objects
Accordions: variation on a tabbed panel. When you open
one item in the list, the other open item closes
89. #5 Transitions - Use effectively
Use transitions to help tell a story. If there’s no story, then
transitions are baubles.
Explain what just happened
Demonstrate relationship(s) between objects
Focus user attention
Improve perceived performance by maintaining engagement
Create the illusion of virtual space
90. #5 Transitions - Best practices
The more rapid the change, the more important the
event
Rapid movement perceived as more important than
rapid color change
Movement toward the user is seen as more
important than movement away from the user
Very slow change can be processed without
disrupting the user's attention
Movement can communicate an object's new home
Transitions should be reflexive – view transition and
reverse transition
91. #5 Transitions - Dont’s
Don’t overuse
Don’t rely on transitions to communicate a story;
use multiple methods to communicate
Don’t rely on transitions to communicate a
changed interface
Don’t use transitions outside the user’s focus
area. (using it outside the focal area makes the
transition effect feel more like advertising)
Don’t use gimmicky effects
Don’t use for the cool factor
92. #6 React immediately
A way of providing feedback after an interaction
Users expect something to happen in response
to their action (perceive apps as rude at best and
broken at worst when they do not respond)
Two patterns:
− Lookup patterns
− Feedback patterns
93. Lookup patterns
Since looking up information is a large part of
what user do there are methods of providing
feedback during searches:
− Auto Complete
− Live Suggest
− Live Search
− Refining Search
95. Autocomplete – best practices
Use autocomplete for input assistance
Match on multiple fields
Show results when the user pauses
Allow selecting matched value on Tab key
96. Known as winnowing, live suggest provides real
time search term suggestions as the user is
typing
Live suggest / autosuggest (lookup
pattern)
107. Progressive disclosure
• When there is a logical series of steps, display
hints and contextual tools and menus as they are
needed to avoid cluttering the screen
110. Progress indicators
Provide immediate feedback to let users know that
the system is responding to their action
Favicon turns into progress indicator:
114. Periodic refresh
Recency trumps quality
People attracted to the newest information
Refresh pages to ensure user sees latest
information such as new notification, recently
added listings, price changes, new posts to the
blog, etc
116. Wrap up
4 design layers in every app: application
structure, layouts, UI controls, interactions
3 application types: information, process,
creation
15 screen layout patterns aid user workflow
1 goal for 1 screen
Use the hub and spoke model for app design:
Single focus at center
Employ UI Controls and guidelines for using
them
6 Interaction principles to guide choices on
interaction layer
122. 6 Rules for interaction design
(Rules from software design)
#1 Make It Direct
where there is output, let there be input – Alan Cooper
#2 Keep It Lightweight
application should stay out of the user’s way
#3 Stay In the Page
application should stay out of the user’s way
#4 Provide An Invitation
use animations and user events to invite discovery
#5 Use Transitions
help user understand beginnings, endings
#6 React Immediately
provide feedback as soon as possible (auto suggest, live search, etc.)
123. For more research-based insights
about Homes.com users, check out
the UX insights portal:
http://insights.homes.com
Thoughts? Questions?