SlideShare a Scribd company logo
1 of 61
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
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Benefits
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 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
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
Change
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
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
Change  + Movement
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
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
Bookshelf chotda
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
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
Change  + Size
Sieve Indigo Goat
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
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
Flash CS3 Definitive Guide Michael Norris Photoshop CS3 Hands On   Jane Wilbur Web Design   Bruno Figueiredo Illustrator CS3   Anna Stevenson Show Only  Books: Design
Change  + Movement
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Wrap up
Questions?
[email_address] Thank you hoppiness All pictures are CC from Flickr and the author’s name is on the lower right

More Related Content

Similar to Designing For Flow

San Antonio Road Warrior
San Antonio Road WarriorSan Antonio Road Warrior
San Antonio Road WarriorShannon W. King
 
Visibuild
VisibuildVisibuild
Visibuilddoeko
 
Planning and Investing in Digital Products
Planning and Investing in Digital ProductsPlanning and Investing in Digital Products
Planning and Investing in Digital ProductsBrad Scott
 
Evolving the Digital Experience at Pace with Experimentation - Chris Gibbins
Evolving the Digital Experience at Pace with Experimentation - Chris GibbinsEvolving the Digital Experience at Pace with Experimentation - Chris Gibbins
Evolving the Digital Experience at Pace with Experimentation - Chris GibbinsDesignOps Global Conference
 
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%How Threedium's 3D/AR Technology can boost Brand Engagement by 300%
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%MAD//Fest London
 
CES Preferred Select S
CES Preferred Select SCES Preferred Select S
CES Preferred Select SHarold750Potts
 
Changing landscape of front end. How does it impact your business?
Changing landscape of front end. How does it impact your business?Changing landscape of front end. How does it impact your business?
Changing landscape of front end. How does it impact your business?Frosmo
 
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...MongoSF
 
Metro Wi B Product Overview 11 09
Metro Wi B Product Overview 11 09Metro Wi B Product Overview 11 09
Metro Wi B Product Overview 11 09irobbin2
 
Choose SketchApp over Photoshop for UI/UX
Choose SketchApp over Photoshop for UI/UXChoose SketchApp over Photoshop for UI/UX
Choose SketchApp over Photoshop for UI/UXJens Hoffmann
 
How to win the game of trade-offs
How to win the game of trade-offsHow to win the game of trade-offs
How to win the game of trade-offsYan Cui
 
Maximizing eCommerce Sales With 3D Visuals
Maximizing eCommerce Sales  With 3D VisualsMaximizing eCommerce Sales  With 3D Visuals
Maximizing eCommerce Sales With 3D VisualsImagine io
 
Netflix's Customer Obsession by fmr Netflix VP of Product
Netflix's Customer Obsession by fmr Netflix VP of ProductNetflix's Customer Obsession by fmr Netflix VP of Product
Netflix's Customer Obsession by fmr Netflix VP of ProductProduct School
 
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernJuggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernAtlassian
 
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernJuggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernAtlassian
 
Today's Digital Edition Options
Today's Digital Edition OptionsToday's Digital Edition Options
Today's Digital Edition OptionsNxtbook Media
 
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)brainerymakers
 
UX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSUX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSJens Hoffmann
 
2017 3D Printing: stop prototyping, start producing!
2017   3D Printing: stop prototyping, start producing! 2017   3D Printing: stop prototyping, start producing!
2017 3D Printing: stop prototyping, start producing! Jan Eite Bullema
 

Similar to Designing For Flow (20)

San Antonio Road Warrior
San Antonio Road WarriorSan Antonio Road Warrior
San Antonio Road Warrior
 
Visibuild
VisibuildVisibuild
Visibuild
 
Planning and Investing in Digital Products
Planning and Investing in Digital ProductsPlanning and Investing in Digital Products
Planning and Investing in Digital Products
 
Evolving the Digital Experience at Pace with Experimentation - Chris Gibbins
Evolving the Digital Experience at Pace with Experimentation - Chris GibbinsEvolving the Digital Experience at Pace with Experimentation - Chris Gibbins
Evolving the Digital Experience at Pace with Experimentation - Chris Gibbins
 
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%How Threedium's 3D/AR Technology can boost Brand Engagement by 300%
How Threedium's 3D/AR Technology can boost Brand Engagement by 300%
 
CES Preferred Select S
CES Preferred Select SCES Preferred Select S
CES Preferred Select S
 
Changing landscape of front end. How does it impact your business?
Changing landscape of front end. How does it impact your business?Changing landscape of front end. How does it impact your business?
Changing landscape of front end. How does it impact your business?
 
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...
Real time ecommerce analytics with MongoDB at Gilt Groupe (Michael Bryzek & M...
 
Metro Wi B Product Overview 11 09
Metro Wi B Product Overview 11 09Metro Wi B Product Overview 11 09
Metro Wi B Product Overview 11 09
 
Choose SketchApp over Photoshop for UI/UX
Choose SketchApp over Photoshop for UI/UXChoose SketchApp over Photoshop for UI/UX
Choose SketchApp over Photoshop for UI/UX
 
How to win the game of trade-offs
How to win the game of trade-offsHow to win the game of trade-offs
How to win the game of trade-offs
 
Maximizing eCommerce Sales With 3D Visuals
Maximizing eCommerce Sales  With 3D VisualsMaximizing eCommerce Sales  With 3D Visuals
Maximizing eCommerce Sales With 3D Visuals
 
Netflix's Customer Obsession by fmr Netflix VP of Product
Netflix's Customer Obsession by fmr Netflix VP of ProductNetflix's Customer Obsession by fmr Netflix VP of Product
Netflix's Customer Obsession by fmr Netflix VP of Product
 
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernJuggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
 
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris MaddernJuggling Features, Advancement, and Quality As You Grow - Chris Maddern
Juggling Features, Advancement, and Quality As You Grow - Chris Maddern
 
Today's Digital Edition Options
Today's Digital Edition OptionsToday's Digital Edition Options
Today's Digital Edition Options
 
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)
피규어 디자인과 3D 프린팅 : 박재완(PYPEP 대표)
 
High-Volume 3D Printing
High-Volume 3D PrintingHigh-Volume 3D Printing
High-Volume 3D Printing
 
UX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMSUX-Vision for the next TYPO3 CMS
UX-Vision for the next TYPO3 CMS
 
2017 3D Printing: stop prototyping, start producing!
2017   3D Printing: stop prototyping, start producing! 2017   3D Printing: stop prototyping, start producing!
2017 3D Printing: stop prototyping, start producing!
 

Recently uploaded

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 

Recently uploaded (20)

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 

Designing For Flow

Editor's Notes

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