Your SlideShare is downloading. ×
0
Evidence-driven design




                           Evidence-driven design




Mobile Information Architecture
& Interac...
Nick Finck
                         Blink Interactive

                         ‣ User Experience Director

              ...
Outline

‣ Discover
‣ Plan
‣ Design*
‣ Build
‣ Evaluate




* - Yes, animals will be involved in these parts of the presen...
User Experience
Peter Morville’s Honeycomb


                        Useful

              Usable               Desirable

               ...
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
It’s not about us,
it’s about the users!
Demographics & Abilities




                           Photo by Dirk Borchers
Challenges & Needs




                     Photo by Jenny Morros
Cultural & Social




                    Photo by Rion Nakaya
Environmental & Contextual




Photo by Gaurav P
Stakeholder Interviews




                         Photo by Keith Morris - Keith Morris
Kickoff Meeting




                  Photo by Kristin Farwell
Content Audit / Inventory
Focus Groups




               Photo by Matt Ruecker
Card Sorting




               Photo by Leandro Agrò
Contextual Inquiries




                       Photo by Benjamin Voss
Personas
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Basic Principals of Mobile
Readability




  Unreadable                                  Readable
                                              witho...
Navigation
                     Content is somewhere
                     way the heck up here




  Hotspots visible     ...
Fitts’s Law



 “ In ergonomics, Fitts's law is a model of
   human movement which predicts the time
   required to rapidl...
Hotspots


                   Super size
                   hotspots
Barely navigable
with microscopic   Visually
hotspots...
Pagination




  The world’s
  smallest
  pagination    Excellent
                pagination
                solution
Search


  A typical     A perfect
  search        case for
  interaction   search ahead
Buttons




 A very typical
 web button
                  I like big
                  buttons!
A Note About Links



          Designed
          with the
          specific     555-5555
          context in
         ...
Calls to Action




                  Make calls
                  to action
                  very obvious




  Calls to...
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Sketching The Mobile
     Experience
Nick Finck sketching tools      Michael Angeles sketching tools




Garrett Dimon sketching tools   Geoff Barnes sketching...
Design Commission iPhone Stencil      Design Commission Android Stencil




Design Commission iPad Stencil        Design C...
Brandon Ewoldt sketches    KC Oh sketches




Michael Angeles sketches   Anthony Armendariz sketches
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Wireframing The Mobile
      Experience
OmniGroup OmniGraffle   Microsoft Visio




Axure RP                ProtoShare
Konigi Wireframe Stencil                MarlinMobile Android Wireframe Stencil




Theresa Neil iPhone Wireframe Stencil  ...
Paul Trow wireframes    Arquinauta wireframes




James Yoon wireframes   Annie Fang wireframes
An Example Project
Photo by Edwin de Jongh
Photo by Suzanne
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Creating The Mobile
    Experience
Design Iteration
Build Review




    Photo by Dmitriy Kopylenko
QA Testing




    Photo by Tristan Nitot
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Qualifying The Mobile
     Experience
Paper Prototype
Usability Testing
User Interviews
Historical Traffic Analysis
Real-Time Traffic Analysis
Evidence-Driven Iteration
And one more thing...
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Photo by Yokviv
Thank You!

Nick Finck
@nickf
nick@blinkinteractive.com
blinkinteractive.com
nickfinck.com
Photo by Bo Bariel




Questions?
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
×

Mobile Information Architecture and Interaction Design

25,417

Published on

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,417
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
690
Comments
1
Likes
67
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Information Architecture and Interaction Design"

  1. 1. Evidence-driven design Evidence-driven design Mobile Information Architecture & Interaction Design Nick Finck September 23rd, 2010 Design For Mobile 2010 - Chicago
  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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×