Designing For Flow
Download as PPT, PDF44 likes8,737 views
The document discusses the concept of "flow" in user interface design, which refers to keeping a user's attention focused by minimizing breaks in interaction and maintaining context. It provides examples of how animation, movement, and changing elements on a page can help guide users through a process or task in a more natural and engaging way. The key principles of flow discussed are smooth transitions between states, subtle animations, keeping relevant content in view, and avoiding overuse of effects.
![[email_address] Thank you hoppiness All pictures are CC from Flickr and the author’s name is on the lower right](https://image.slidesharecdn.com/designing-for-flow-1224749549226244-8/85/Designing-For-Flow-61-320.jpg)
Designing For Flow
- 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
- 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
- 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
- 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
- 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
- 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
Editor's Notes
- #2: Good Afternoon. I’m here to give a talk about Designing for Flow.