gameinspired ria-design-22459

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