Application Design - Part 2

Application Design:
Rules, controls, interactions

Apps have 4 elements or layers

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

We learned we should <3 hub + spoke

There are 3 types of application structure
Information
Pattern
Process
Pattern
Creation
Pattern

So…
− You’ve figured out which application pattern or
patterns are best
− Naturally, u <3 hub + spoke architecture
What’s next? v

Align user goals with layout choice(s)
To accomplish that:
1. Determine the ONE goal for each screen
2. Figure out which screen layout is needed

What were those layouts again?

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

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

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
#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.)

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

UI Control Component Library - sample

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
#3 Stay In the Page
#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.)

#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

#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

Inline edit
https://www.flickr.com/photos/jannejanne/5027462322/

#1 Make it direct – drag + drop
Drag and drop controls:
– Modules
– Lists
– Objects
– Actions
– collections

#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

Group checkbox selection
Checkbox and collected selection

Direct selection – single or group
Object selection and collected object selection

#2 Keep it lightweight
 Reducing the effort required to interact with a site
or application

#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)

toggle reveal tool
A master switch to toggle
on/off contextual tools for
the page or module.

secondary menu
By right clicking, user reveals a menu

#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

#3 Stay on page
 Overlays
 Inlays
 Virtual Paging
 Process Flows

#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

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

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

zoomable UI or zoomable elements

process flow
Sign up screen  

interactive single page process

#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

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

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

Static call to action
How was that form an anti-pattern – a
bad example of a call to action?

Call to action invitation: 1-2-3 steps invitation

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

Inference/Social proof invitation

Hover invitation http://glossandgradients.com/

Affordance
 Placeholder photo
 Circular completion “timer” uses animation on page load
 Downward carat

Cursor invitation
Change the cursor to invite an action; change when action
initiated, change when action can/should be stopped

#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”

#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

Transition patterns
 brighten/dim
 expand/collapse
 self-healing fade
 animation
 spotlight
 slide in/out
 enlarge/shrink
 faceplate
 flip
 accordion
 carousel
 fade
 zoom
 perceived performance

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

Expand/collapse
Bring more content into a page with expanding and collapsing
panels

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

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:

Spotlight
 Highlighting something that was recently changed or added
 http://c1dey2.axshare.com/

 Highlighting something by enlarging it and then shrinking it
back to original state
Enlarge/shrink back

Slide in/out
 A panel slides in/out of screen

#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

#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

#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

#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

#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

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

Autocomplete (lookup pattern)
 As the user types into a field, she’s given a
dropdown list of possible matches

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

 Known as winnowing, live suggest provides real
time search term suggestions as the user is
typing
Live suggest / autosuggest (lookup
pattern)

Live suggest / autosuggest (lookup
pattern)

 While someone is typing a query, actual live
search results are shown in real time
Live Search

Century21 combines autocomplete, autosuggest,
and live search
Combine

Feedback patterns
 Interactive feedback for non-lookup situations:
− live preview
− progressive disclosure
− progress indicator
− periodic refresh

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

Progress indicators
Provide immediate feedback to let users know that
the system is responding to their action
Favicon turns into progress indicator:

Progress indicators
Ladda button as progress indicator design pattern:

Progress indicators
On-demand, just-in-time at Daily Beast:

Progress indicators
Also an opportunity to imprint branding and ads:

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

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

For more research-based insights
about Homes.com users, check out
the UX insights portal:
http://insights.homes.com
Thoughts? Questions?

Application Design - Part 2

Related slideshows

More Related Content

Application Design - Part 2