gameinspired ria-design-22459
TRANSCRIPT
![Page 1: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/1.jpg)
Game-inspired RIA design
Jonathan Boutelle CTO, Uzanto
![Page 2: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/2.jpg)
2
why games?
![Page 3: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/3.jpg)
3
reinvent
![Page 4: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/4.jpg)
4
optimize
![Page 5: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/5.jpg)
5
old fashioned
server
HTML sent back
Request (from user)
Top
Popular
![Page 6: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/6.jpg)
6
new fangled
Data sent back
server
Data + presentation + logic
1
2Request (from user)
Top
Popular
![Page 7: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/7.jpg)
7
mindcanvas
slideshare
![Page 8: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/8.jpg)
8
Reinvent case study: Game-like surveys
![Page 9: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/9.jpg)
9
![Page 10: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/10.jpg)
10
![Page 11: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/11.jpg)
11
Why use Flash / AJAX
Mimic real-world techniques Design research inherently visual Get people engaged
![Page 12: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/12.jpg)
12
Games!
![Page 13: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/13.jpg)
13
What’s good about games?
Attention control
![Page 14: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/14.jpg)
14
What’s good about games?
Attention control No perceptible wait
![Page 15: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/15.jpg)
15
What’s good about games?
Attention control No perceptible wait Direct manipulation
![Page 16: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/16.jpg)
16
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics
![Page 17: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/17.jpg)
17
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction
![Page 18: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/18.jpg)
18
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction Sound
![Page 19: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/19.jpg)
19
What’s good about games?
Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show
action-reaction Sound Fun-whimsy
![Page 20: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/20.jpg)
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
![Page 21: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/21.jpg)
21
Game-like design
Pick and choose game-like elements to incorporate: Attention control No perceptible wait Direct manipulation Fast animations
![Page 22: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/22.jpg)
22
Flash vs. AJAX for game-like interfaces
![Page 23: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/23.jpg)
23
Reinvent: Data intensive application
![Page 24: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/24.jpg)
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
![Page 25: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/25.jpg)
25
our first attempt
![Page 26: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/26.jpg)
26
layout issues
![Page 27: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/27.jpg)
27
not-so-direct manipulation
![Page 28: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/28.jpg)
28
back to the drawing board
Drag and Drop to position
Edit Inplace
edit
Scroll bar
links to other “stuff”
![Page 29: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/29.jpg)
29
long pages
![Page 30: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/30.jpg)
30
direct manipulation
![Page 31: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/31.jpg)
31
swiss army knife design
![Page 32: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/32.jpg)
32
subtle attention control
![Page 33: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/33.jpg)
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?
![Page 34: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/34.jpg)
34
animation signals auto-save
![Page 35: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/35.jpg)
35
traditional component in web-app
![Page 36: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/36.jpg)
36
integration with off-line workflow
![Page 37: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/37.jpg)
37
was it worth it?
![Page 38: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/38.jpg)
38
OPTIMIZE Case study: Slideshare.net
![Page 39: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/39.jpg)
39
embedding Flash in HTML “harness”
![Page 40: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/40.jpg)
40
Once a day!
rapid public iteration
![Page 41: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/41.jpg)
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
![Page 42: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/42.jpg)
42
Data sent backserver
Data + presentation + logic1
2Anticipating user request
Instant Response!
pre-fetching data
![Page 43: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/43.jpg)
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
![Page 44: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/44.jpg)
44
server
Instant Response!
*Individual results may vary. UIinvestments are subject to market risk. Read prospectus carefully before investing.
assuming success when saving
![Page 45: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/45.jpg)
45
server
Instant Response!
But change not visible to others for 15 minutes
pinching pennies: successful caching
![Page 46: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/46.jpg)
46
crossing borders
![Page 47: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/47.jpg)
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
![Page 48: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/48.jpg)
48
Flash vs. AJAX
![Page 49: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/49.jpg)
49
Flash strengths
Vector Graphics Animation Multimedia Sockets Mature windowing toolkit / IDEs available Designers comfortable with it
![Page 50: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/50.jpg)
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
![Page 51: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/51.jpg)
51
AJAX strengths
Feels very “web-native” Easier to optimize, make “light” while
remaining responsive Large number of open-source toolkits Developers like it
![Page 52: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/52.jpg)
52
AJAX weaknesses
Hard to make work in every browser Can’t do multimedia Limited to rectangles, simple animations
![Page 53: Gameinspired ria-design-22459](https://reader033.vdocuments.net/reader033/viewer/2022052910/559af9281a28ab87458b479f/html5/thumbnails/53.jpg)
53
www.jonathanboutelle.comwww.slideshare.net/jboutelle