Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 <ul><li>Mimic real-world techniques </li></ul><ul><li>Design research inherently visual </li></ul><ul...
Games!
What’s good about games? <ul><li>Attention control </li></ul>
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul>
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipula...
Game-like design <ul><li>Pick and choose game-like elements to incorporate: </li></ul><ul><ul><li>Attention control </li><...
Flash vs. AJAX  for game-like interfaces
Reinvent:  Data intensive application
Latency sucks! <ul><li>Click > Wait costs hours of time </li></ul><ul><ul><li>Latency causes users to get distracted, lose...
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 th...
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...
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: Use...
server Instant Response! *Individual results may vary. UI investments are subject to market risk. Read prospectus carefull...
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  <ul><li>Showing/hiding divs </li></ul><ul><li>Edit in place </li></ul><ul><li>Tabbed ...
Flash vs. AJAX
Flash strengths <ul><li>Vector Graphics </li></ul><ul><li>Animation </li></ul><ul><li>Multimedia </li></ul><ul><li>Sockets...
Flash weaknesses <ul><li>Harder to find engineers </li></ul><ul><li>Longer development times </li></ul><ul><li>Heavier (on...
AJAX strengths <ul><li>Feels very “web-native” </li></ul><ul><li>Easier to optimize, make “light” while remaining responsi...
AJAX weaknesses <ul><li>Hard to make work in every browser </li></ul><ul><li>Can’t do multimedia </li></ul><ul><li>Limited...
www.jonathanboutelle.com www.slideshare.net/jboutelle
Upcoming SlideShare
Loading in …5
×

Gameinspired ria-design-22459

1,100 views

Published on

Published in: Technology, Design

Gameinspired ria-design-22459

  1. 1. Jonathan Boutelle CTO, Uzanto Game-inspired RIA design
  2. 2. why games?
  3. 3. reinvent
  4. 4. optimize
  5. 5. old fashioned server HTML sent back Request (from user) Top Popular
  6. 6. new fangled Data sent back server Data + presentation + logic 1 2 Request (from user) Top Popular
  7. 7. mindcanvas slideshare
  8. 8. Reinvent case study: Game-like surveys
  9. 11. Why use Flash / AJAX <ul><li>Mimic real-world techniques </li></ul><ul><li>Design research inherently visual </li></ul><ul><li>Get people engaged </li></ul>
  10. 12. Games!
  11. 13. What’s good about games? <ul><li>Attention control </li></ul>
  12. 14. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul>
  13. 15. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul>
  14. 16. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Rich graphics </li></ul>
  15. 17. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Rich graphics </li></ul><ul><li>Fast animations show action-reaction </li></ul>
  16. 18. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Rich graphics </li></ul><ul><li>Fast animations show action-reaction </li></ul><ul><li>Sound </li></ul>
  17. 19. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Rich graphics </li></ul><ul><li>Fast animations show action-reaction </li></ul><ul><li>Sound </li></ul><ul><li>Fun-whimsy </li></ul>
  18. 20. What’s good about games? <ul><li>Attention control </li></ul><ul><li>No perceptible wait </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Rich graphics </li></ul><ul><li>Fast animations show action-reaction </li></ul><ul><li>Sound </li></ul><ul><li>Fun-whimsy </li></ul><ul><li>Screen buildup as tutorial </li></ul>
  19. 21. Game-like design <ul><li>Pick and choose game-like elements to incorporate: </li></ul><ul><ul><li>Attention control </li></ul></ul><ul><ul><li>No perceptible wait </li></ul></ul><ul><ul><li>Direct manipulation </li></ul></ul><ul><ul><li>Fast animations </li></ul></ul>
  20. 22. Flash vs. AJAX for game-like interfaces
  21. 23. Reinvent: Data intensive application
  22. 24. Latency sucks! <ul><li>Click > Wait costs hours of time </li></ul><ul><ul><li>Latency causes users to get distracted, loses “flow” </li></ul></ul><ul><li>People are picky about their research </li></ul><ul><ul><li>Spend hours creating/refining studies </li></ul></ul><ul><ul><li>Potential to make a big difference </li></ul></ul>
  23. 25. our first attempt
  24. 26. layout issues
  25. 27. not-so-direct manipulation
  26. 28. back to the drawing board Drag and Drop to position Edit In place edit Scroll bar links to other “stuff ”
  27. 29. long pages
  28. 30. direct manipulation
  29. 31. swiss army knife design
  30. 32. subtle attention control
  31. 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?
  32. 34. animation signals auto-save
  33. 35. traditional component in web-app
  34. 36. integration with off-line workflow
  35. 37. was it worth it?
  36. 38. OPTIMIZE Case study: Slideshare.net
  37. 39. embedding Flash in HTML “harness”
  38. 40. Once a day! rapid public iteration
  39. 41. 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
  40. 42. Data sent back server Data + presentation + logic 1 2 Anticipating user request Instant Response! pre-fetching data
  41. 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
  42. 44. server Instant Response! *Individual results may vary. UI investments are subject to market risk. Read prospectus carefully before investing. assuming success when saving
  43. 45. server Instant Response! But change not visible to others for 15 minutes pinching pennies: successful caching
  44. 46. crossing borders
  45. 47. Cheap hacks that make for better UX <ul><li>Showing/hiding divs </li></ul><ul><li>Edit in place </li></ul><ul><li>Tabbed view of top / related content </li></ul><ul><li>Yellow fade when an element has been edited </li></ul>
  46. 48. Flash vs. AJAX
  47. 49. Flash strengths <ul><li>Vector Graphics </li></ul><ul><li>Animation </li></ul><ul><li>Multimedia </li></ul><ul><li>Sockets </li></ul><ul><li>Mature windowing toolkit / IDEs available </li></ul><ul><li>Designers comfortable with it </li></ul>
  48. 50. Flash weaknesses <ul><li>Harder to find engineers </li></ul><ul><li>Longer development times </li></ul><ul><li>Heavier (on average) </li></ul><ul><li>Text Issues </li></ul><ul><li>Not perceived as “Web native” </li></ul><ul><li>Harder to do layouts that efficiently use screen </li></ul>
  49. 51. AJAX strengths <ul><li>Feels very “web-native” </li></ul><ul><li>Easier to optimize, make “light” while remaining responsive </li></ul><ul><li>Large number of open-source toolkits </li></ul><ul><li>Developers like it </li></ul>
  50. 52. AJAX weaknesses <ul><li>Hard to make work in every browser </li></ul><ul><li>Can’t do multimedia </li></ul><ul><li>Limited to rectangles, simple animations </li></ul>
  51. 53. www.jonathanboutelle.com www.slideshare.net/jboutelle

×