Designing Rich Applications - Theresa Neil
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.88 MB, 43 trang )
Designing Rich
Applications
Theresa Neil
User Experience Designer
Austin,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
slideshow
accordion
You Have to Design for Richness at 4 Levels
Application Structure
Screen Layouts
UI Controls
Interactions
cat
cat
cat
cat
7.651
3,453
11,281
acomb
apult
epillar
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 patterns
three types
Give me
info
I need to
complete
this task
Let me
create
Information Pattern
Process Pattern
Creation Pattern
From Designing For Flex by Rob Adams
application pattern
information
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 pattern
information
send
link
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 content
give content maximum real estate
offer integrated filters and multiple views
suppress
customize
view
acknowledge
save
view
events
delete
Zenoss Open Source Systems Management
application pattern
information
spokes
hub
event
details
add comment
open device
zoom
graph
spokes
application pattern
process
product configuration
checkout
fill 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 pattern
process
steps
goal
next
step 1 2 3
application pattern
creation
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 pattern
creation
contextual 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 pattern
master/detail
master
detail
master
top to bottom
left to right
detail
screen pattern
column browse
1
vertical
2 Details
1 2
Details
3
4
horizontal
screen pattern
search/results
simple
complex
search
criteria
results
results
search
screen pattern
12 Standard Screen Patterns
12 Standard Screen Patterns
download PDf with 100+
current examples
UI Controls
cat
cat
cat
cat
7.651
3,453
11,281
acomb
apult
epillar
auto-suggest
carousel/coverflow
charts/graphs
collapsible panels
combobox (advanced)
date-picker (advanced)
dialogs
docking
drag & drop manager
dynamic filter
feedback/status
fisheye/spotlight
gauges
help tips
hot keys
hover action
hover detail
inline edit
progress indicator
magnify
rating
record locator/paginator
slide show
slider
scoped search
sparklines
tabs (advanced)
table/data grid
toolbar
vertical browser
view toggle
WYSIWYG editor
zoom/pan
ui controls
framework matrix
Dojo
JQuery
Ext JS
Flex
Silverlight
MooTools
BackBase
YUI
GWT
Laszlo
ZK
Scriptaculous
Auto Complete
Carouse/
Coverflow
Charts
Collapsible
Panels
Dialogs
Docking
Drag & Drop
Dynamic
Filter
ui controls
30 Essential Controls
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
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 collection
multi-field inline edit
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 collection
drag & drop list
interactions
make it direct
