Designing Rich
Applications
Theresa Neil
User Experience Designer
Austin,Texas

Background

Rich Internet Applications (RIA)
richness of desktop familiar features of
applications
+ the web
live save drag and drop slide hyperlinks bookmarks tags
preview direct editing undo pop-ups flash animation file
redo drill down immediate upload graphics back button
feedback dynamic refresh browser CSS single click
drawing resize collapse search paradigms multi media
innovation

slideshow
accordion
Adding an Ajax
control to a page
does not make a RIA

You Have to Design for Richness at 4 Levels
Application Structure
Screen Layouts
cat
cat acomb
UI Controls
7.651
cat apult 3,453
cat epillar 11,281
Interactions

Application Structure
fundamental shift in thinking from hierarchal site maps to
choosing a structure that supports a richer experience
shift away from HTML paging map screen flow directly to
paradigm users tasks
eliminate unnecessary one-screen-per-goal
navigation philosophy

application patterns
three types
People’s goals fall into
one of three categories
I need to
complete
this task
Give me
info Let me
create...
Process Pattern
Information Pattern
Creation Pattern
From Designing For Flex by Rob Adams

application pattern
information
maps news readers
online stores
media players dashboards
The right pattern to use when people need to browse,
compare, comprehend information (95% of the time)

application pattern
information
spokes
spokes
search print
link map send
hub get change
directions route
and
Google Maps
emphasizes visual communication
de-emphasizes navigation and extraneous tasks

application pattern
spokes spokes information
acknowledge suppress
delete events
save
view
hub customize
view
zoom
graph event
details
add comment
open device
Zenoss Open Source Systems Management
start by displaying the primary content
give content maximum real estate
offer integrated filters and multiple views

application pattern
process
product configuration set-up/installation
book travel
fill out forms checkout
The right pattern to use when people need
provide information in a structured manner

application pattern
steps process
for complex or
infrequent workflows
show the steps-
provide clear
navigation
let people skip ahead
keep the goal visible
goal
next
step 1 2 3

application pattern
creation
illustrate code
diagram
photo editing document/write
The right pattern to use when people need to
create new content or modify existing content

application pattern
creation
contextual tools total control
allocate the most
real-estate for the
workspace
utilize contextual
tools- show them
only when they are
needed
undo and redo are
mandatory
workspace

Screen Layout
master/ detail column browse search/ results filter dataset
form palette/canvas dashboard spreadsheet
1 2 3
Q A
wizard question/ answer parallel panels interactive
model

screen pattern
master/detail
top to bottom master left to right
detail master detail

screen pattern
column browse
1 2 Details 1 2 3 4
Details
vertical horizontal

screen pattern
search/results
search
search
criteria
simple
results
complex
results

screen pattern
12 Standard Screen Patterns
google
12 Standard Screen Patterns
download PDf with 100+
current examples

UI Controls
auto-suggest fisheye/spotlight slide show
carousel/coverflow gauges slider
charts/graphs help tips scoped search
collapsible panels hot keys sparklines
combobox (advanced) hover action tabs (advanced)
date-picker (advanced) hover detail table/data grid
dialogs inline edit toolbar
docking progress indicator vertical browser
drag & drop manager magnify view toggle
dynamic filter rating WYSIWYG editor
feedback/status record locator/paginator zoom/pan
cat
cat acomb 7.651
cat apult 3,453
cat epillar 11,281

ui controls
te
framework matrix
le /
p se w op
om ou flo s ble s g Dr ic
C r r t si el g s n
a e ar llap an lo ki & am ter
u to C v
o h o P ia oc ag yn il
A C C C D D Dr D F
Dojo
JQuery
Ext JS
YUI
GWT
MooTools
BackBase
ZK
Scriptaculous
Laszlo
Flex
Silverlight

ui controls
30 Essential Controls
google
30 Essential Controls
many examples from live
applications

Interactions
#1 Make It Direct
#2 Keep It Lightweight
#3 Stay In the Page
#4 Provide An Invitation
#5 Use Transitions
#6 React Immediately

interactions
make it direct
single field inline edit
multi-field inline edit
overlay editing
table edit
group edit
module configuration
drag & drop modules
drag & drop list
multi-field inline edit
drag & drop object
drag & drop action
drag & drop collection

interactions
make it direct
single field inline edit
multi-field inline edit
overlay editing
table edit
group edit
module configuration
drag & drop modules
drag & drop list
drag & drop object
drag & drop action
drag & drop list drag & drop collection

interactions
keep it lightweight
always-visible tools
hover reveal tools
toggle-reveal tools
multi-level tools
toggle reveal tools secondary menu
multi-level tools

interactions
stay on the page
virtual scrolling
inline paging
scrolled paging
virtual panning
zoomable user interface
interactive single-page process
inline assistant process
virtual scrolling
dialog overlay process
configurator process
static single-page
process

interactions
stay on the page
virtual scrolling
inline paging
scrolled paging
virtual panning
zoomable user interface
interactive single-page process
inline assistant process
dialog overlay process
configurator process
static single-page
process
interactive single-page process

interactions
provide an invitation
call to action invitation
tour invitation
hover invitation
affordance invitation
drag and drop invitation
inference invitation
more content invitation
drag and drop invitation

interactions
provide an invitation
call to action invitation
tour invitation
hover invitation
affordance invitation
drag and drop invitation
inference invitation
more content invitation
tour invitations

interactions
use transitions
brighten/dim
expand/collapse
self-healing fade
animation
spotlight
slide in/slide out
faceplate
flip
accordion
carousel
fade
animation & accordion
zoom
perceived performance

interactions
react immediately
auto-complete
live-suggest
live search
refining search
live preview
progressive disclosure
progress indicator
periodic refresh
live preview
refining search

interactions
rich applications
made it direct
object selection pattern
stayed in the page
dialog inlay
virtual scrolling
single page process
provides invitations
affordance invitation
uses transitions
faceplate
reacts immediately
refining search
whitestone cheese

interactions
rich applications
made it direct
object selection pattern
keep it lightweight
toggle reveal tools
stayed in the page
tabs
configurator process
provides invitations
call to action invitation
affordance invitation
uses transitions
brighten/dim
progress indicator
reacts immediately
cray egg refining search

interactions
6 Principles
google
Designing Web Interfaces
www.
designingwebinterfaces.
com

Design Challenge
navigation nightmare-
more than 20 screens
heavy reliance on tabs
multiple dashboards and
lots of reports
oceans of buttons

Fundraising Web App Requirements
user signed up to train for a marathon and raise 5K
~41 years old, mostly women, first time doing this
raise money online with as little time and effort as
goal
possible
features - tracks money earned to date (online and offline)
- provides email templates for fundraising letters
- tracks emails send and who has donated or not
- list of fundraising tips and best practices
- provides a way to create and update a personalized
training web site

Time To Sketch Up Some Designs
go to: http://www.bmockups.com/tneil
k you to Balsamiq
Than
user name:
M ockups for providing
password:
great wire framing
their
l for our w orkshop!
too
www.bal samiq.com

redesign
information application pattern
Spoke
send
compose thank
message you note
hub funds
raised
see more update
tips your web
site
Spoke
Spoke

redesign
dashboard screen pattern
overview
call to
action

redesign
inlay edit

redesign
live preview/ WYSIWYG editor

More Resources
“About Face 3: The Essentials of Interaction Design”
Alan Cooper, Robert Reimann, David Cronin 2007
“Designing Web Interfaces: Principles and Patterns for Rich Interactions”
Bill Scott and Theresa Neil, O’Reilly Press 2009
“Designing Interfaces: Patterns for Effective Interface Design”
Jenifer Tidwell, O’Reilly Press 2006
“The Design of Everyday Things”
Donald Norman 2002
“The Designers Guide to Web Applications, Part 1”
Hagan Rivers, Two Rivers Consulting
“Web Form Design: Filling in the Blank”
Luke Wroblewski, Rosenfeld Media 2008
Designing For Flex by Rob Adams
http://www.adobe.com/devnet/flex/articles/fig_pt1.html