Search

Game-inspired RIA design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

6 comments

Comments 1 - 6 of 6 previous next Post a comment

  • + theagonizer theagonizer 2 weeks ago
    Rock on I learned so much from this article years ago that it helped a ton while working on a massively multi-player game in the browser. I also wrote an article here on my experience http://www.actionscript-flash-guru.com/blog/11-user-interface-design-for-the-internet
  • + jboutelle Jonathan Boutelle 3 years ago
    The old way of developing web apps. Call and response. Nice. But SLOW (click, wait, display. click, wait, display).
  • + jboutelle Jonathan Boutelle 3 years ago
    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 Jonathan Boutelle 3 years ago
    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 Jonathan Boutelle 3 years ago
    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 Jonathan Boutelle 3 years ago
    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.
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

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 Flash and AJAX allow to do two things. 1) Reinvent mature web applications, and 2) Make dramatic improvements to existing web applications about Rich Client technologies like Flash and AJAX, and how to use them to create great web experiences. I want to avoid giving blanket recommendations about how things should be built. Design is really contextual: approaches that work for one application often aren’t suitable for other kinds of applications. What I will talk about is the experiences we’ve had, both positive and negative, developing rich internet applications, and how these experiences have shaped the way we think about design. I will also talk about lessons we have learned and about the mistakes we have made. Beyond principles: our experiences with RIA design and development How to think like an RIA designer

25 Favorites & 1 Group

Game-inspired RIA design - Presentation Transcript

  1. Jonathan Boutelle CTO, Uzanto Game-inspired RIA design
  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 2 Request (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 In place 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 + logic 1 2 Request (from user) Latency here “looks wrong”. A preloader is needed load time vs. subsequent naviation time
  42. Data sent back server Data + presentation + logic 1 2 Anticipating 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. UI investments 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.com www.slideshare.net/jboutelle

+ Jonathan BoutelleJonathan Boutelle, 3 years ago

custom

11102 views, 25 favs, 3 embeds more stats

A talk given at the UIE webapp summit on January 23 more

More info about this document

CC Attribution License

Go to text version

  • Total Views 11102
    • 11077 on SlideShare
    • 25 from embeds
  • Comments 6
  • Favorites 25
  • Downloads 38
Most viewed embeds
  • 13 views on http://www.jonathanboutelle.com
  • 11 views on http://louberee.wordpress.com
  • 1 views on http://adnxtc.wordpress.com

more

All embeds
  • 13 views on http://www.jonathanboutelle.com
  • 11 views on http://louberee.wordpress.com
  • 1 views on http://adnxtc.wordpress.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

more

Groups / Events

Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved