Your SlideShare is downloading. ×
0
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Information Architecture and Interaction Design

25,296

Published on

A talk I did for the Design For Mobile 2010 conference in Chicago, IL

A talk I did for the Design For Mobile 2010 conference in Chicago, IL

Published in: Design
1 Comment
67 Likes
Statistics
Notes
  • I was able to get some audio of the talk, but it was recorded from the back of the room. Sorry about the quality, but some audio is better than none! :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
25,296
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
688
Comments
1
Likes
67
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

Transcript

  • 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
  • 4. User Experience
  • 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
  • 40. An Example Project
  • 41. Photo by Edwin de Jongh
  • 42. Photo by Suzanne
  • 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. Creating The Mobile Experience
  • 45. Design Iteration
  • 46. Build Review Photo by Dmitriy Kopylenko
  • 47. QA Testing Photo by Tristan Nitot
  • 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. Qualifying The Mobile Experience
  • 50. Paper Prototype
  • 51. Usability Testing
  • 52. User Interviews
  • 53. Historical Traffic Analysis
  • 54. Real-Time Traffic Analysis
  • 55. Evidence-Driven Iteration
  • 56. And one more thing...
  • 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. 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. Photo by Yokviv
  • 60. Thank You! Nick Finck @nickf nick@blinkinteractive.com blinkinteractive.com nickfinck.com
  • 61. Photo by Bo Bariel Questions?

×