Quick Upload

Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
 
Post to Twitter Post to Twitter
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons
« Prev Comments 1 - 5 of 5 Next »
  • jboutelle
    jboutelle said 2 years Edit Delete

    The old way of developing web apps. Call and response. Nice. But SLOW (click, wait, display. click, wait, display).

  • jboutelle
    jboutelle said 2 years Edit Delete

    The other place where rich client technologies fit in is in making “regular” web applications more responsive, intuitive, and easier to use. If there’s a particular interaction that is very common or very important to your business, you can optimize that flow.

    The nice thing about using this approach is a lot of times there are simple improvements that can make an application MUCH easier to use. This means that a lot of times the ROI for making these kinds of improvements will be very high. A simple example of this would be a shopping cart that uses AJAX to update shipping prices when the zip code is entered. A more complex example would be making a social app more responsive by using AJAX in critical places.

  • jboutelle
    jboutelle said 2 years Edit Delete

    1) It’s what we used as inspiration, and it seemed to work.
    2) Games seem to captivate people, they get addicted, they play them for hours. They must be doing something right.

  • jboutelle
    jboutelle said 2 years Edit Delete

    When I think about how to use Flash and AJAX, one dimension that comes to mind is the difference between using it to reinvent a product category, and using it to optimize an existing product.

    One of the big opportunities that these technologies give us is the chance to reinvent quote mature unquote product categories. For example, web based email was considered pretty much done when Google released gmail.

    This opportunity exists because for the longest time, web developers had a very limited idea of what was possible on the web. We were all caught in this request-wait-response model. Now we all know that you can make web applications really dynamic and rich, pretty much anything that’s been done up until now has the potential to be redone better.

  • jboutelle
    jboutelle said 2 years Edit Delete

    Hey everybody!

    My name is Jon Boutelle. I’m the CTO of Uzanto. Today I’m going to be talking a really simple idea. I’m going to be talking about
    How online casual games can be a design inspiration for rich internet applications.

Add a comment If you have a SlideShare account, login to comment; otherwise comment as a guest.
    SlideShare is now available on LinkedIn. Add it to your LinkedIn profile.

    Game-inspired RIA design

    From jboutelle, 2 years ago Add as contact

    A talk given at the UIE webapp summit on January 23, 2007

    7687 views | 5 comments | 22 favorites | 5 downloads | 3 embeds (Stats)

    Categories

    Technology

    Tags

    Groups/Events

    Embed in your blog options close
    Embed (wordpress.com) Exclude related slideshows Embed in your blog

    More Info

    This slideshow is Public
    CC Attribution License
    Total Views: 7687 on Slideshare: 7662 from embeds: 25
    Most viewed embeds (Top 5): More
    Flagged as inappropriate Flag as inappropriate

    Flag as inappropriate

    Select your reason for flagging this slideshow as inappropriate.

    If needed, use the feedback form to let us know more details.

    Slideshow Transcript

    1. Slide 1: Game-inspired RIA design Jonathan Boutelle CTO, Uzanto
    2. Slide 2: why games? 2
    3. Slide 3: reinvent 3
    4. Slide 4: optimize 4
    5. Slide 5: Top Request (from user) server Popular HTML sent back old fashioned 5
    6. Slide 6: 1 Data + presentation + logic Top 2 Request (from user) server Data sent back Popular new fangled 6
    7. Slide 7: mindcanvas slideshare 7
    8. Slide 8: Reinvent case study: Game-like surveys 8
    9. Slide 9: 9
    10. Slide 10: 10
    11. Slide 11: Why use Flash / AJAX  Mimic real-world techniques  Design research inherently visual  Get people engaged 11
    12. Slide 12: Games! 12
    13. Slide 13: What’s good about games?  Attention control 13
    14. Slide 14: What’s good about games?  Attention control  No perceptible wait 14
    15. Slide 15: What’s good about games?  Attention control  No perceptible wait  Direct manipulation 15
    16. Slide 16: What’s good about games?  Attention control  No perceptible wait  Direct manipulation  Rich graphics 16
    17. Slide 17: What’s good about games?  Attention control  No perceptible wait  Direct manipulation  Rich graphics  Fast animations show action-reaction 17
    18. Slide 18: What’s good about games?  Attention control  No perceptible wait  Direct manipulation  Rich graphics  Fast animations show action-reaction  Sound 18
    19. Slide 19: What’s good about games?  Attention control  No perceptible wait  Direct manipulation  Rich graphics  Fast animations show action-reaction  Sound  Fun-whimsy 19
    20. Slide 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 20
    21. Slide 21: Game-like design  Pick and choose game-like elements to incorporate:  Attention control  No perceptible wait  Direct manipulation  Fast animations 21
    22. Slide 22: Flash vs. AJAX for game-like interfaces 22
    23. Slide 23: Reinvent: Data intensive application 23
    24. Slide 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 24
    25. Slide 25: our first attempt 25
    26. Slide 26: layout issues 26
    27. Slide 27: not-so-direct manipulation 27
    28. Slide 28: Drag and Drop to position Scroll bar Edit In place edit links to other “stuff” back to the drawing board 28
    29. Slide 29: long pages 29
    30. Slide 30: direct manipulation 30
    31. Slide 31: swiss army knife design 31
    32. Slide 32: subtle attention control 32
    33. Slide 33: Local copy Desktop ( in RAM ) Saves to disk <Control + S> Web 1.0 Page 1 Navigate (and Save !) Page 2 Rich Web ? should there be a “save” button? 33
    34. Slide 34: animation signals auto-save 34
    35. Slide 35: traditional component in web-app 35
    36. Slide 36: integration with off-line workflow 36
    37. Slide 37: was it worth it? 37
    38. Slide 38: OPTIMIZE Case study: Slideshare.net 38
    39. Slide 39: embedding Flash in HTML “harness” 39
    40. Slide 40: Once a day! rapid public iteration 40
    41. Slide 41: 1 Data + presentation + logic 2 Request (from user) server Data sent back Latency here “look wrong”. A preloader is needed load time vs. subsequent naviation time 41
    42. Slide 42: 1 Data + presentation + logic 2 Anticipating user request Data sent back server Instant Response! pre-fetching data 42
    43. Slide 43: Naive model 1 >Insight: Most users start at front of slideshows. >Insight: Users pause, then hit advance several times in rapid succession Iteration 1 2 >Insight: Users that cross the 10 slide mark tend to finish a presentation >Insight: Bandwidth costs are under control 3 Iteration 3 … At this point, download all remaining slides evolution of slide-loading predictive model 43
    44. Slide 44: *Individual results may vary. UI investments are subject to market risk. Read prospectus carefully before investing. server Instant Response! assuming success when saving 44
    45. Slide 45: But change not visible to server others for 15 minutes Instant Response! pinching pennies: successful caching 45
    46. Slide 46: crossing borders 46
    47. Slide 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 47
    48. Slide 48: Flash vs. AJAX 48
    49. Slide 49: Flash strengths  Vector Graphics  Animation  Multimedia  Sockets  Mature windowing toolkit / IDEs available  Designers comfortable with it 49
    50. Slide 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 50
    51. Slide 51: AJAX strengths  Feels very “web-native”  Easier to optimize, make “light” while remaining responsive  Large number of open-source toolkits  Developers like it 51
    52. Slide 52: AJAX weaknesses  Hard to make work in every browser  Can’t do multimedia  Limited to rectangles, simple animations 52
    53. Slide 53: www.jonathanboutelle.com www.slideshare.net/jboutelle 53

    Feed RSS

    What's new?

    © 2008 SlideShare Inc. All Rights Reserved