Game-inspired RIA design

Jonathan Boutelle CTO, Uzanto Game-inspired RIA design

why games?

reinvent

optimize

old fashioned server HTML sent back Request (from user) Top Popular

new fangled Data sent back server Data + presentation + logic 1 2 Request (from user) Top Popular

mindcanvas slideshare

Reinvent case study: Game-like surveys

Why use Flash / AJAX
Mimic real-world techniques
Design research inherently visual
Get people engaged

Games!

What’s good about games?
Attention control

Attention control
No perceptible wait

Attention control
No perceptible wait
Direct manipulation

Attention control
No perceptible wait
Direct manipulation
Rich graphics

Attention control
No perceptible wait
Direct manipulation
Rich graphics
Fast animations show action-reaction

Attention control
No perceptible wait
Direct manipulation
Rich graphics
Sound

Attention control
No perceptible wait
Direct manipulation
Rich graphics
Sound
Fun-whimsy

Attention control
No perceptible wait
Direct manipulation
Rich graphics
Sound
Fun-whimsy
Screen buildup as tutorial

Game-like design
Pick and choose game-like elements to incorporate:
Attention control
No perceptible wait
Direct manipulation
Fast animations

Flash vs. AJAX for game-like interfaces

Reinvent: Data intensive application

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

our first attempt

layout issues

not-so-direct manipulation

back to the drawing board Drag and Drop to position Edit In place edit Scroll bar links to other “stuff ”

long pages

direct manipulation

swiss army knife design

subtle attention control

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?

animation signals auto-save

traditional component in web-app

integration with off-line workflow

was it worth it?

OPTIMIZE Case study: Slideshare.net

embedding Flash in HTML “harness”

Once a day! rapid public iteration

Data sent back server Data + presentation + logic 1 2 Request (from user) Latency here “looks wrong”. A preloader is needed load time vs. subsequent naviation time

Data sent back server Data + presentation + logic 1 2 Anticipating user request Instant Response! pre-fetching data

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

server Instant Response! *Individual results may vary. UI investments are subject to market risk. Read prospectus carefully before investing. assuming success when saving

server Instant Response! But change not visible to others for 15 minutes pinching pennies: successful caching

crossing borders

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

Flash vs. AJAX

Flash strengths
Vector Graphics
Animation
Multimedia
Sockets
Mature windowing toolkit / IDEs available
Designers comfortable with it

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

AJAX strengths
Feels very “web-native”
Easier to optimize, make “light” while remaining responsive
Large number of open-source toolkits
Developers like it

AJAX weaknesses
Hard to make work in every browser
Can’t do multimedia
Limited to rectangles, simple animations

www.jonathanboutelle.com www.slideshare.net/jboutelle

http://www.slideshare.net	26
http://louberee.wordpress.com	22
http://www.jonathanboutelle.com	13
http://adnxtc.wordpress.com	1
http://static.slidesharecdn.com	1
http://gama.startups.lt	1
http://localhost	1

Game-inspired RIA design

by Jonathan Boutelle on Jan 23, 2007

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 65

Statistics

Game-inspired RIA design — Webinar Transcript