• Like
Designing For Flow
Upcoming SlideShare
Loading in...5
×

Designing For Flow

  • 10,437 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • very good presentation; I also attendeted your conference in Berlin
    Are you sure you want to
    Your message goes here
  • @ilccp2008: I meant applications must stop throwing the user back and forth between input and reference screens.
    Are you sure you want to
    Your message goes here
  • what do u mean of 'the Ping Pong' ?
    Are you sure you want to
    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?
    Are you sure you want to
    Your message goes here
  • BELLLA E INTERESANTE PRESENTAZIONE......COMPLIMENTI
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,437
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
110
Comments
7
Likes
43

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

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
  • 38.
    • 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
  • 59.
    • 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