Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Information Architecture and Interaction Design (InfoCamp 2010)

4,960 views

Published on

Published in: Education

Mobile Information Architecture and Interaction Design (InfoCamp 2010)

  1. 1. Evidence-driven design Evidence-driven design Mobile Information Architecture & Interaction Design Nick Finck October 2nd, 2010 InfoCamp Seattle 2010
  2. 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. 3. Outline ‣ Discover ‣ Plan ‣ Design* ‣ Build ‣ Evaluate * - Yes, animals will be involved in these parts of the presentation
  4. 4. User Experience
  5. 5. Peter Morville’s Honeycomb Useful Usable Desirable Valuable Findable Accessible Credible
  6. 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. 7. It’s not about us, it’s about the users!
  8. 8. Demographics & Abilities Photo by Dirk Borchers
  9. 9. Challenges & Needs Photo by Jenny Morros
  10. 10. Cultural & Social Photo by Rion Nakaya
  11. 11. Environmental & Contextual Photo by Gaurav P
  12. 12. Stakeholder Interviews Photo by Keith Morris - Keith Morris
  13. 13. Kickoff Meeting Photo by Kristin Farwell
  14. 14. Content Audit / Inventory
  15. 15. Focus Groups Photo by Matt Ruecker
  16. 16. Card Sorting Photo by Leandro Agrò
  17. 17. Contextual Inquiries Photo by Benjamin Voss
  18. 18. Personas
  19. 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. 20. Basic Principals of Mobile
  21. 21. Readability Unreadable Readable without zooming Must zoom Fits perfectly within screen
  22. 22. Navigation Content is somewhere way the heck up here Hotspots visible Navigation & clickable only along side after zoomed 10x the content
  23. 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. 24. Hotspots Super size hotspots Barely navigable with microscopic Visually hotspots called out navigation Use larger headings & visual hints
  25. 25. Pagination The world’s smallest pagination Excellent pagination solution
  26. 26. Search A typical A perfect search case for interaction search ahead
  27. 27. Buttons A very typical web button I like big buttons!
  28. 28. A Note About Links Designed with the specific 555-5555 context in mind
  29. 29. Calls to Action Make calls to action very obvious Calls to action are lost in page
  30. 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. 31. Sketching The Mobile Experience
  32. 32. Nick Finck sketching tools Michael Angeles sketching tools Garrett Dimon sketching tools Geoff Barnes sketching tools
  33. 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. 34. Brandon Ewoldt sketches KC Oh sketches Michael Angeles sketches Anthony Armendariz sketches
  35. 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. 36. Wireframing The Mobile Experience
  37. 37. OmniGroup OmniGraffle Microsoft Visio Axure RP ProtoShare
  38. 38. Konigi Wireframe Stencil MarlinMobile Android Wireframe Stencil Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference
  39. 39. Paul Trow wireframes Arquinauta wireframes James Yoon wireframes Annie Fang wireframes
  40. 40. An Example Project
  41. 41. Photo by Edwin de Jongh
  42. 42. Photo by Suzanne
  43. 43. 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
  44. 44. Creating The Mobile Experience
  45. 45. Design Iteration
  46. 46. Build Review Photo by Dmitriy Kopylenko
  47. 47. QA Testing Photo by Tristan Nitot
  48. 48. 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
  49. 49. Qualifying The Mobile Experience
  50. 50. Paper Prototype
  51. 51. Usability Testing
  52. 52. User Interviews
  53. 53. Historical Traffic Analysis
  54. 54. Real-Time Traffic Analysis
  55. 55. Evidence-Driven Iteration
  56. 56. And one more thing...
  57. 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. 58. 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
  59. 59. Photo by Yokviv
  60. 60. Thank You! Nick Finck @nickf nick@blinkinteractive.com blinkinteractive.com nickfinck.com
  61. 61. Photo by Bo Bariel Questions?

×