Designing for Flow BRUNO FIGUEIREDO hoppiness
Who am I?
Architect by education as in buildings
Interaction Designer by choice
Leandro’s World Tour & RC Fotos  Between Lisbon and London
Fighting Static PanchoWatkins
Led by the gaming industry
More than enough power b d solis
Ajax helped a lot
blakespot Early adopters will use anything
Matt Stafford Seniors lead growth 15% 2000  2006
Most apps are still static
Mimic real life tools purpleslog
Teleportation is Scary
Nesting doll
Slideshows are not OK
enviziondotnet Stop the Ping Pong
celerrimus Landing on the unknown
Cheo70 Context of the trip is lost
Shadows   fool   you
Natural User Interfaces Microsoft
Abstract Real User   Interfaces Natural User Interface Command Line Flow Applications Graphical User Interface
Time The Problem State 1 State 2 USER SYSTEM Control Selection Action is Performed Data is ready Server fetches data Output
Adding flow gocarts
Patrick J. Lynch Understanding how we work
Mark Erickson 1% of our Retina 100% Visual Acuity The fovea
Like a Flashlight in the Dark  lrargerich
specialkrb How we see
specialkrb How we see
50 miliseconds rcoster
Apple Rapid Serial Visual Presentation
Animating
Change
Movement
Size
You can only see so much SolYoung
Don’t overdo it too much emphasys = no emphasys at all
<ul><li>Enhanced system visibility </li></ul><ul><li>Easier to pinpoint errors </li></ul><ul><li>Easier to complete comple...
Examples of flow mandj98
Sung Sook Shopping Cart
Traditional
Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno ...
Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno ...
Change
Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno ...
Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno ...
Change  + Movement
Quantity: 3 Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno ...
Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno Figueiredo  ...
Bookshelf chotda
Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno Figueiredo  ...
Web Design - Estrutura, Concepção e Produção de sites Web 2ª Edição Actualizada e Aumentada    Author:  Bruno Figueiredo  ...
Change  + Size
Sieve Indigo Goat
Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On   Jane Wilbur Web Design   Bruno Figueiredo PHP Quick Ref...
Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On   Jane Wilbur Web Design   Bruno Figueiredo Illustrator C...
Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On   Jane Wilbur Web Design   Bruno Figueiredo Illustrator C...
Change  + Movement
<ul><li>Map out actions to real examples </li></ul><ul><li>Smooth transitions between states </li></ul><ul><li>Use subtle ...
Questions?
[email_address] Thank you hoppiness All pictures are CC from Flickr and the author’s name is on the lower right
Upcoming SlideShare
Loading in...5
×

Designing For Flow

10,622

Published on

Talk by Bruno Figueiredo at the WEb 2.0 Expo 2008 in Berlin.

Published in: Technology, Business
7 Comments
43 Likes
Statistics
Notes
  • very good presentation; I also attendeted your conference in Berlin
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @ilccp2008: I meant applications must stop throwing the user back and forth between input and reference screens.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • what do u mean of 'the Ping Pong' ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • BELLLA E INTERESANTE PRESENTAZIONE......COMPLIMENTI
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,622
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
111
Comments
7
Likes
43
Embeds 0
No embeds

No notes for slide
  • Good Afternoon. I’m here to give a talk about Designing for Flow.
  • Designing For Flow

    1. 1. Designing for Flow BRUNO FIGUEIREDO hoppiness
    2. 2. Who am I?
    3. 3. Architect by education as in buildings
    4. 4. Interaction Designer by choice
    5. 5. Leandro’s World Tour & RC Fotos Between Lisbon and London
    6. 6. Fighting Static PanchoWatkins
    7. 7. Led by the gaming industry
    8. 8. More than enough power b d solis
    9. 9. Ajax helped a lot
    10. 10. blakespot Early adopters will use anything
    11. 11. Matt Stafford Seniors lead growth 15% 2000 2006
    12. 12. Most apps are still static
    13. 13. Mimic real life tools purpleslog
    14. 14. Teleportation is Scary
    15. 15. Nesting doll
    16. 16. Slideshows are not OK
    17. 17. enviziondotnet Stop the Ping Pong
    18. 18. celerrimus Landing on the unknown
    19. 19. Cheo70 Context of the trip is lost
    20. 20. Shadows fool you
    21. 21. Natural User Interfaces Microsoft
    22. 22. Abstract Real User Interfaces Natural User Interface Command Line Flow Applications Graphical User Interface
    23. 23. Time The Problem State 1 State 2 USER SYSTEM Control Selection Action is Performed Data is ready Server fetches data Output
    24. 24. Adding flow gocarts
    25. 25. Patrick J. Lynch Understanding how we work
    26. 26. Mark Erickson 1% of our Retina 100% Visual Acuity The fovea
    27. 27. Like a Flashlight in the Dark lrargerich
    28. 28. specialkrb How we see
    29. 29. specialkrb How we see
    30. 30. 50 miliseconds rcoster
    31. 31. Apple Rapid Serial Visual Presentation
    32. 32. Animating
    33. 33. Change
    34. 34. Movement
    35. 35. Size
    36. 36. You can only see so much SolYoung
    37. 37. Don’t overdo it too much emphasys = no emphasys at all
    38. 38. <ul><li>Enhanced system visibility </li></ul><ul><li>Easier to pinpoint errors </li></ul><ul><li>Easier to complete complex tasks </li></ul><ul><li>Enhanced findability </li></ul><ul><li>Increased task performance </li></ul><ul><li>Lower frustration levels </li></ul>Benefits
    39. 39. Examples of flow mandj98
    40. 40. Sung Sook Shopping Cart
    41. 41. Traditional
    42. 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. 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. 44. Change
    45. 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. 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. 47. Change + Movement
    48. 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. 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. 50. Bookshelf chotda
    51. 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. 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. 53. Change + Size
    54. 54. Sieve Indigo Goat
    55. 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. 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. 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. 58. Change + Movement
    59. 59. <ul><li>Map out actions to real examples </li></ul><ul><li>Smooth transitions between states </li></ul><ul><li>Use subtle animations </li></ul><ul><li>Stay within view </li></ul><ul><li>Animate with change, movement and size </li></ul><ul><li>One thing at a time </li></ul><ul><li>Don’t overdo it </li></ul>Wrap up
    60. 60. Questions?
    61. 61. [email_address] Thank you hoppiness All pictures are CC from Flickr and the author’s name is on the lower right
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×