This presentation was given on Aug. 6, 2009 at DELVE NYC- a 2 Day Masterclass on Designing User Interfaces.
This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.
This presentation also addresses structuring your application for richness, using standard screen patterns, and selecting the best UI controls.
http://designingwebinterfaces.com
http://www.theresaneil.com
http://looksgoodworkswell.com
3. 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
4. slideshow
accordion
Adding an Ajax
control to a page
does not make a RIA
5. 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
6. 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
7. 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
8. 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)
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. screen pattern
master/detail
top to bottom master left to right
detail master detail
21. 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
22. ui controls
30 Essential Controls
google
30 Essential Controls
many examples from live
applications
23. Interactions
#1 Make It Direct
#2 Keep It Lightweight
#3 Stay In the Page
#4 Provide An Invitation
#5 Use Transitions
#6 React Immediately
24. 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
25. 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
27. 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
28. 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
29. 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
30. 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
32. interactions
react immediately
auto-complete
live-suggest
live search
refining search
live preview
progressive disclosure
progress indicator
periodic refresh
live preview
refining search
33. 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
34. 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
35. interactions
6 Principles
google
Designing Web Interfaces
www.
designingwebinterfaces.
com
36. Design Challenge
navigation nightmare-
more than 20 screens
heavy reliance on tabs
multiple dashboards and
lots of reports
oceans of buttons
37. 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
38. 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
39. redesign
information application pattern
Spoke
send
compose thank
message you note
hub funds
raised
see more update
tips your web
site
Spoke
Spoke
40. redesign
dashboard screen pattern
overview
call to
action
43. 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