Search

Designing For Flow

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.

7 comments

Comments 1 - 7 of 7 previous next Post a comment

  • + leonardobellini Leonardo Bellini 8 months ago
    very good presentation; I also attendeted your conference in Berlin
  • + bruno.figueiredo Bruno Figueiredo 8 months ago
    @ilccp2008: I meant applications must stop throwing the user back and forth between input and reference screens.
  • + ilccp2008 ilccp2008 8 months ago
    what do u mean of 'the Ping Pong' ?
  • + woeldiche Jesper Wøldiche 8 months ago
    I saw the presentation at Web2.0 Expo Europe and liked it a lot. You managed to put forth som persuasive arguments for implementing flow in the design, and put your finger on some key challenges with traditional designs og interactions, that I sensed but couldn't define.

    I was interesting, that you at the same time managed to quite precisely define some of the principles of the iphone's interaction design, that makes it stand out.

    The presentation had a nice blend of theory and concrete examples, that makes us both understand and also go home and implement the principle of flow in our designs.

    Can you recommend any books on this subject - written by you or orthers?
  • + magdalena1948 Pavelescu Magdalena 8 months ago
    BELLLA E INTERESANTE PRESENTAZIONE......COMPLIMENTI
  • + bruno.figueiredo Bruno Figueiredo 8 months ago
    Thanks, Pedro!
  • + pecus Pedro Custódio 8 months ago
    Congratulations, I think the presentation is simply great ;)
    keep the flow going Bruno.
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

Good Afternoon. I’m here to give a talk about Designing for Flow.

38 Favorites, 1 Group & 1 Event

Designing For Flow - Presentation Transcript

  1. Designing for Flow BRUNO FIGUEIREDO hoppiness
  2. Who am I?
  3. Architect by education as in buildings
  4. Interaction Designer by choice
  5. Leandro’s World Tour & RC Fotos Between Lisbon and London
  6. Fighting Static PanchoWatkins
  7. Led by the gaming industry
  8. More than enough power b d solis
  9. Ajax helped a lot
  10. blakespot Early adopters will use anything
  11. Matt Stafford Seniors lead growth 15% 2000 2006
  12. Most apps are still static
  13. Mimic real life tools purpleslog
  14. Teleportation is Scary
  15. Nesting doll
  16. Slideshows are not OK
  17. enviziondotnet Stop the Ping Pong
  18. celerrimus Landing on the unknown
  19. Cheo70 Context of the trip is lost
  20. Shadows fool you
  21. Natural User Interfaces Microsoft
  22. Abstract Real User Interfaces Natural User Interface Command Line Flow Applications Graphical User Interface
  23. Time The Problem State 1 State 2 USER SYSTEM Control Selection Action is Performed Data is ready Server fetches data Output
  24. Adding flow gocarts
  25. Patrick J. Lynch Understanding how we work
  26. Mark Erickson 1% of our Retina 100% Visual Acuity The fovea
  27. Like a Flashlight in the Dark lrargerich
  28. specialkrb How we see
  29. specialkrb How we see
  30. 50 miliseconds rcoster
  31. Apple Rapid Serial Visual Presentation
  32. Animating
  33. Change
  34. Movement
  35. Size
  36. You can only see so much SolYoung
  37. Don’t overdo it too much emphasys = no emphasys at all
    • Enhanced system visibility
    • Easier to pinpoint errors
    • Easier to complete complex tasks
    • Enhanced findability
    • Increased task performance
    • Lower frustration levels
    Benefits
  39. Examples of flow mandj98
  40. Sung Sook Shopping Cart
  41. Traditional
  42. Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Shopping Basket EMPTY Add to Basket
  43. Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Shopping Basket 3 Web Design - Estrutura, Concepção e Produção de sites Web Bruno Figueiredo Price: 75,00 Euros Subtotal: 75,00 Euros Add to Basket
  44. Change
  45. Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Shopping Basket EMPTY Add to Basket
  46. Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Shopping Basket 3 Web Design - Estrutura, Concepção e Produção de sites Web Bruno Figueiredo Price: 75,00 Euros Subtotal: 75,00 Euros Add to Basket
  47. Change + Movement
  48. Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Shopping Basket EMPTY Add to Basket
  49. Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm Price: 25,00 Euros Quantity: 3 Shopping Basket 3 Add to Basket 3 Web Design - Estrutura, Concepção e Produção de sites Web Bruno Figueiredo Price: 75,00 Euros Subtotal: 75,00 Euros
  50. Bookshelf chotda
  51. Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm 3 X
  52. Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada   Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300 Size: 17,0 x 24,0 cm 3 X
  53. Change + Size
  54. Sieve Indigo Goat
  55. Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On Jane Wilbur Web Design Bruno Figueiredo PHP Quick Reference Tom Coates Illustrator CS3 Anna Stevenson ASP.net Quick Reference Joanna Geddes Python Hands-on Brian Thomas Show Only Books: Design
  56. Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On Jane Wilbur Web Design Bruno Figueiredo Illustrator CS3 Anna Stevenson Show Only Books: Design PHP Quick Reference Tom Coates ASP.net Quick Reference Joanna Geddes Python Hands-on Brian Thomas
  57. Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On Jane Wilbur Web Design Bruno Figueiredo Illustrator CS3 Anna Stevenson Show Only Books: Design
  58. Change + Movement
    • Map out actions to real examples
    • Smooth transitions between states
    • Use subtle animations
    • Stay within view
    • Animate with change, movement and size
    • One thing at a time
    • Don’t overdo it
    Wrap up
  60. Questions?
  61. [email_address] Thank you hoppiness All pictures are CC from Flickr and the author’s name is on the lower right

+ Bruno FigueiredoBruno Figueiredo, 8 months ago

custom

6627 views, 38 favs, 17 embeds more stats

Talk by Bruno Figueiredo at the WEb 2.0 Expo 2008 i more

More Info

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Go to text version
  • Total Views 6627
    • 6239 on SlideShare
    • 388 from embeds
  • Comments 7
  • Favorites 38
  • Downloads 7
Most viewed embeds
  • 254 views on http://en.oreilly.com
  • 69 views on http://blog.slideshare.net
  • 28 views on http://www.web2expo.com
  • 15 views on http://www.sternenstaubinsel.net
  • 4 views on http://antonioambrosio.blogspot.com

more

All embeds
  • 254 views on http://en.oreilly.com
  • 69 views on http://blog.slideshare.net
  • 28 views on http://www.web2expo.com
  • 15 views on http://www.sternenstaubinsel.net
  • 4 views on http://antonioambrosio.blogspot.com
  • 3 views on http://www.centrestage.de
  • 2 views on http://www.stardustisland.net
  • 2 views on http://feeds.feedburner.com
  • 2 views on http://blog.contentmanagementconnection.com
  • 2 views on http://www.elsua.net
  • 1 views on http://192.168.10.100
  • 1 views on http://www.slideshare.net
  • 1 views on http://berlinblase.de
  • 1 views on http://www.selbstverstaendlich.de
  • 1 views on http://www.aseantic.com
  • 1 views on http://jisi.dreamblog.jp
  • 1 views on http://mayank.name

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

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

Cancel

Categories

Tags

more

Groups / Events

Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved