Post on 17-Aug-2014
description
Designing Rich Applications
Theresa NeilUser Experience DesignerAustin,Texas
Background
richness of desktop applications
Rich Internet Applications (RIA)
familiar features of the web+
live save drag and drop slide preview direct editing undo redo drill down immediate feedback dynamic refresh drawing resize collapse
hyperlinks bookmarks tags pop-ups flash animation file upload graphics back button browser CSS single click
search paradigms multi media innovation
Adding an Ajax control to a page does not make a RIA
slideshowaccordion
You Have to Design for Richness at 4 Levels
Application Structure
Screen Layouts
UI Controls
Interactions
catcatcatcat
7.651
3,453
11,281
acombapultepillar
map screen flow directly to users tasks
one-screen-per-goal philosophy
Application Structure
shift away from HTML paging paradigm
eliminate unnecessary navigation
fundamental shift in thinking from hierarchal site maps to choosing a structure that supports a richer experience
People’s goals fall into one of three categories
application patternsthree types
Give me info
I need to complete this task
Let me create...
Information Pattern Process Pattern
Creation PatternFrom Designing For Flex by Rob Adams
application patterninformation
online stores
dashboards
news readers
media players
maps
The right pattern to use when people need to browse, compare, comprehend information (95% of the time)
application patterninformation
sendlink
search
change route
get directions
map
Google Maps
emphasizes visual communication
de-emphasizes navigation and extraneous tasks
and
spokes
hub
spokes
start by displaying the primary contentgive content maximum real estateoffer integrated filters and multiple views
suppress
customize view
acknowledge
save view
eventsdelete
Zenoss Open Source Systems Management
application patterninformationspokes
hub
event details
add commentopen device
zoomgraph
spokes
application patternprocess
product configuration
checkoutfill out forms
The right pattern to use when people need provide information in a structured manner
book travel
set-up/installation
for complex or infrequent workflows
show the steps- provide clear
navigation
let people skip ahead
keep the goal visible
application patternprocesssteps
goalnext step 1 2 3
application patterncreation
illustrate
photo editing
The right pattern to use when people need to create new content or modify existing content
code
document/write
diagram
allocate the most real-estate for the
workspace
utilize contextual tools- show them
only when they are needed
undo and redo are mandatory
application patterncreationcontextual tools
workspace
total control
Screen Layout
1 2 3
Q A
master/ detail column browse search/ results filter dataset
form palette/canvas dashboard spreadsheet
wizard question/ answer parallel panels interactive model
screen patternmaster/detail
master
detail master
top to bottom left to right
detail
screen patterncolumn browse
1
vertical
2 Details 1 2
Details
3 4
horizontal
screen patternsearch/results
simple
complex
search criteria
results
results
search
screen pattern12 Standard Screen Patterns
google12 Standard Screen Patterns
download PDf with 100+ current examples
UI Controls
catcatcatcat
7.651
3,453
11,281
acombapultepillar
auto-suggestcarousel/coverflowcharts/graphscollapsible panelscombobox (advanced)date-picker (advanced)dialogsdockingdrag & drop managerdynamic filter feedback/status
fisheye/spotlightgaugeshelp tipshot keyshover actionhover detailinline editprogress indicatormagnifyratingrecord locator/paginator
slide showsliderscoped searchsparklinestabs (advanced) table/data gridtoolbarvertical browserview toggleWYSIWYG editorzoom/pan
ui controlsframework matrix
DojoJQueryExt JS
FlexSilverlight
MooToolsBackBase
YUIGWT
Laszlo
ZKScriptaculous
Auto Com
plete
Carou
se/
Cover
flow
Chart
s
Collap
sible
Panel
s
Dialog
s
Docki
ng
Drag &
Drop
Dynamic
Filter
ui controls30 Essential Controls
google30 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
single field inline editmulti-field inline edit
overlay editingtable editgroup edit
module configuration
drag & drop modules drag & drop list
drag & drop objectdrag & drop action
drag & drop collection
multi-field inline edit
interactionsmake it direct
single field inline editmulti-field inline edit
overlay editingtable editgroup edit
module configuration
drag & drop modules drag & drop list
drag & drop objectdrag & drop action
drag & drop collectiondrag & drop list
interactionsmake it direct
always-visible toolshover reveal toolstoggle-reveal tools
multi-level toolssecondary menu
interactionskeep it lightweight
multi-level tools
toggle reveal tools
virtual scrollinginline paging
scrolled pagingvirtual panning
zoomable user interface
interactive single-page processinline assistant processdialog overlay processconfigurator process
static single-page process
virtual scrolling
interactionsstay on the page
virtual scrollinginline paging
scrolled pagingvirtual panning
zoomable user interface
interactive single-page processinline assistant processdialog overlay processconfigurator process
static single-page process
interactive single-page process
interactionsstay on the page
call to action invitationtour invitation
hover invitationaffordance invitation
drag and drop invitationinference invitation
more content invitation
interactionsprovide an invitation
drag and drop invitation
call to action invitationtour invitation
hover invitationaffordance invitation
drag and drop invitationinference invitation
more content invitation
interactionsprovide an invitation
tour invitations
brighten/dimexpand/collapse
self-healing fadeanimationspotlight
slide in/slide outfaceplate
flipaccordioncarousel
fadezoom
perceived performance
interactionsuse transitions
animation & accordion
auto-completelive-suggest live search
refining search
live previewprogressive disclosure
progress indicatorperiodic refresh
interactionsreact immediately
live preview
refining search
made it directobject selection pattern
stayed in the pagedialog inlay
virtual scrolling single page process
provides invitationsaffordance invitation
uses transitionsfaceplate
reacts immediatelyrefining search
interactionsrich applications
whitestone cheese
made it directobject selection pattern
keep it lightweighttoggle reveal tools
stayed in the pagetabs
configurator process
provides invitationscall to action invitation
affordance invitation
uses transitionsbrighten/dim
progress indicator
reacts immediatelyrefining search
interactionsrich applications
cray egg
interactions6 Principles
googleDesigning Web Interfaces
www.designingwebinterfaces.
com
Design Challengenavigation nightmare- more than 20 screens
heavy reliance on tabs
multiple dashboards and lots of reports
oceans of buttons
Fundraising Web App Requirements
user
goal
features
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 possible
- 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/tneiluser name:password:
Thank you to Balsamiq
Mockups for providing
their great wire framing
tool for our workshop!
www.balsamiq.com
hub
Spoke
Spoke
redesigninformation application pattern
Spoke
send thank
you notecompose message
update your web
site
see more tips
funds raised
redesigndashboard screen pattern
overviewcall to action
redesigninlay edit
redesignlive 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 Adamshttp://www.adobe.com/devnet/flex/articles/fig_pt1.html