Game-inspired RIA design Jonathan Boutelle CTO, Uzanto
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Game-inspired RIA design
Jonathan Boutelle CTO, Uzanto
2
why games?
3
reinvent
4
optimize
5
old fashioned
server
HTML sent back
Request (from user)
Top
Popular
6
new fangled
Data sent back
server
Data + presentation + logic
1
2Request (from user)
Top
Popular
7
mindcanvas
slideshare
8
Reinvent case study: Game-like surveys
9
10
11
Why use Flash / AJAX
Mimic real-world techniques Design research inherently visual Get people engaged
12
Games!
13
What’s good about games?
Attention control
14
What’s good about games?
Attention control No perceptible wait
15
What’s good about games?
Attention control No perceptible wait Direct manipulation
16
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics
17
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction
18
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction Sound
19
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction Sound Fun-whimsy
20
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction Sound Fun-whimsy Screen buildup as tutorial
21
Game-like design
Pick and choose game-like elements to incorporate: Attention control No perceptible wait Direct manipulation Fast animations
22
Flash vs. AJAX for game-like interfaces
23
Reinvent: Data intensive application
24
Latency sucks!
Click > Wait costs hours of time Latency causes users to get distracted, loses “flow”
People are picky about their research Spend hours creating/refining studies Potential to make a big difference
25
our first attempt
26
layout issues
27
not-so-direct manipulation
28
back to the drawing board
Drag and Drop to position
Edit Inplace
edit
Scroll bar
links to other “stuff”
29
long pages
30
direct manipulation
31
swiss army knife design
32
subtle attention control
33
Web 1.0 Page 1
Navigate (and Save !)
Page 2
Rich Web ?
Local copy ( in RAM )
<Control + S>Saves to disk
Desktop
should there be a “save” button?
34
animation signals auto-save
35
traditional component in web-app
36
integration with off-line workflow
37
was it worth it?
38
OPTIMIZE Case study: Slideshare.net
39
embedding Flash in HTML “harness”
40
Once a day!
rapid public iteration
41
Data sent back
server
Data + presentation + logic1
2Request (from user)
Latency here “looks wrong”. A preloader is needed
load time vs. subsequent naviation time
42
Data sent backserver
Data + presentation + logic1
2Anticipating user request
Instant Response!
pre-fetching data
43
At this point, download all remaining slides
Naive model
>Insight: Most users start at front of slideshows.>Insight: Users pause, then hit advance several times in rapid succession
>Insight: Users that cross the 10 slide mark tend to finish a presentation>Insight: Bandwidth costs are under control
Iteration 1
Iteration 3
1
2
3…
evolution of slide-loading predictive model
44
server
Instant Response!
*Individual results may vary. UIinvestments are subject to market risk. Read prospectus carefully before investing.
assuming success when saving
45
server
Instant Response!
But change not visible to others for 15 minutes
pinching pennies: successful caching
46
crossing borders
47
Cheap hacks that make for better UX
Showing/hiding divs Edit in place Tabbed view of top / related content Yellow fade when an element has been
edited
48
Flash vs. AJAX
49
Flash strengths
Vector Graphics Animation Multimedia Sockets Mature windowing toolkit / IDEs available Designers comfortable with it
50
Flash weaknesses
Harder to find engineers Longer development times Heavier (on average) Text Issues Not perceived as “Web native” Harder to do layouts that efficiently use
screen
51
AJAX strengths
Feels very “web-native” Easier to optimize, make “light” while
remaining responsive Large number of open-source toolkits Developers like it
52
AJAX weaknesses
Hard to make work in every browser Can’t do multimedia Limited to rectangles, simple animations
53
www.jonathanboutelle.comwww.slideshare.net/jboutelle
Related Documents
