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

Mimic real-world techniques

Design research inherently visual

Get people engaged

Games!

What’s good about games? Attention control

Attention control

What’s good about games? Attention control No perceptible wait

Attention control

No perceptible wait

What’s good about games? Attention control No perceptible wait Direct manipulation

Attention control

No perceptible wait

Direct manipulation

What’s good about games? Attention control No perceptible wait Direct manipulation Rich graphics

Attention control

No perceptible wait

Direct manipulation

Rich graphics

What’s good about games? Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show action-reaction

Attention control

No perceptible wait

Direct manipulation

Rich graphics

Fast animations show action-reaction

What’s good about games? Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show action-reaction Sound

Attention control

No perceptible wait

Direct manipulation

Rich graphics

Fast animations show action-reaction

Sound

What’s good about games? Attention control No perceptible wait Direct manipulation Rich graphics Fast animations show action-reaction Sound Fun-whimsy

Attention control

No perceptible wait

Direct manipulation

Rich graphics

Fast animations show action-reaction

Sound

Fun-whimsy

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

Attention control

No perceptible wait

Direct manipulation

Rich graphics

Fast animations show action-reaction

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

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

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

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

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

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

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

Hard to make work in every browser

Can’t do multimedia

Limited to rectangles, simple animations

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