Mobile Information Architecture and Interaction Design
•
77 likes•19,831 views
Nick Finck presented on evidence-driven design for mobile experiences. He discussed discovering user needs through research methods like interviews and usability testing. Next, plans are made to identify solutions to core problems. Designs are then created to resolve these problems. The designs are built into functional code. Finally, the mobile experience is evaluated through testing and analysis to review effectiveness. The goal is to understand users, design based on evidence from research, and iteratively improve through evaluation.
Mobile Information Architecture and Interaction Design
- 1. Evidence-driven design Evidence-driven design Mobile Information Architecture & Interaction Design Nick Finck September 23rd, 2010 Design For Mobile 2010 - Chicago
- 2. Nick Finck Blink Interactive ‣ User Experience Director ‣ Over 15 years of experience working in the web field ‣ Launched one of the very first web applications for the iPhone in 2007 ‣ Has worked with Adobe, Boeing, CBS, Comcast, Google, HP, IBM, Microsoft, Oprah.com, PBS, and more ‣ Co-organized and curated more than 10 national and international web conferences & events ‣ BlinkInteractive.com ‣ Judged the Webby’s and several other web awards ‣ NickFinck.com ‣ Founder of Digital Web Magazine and Blue Flavor ‣ Google “Nick” ‣ Expertise in information architecture, interaction design, and user research
- 3. Outline ‣ Discover ‣ Plan ‣ Design* ‣ Build ‣ Evaluate * - Yes, animals will be involved in these parts of the presentation
- 5. Peter Morville’s Honeycomb Useful Usable Desirable Valuable Findable Accessible Credible
- 6. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 7. It’s not about us, it’s about the users!
- 8. Demographics & Abilities Photo by Dirk Borchers
- 9. Challenges & Needs Photo by Jenny Morros
- 10. Cultural & Social Photo by Rion Nakaya
- 11. Environmental & Contextual Photo by Gaurav P
- 12. Stakeholder Interviews Photo by Keith Morris - Keith Morris
- 13. Kickoff Meeting Photo by Kristin Farwell
- 14. Content Audit / Inventory
- 15. Focus Groups Photo by Matt Ruecker
- 16. Card Sorting Photo by Leandro Agrò
- 17. Contextual Inquiries Photo by Benjamin Voss
- 18. Personas
- 19. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 20. Basic Principals of Mobile
- 21. Readability Unreadable Readable without zooming Must zoom Fits perfectly within screen
- 22. Navigation Content is somewhere way the heck up here Hotspots visible Navigation & clickable only along side after zoomed 10x the content
- 23. Fitts’s Law “ In ergonomics, Fitts's law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.” Description of Fitts’s Law Wikipedia
- 24. Hotspots Super size hotspots Barely navigable with microscopic Visually hotspots called out navigation Use larger headings & visual hints
- 25. Pagination The world’s smallest pagination Excellent pagination solution
- 26. Search A typical A perfect search case for interaction search ahead
- 27. Buttons A very typical web button I like big buttons!
- 28. A Note About Links Designed with the specific 555-5555 context in mind
- 29. Calls to Action Make calls to action very obvious Calls to action are lost in page
- 30. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 31. Sketching The Mobile Experience
- 32. Nick Finck sketching tools Michael Angeles sketching tools Garrett Dimon sketching tools Geoff Barnes sketching tools
- 33. Design Commission iPhone Stencil Design Commission Android Stencil Design Commission iPad Stencil Design Commission Website Stencil Design Commission iPhone Sketch Pad Design Commission iPad Sketch Pad
- 34. Brandon Ewoldt sketches KC Oh sketches Michael Angeles sketches Anthony Armendariz sketches
- 35. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 36. Wireframing The Mobile Experience
- 37. OmniGroup OmniGraffle Microsoft Visio Axure RP ProtoShare
- 38. Konigi Wireframe Stencil MarlinMobile Android Wireframe Stencil Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference
- 39. Paul Trow wireframes Arquinauta wireframes James Yoon wireframes Annie Fang wireframes
- 41. Photo by Edwin de Jongh
- 51. Photo by Suzanne
- 52. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 53. Creating The Mobile Experience
- 54. Design Iteration
- 55. Build Review Photo by Dmitriy Kopylenko
- 56. QA Testing Photo by Tristan Nitot
- 57. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 58. Qualifying The Mobile Experience
- 59. Paper Prototype
- 61. User Interviews
- 65. And one more thing...
- 66. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 67. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
- 68. Photo by Yokviv
- 70. Photo by Bo Bariel Questions?