mobile information architecture and interaction design
DESCRIPTION
A talk I did for the Design For Mobile 2010 conference in Chicago, ILTRANSCRIPT
![Page 1: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/1.jpg)
Evidence-driven design
Mobile Information Architecture & Interaction Design Nick FinckSeptember 23rd, 2010
Design For Mobile 2010 - Chicago
Evidence-driven design
![Page 2: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/2.jpg)
‣ 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
‣ Judged the Webby’s and several other web awards
‣ Founder of Digital Web Magazine and Blue Flavor
‣ Expertise in information architecture, interaction design, and user research
‣ BlinkInteractive.com
‣ NickFinck.com
‣ Google “Nick”
Blink Interactive
Nick Finck
![Page 3: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/3.jpg)
Outline
‣ Discover
‣ Plan
‣ Design*
‣ Build
‣ Evaluate
* - Yes, animals will be involved in these parts of the presentation
![Page 4: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/4.jpg)
User Experience
![Page 5: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/5.jpg)
Peter Morville’s Honeycomb
Usable
Useful
Desirable
Accessible
Credible
Findable
Valuable
![Page 6: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/6.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 7: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/7.jpg)
It’s not about us,it’s about the users!
![Page 8: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/8.jpg)
Photo by Dirk Borchers
Demographics & Abilities
![Page 9: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/9.jpg)
Photo by Jenny Morros
Challenges & Needs
![Page 10: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/10.jpg)
Photo by Rion Nakaya
Cultural & Social
![Page 11: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/11.jpg)
Photo by Gaurav P
Environmental & Contextual
![Page 12: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/12.jpg)
Photo by Keith Morris - Keith Morris
Stakeholder Interviews
![Page 13: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/13.jpg)
Photo by Kristin Farwell
Kickoff Meeting
![Page 14: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/14.jpg)
Content Audit / Inventory
![Page 15: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/15.jpg)
Photo by Matt Ruecker
Focus Groups
![Page 16: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/16.jpg)
Photo by Leandro Agrò
Card Sorting
![Page 17: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/17.jpg)
Photo by Benjamin Voss
Contextual Inquiries
![Page 18: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/18.jpg)
Personas
![Page 19: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/19.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 20: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/20.jpg)
Basic Principals of Mobile
![Page 21: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/21.jpg)
Unreadable
Must zoom
Readability
Readablewithoutzooming
Fits perfectly within screen
![Page 22: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/22.jpg)
Navigation
Hotspots visible & clickable only
after zoomed 10x
Content is somewhere way the heck up here
Navigationalong sidethe content
![Page 23: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/23.jpg)
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 LawWikipedia
“
Fitts’s Law
![Page 24: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/24.jpg)
Barely navigable with microscopic hotspots
Super sizehotspots
Visuallycalled outnavigation
Use largerheadings &visual hints
Hotspots
![Page 25: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/25.jpg)
The world’ssmallestpagination
Pagination
Excellentpaginationsolution
![Page 26: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/26.jpg)
Search
A perfectcase forsearch ahead
A typical search interaction
![Page 27: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/27.jpg)
A very typicalweb button
Buttons
I like big buttons!
![Page 28: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/28.jpg)
555-5555
Designedwith thespecificcontext inmind
A Note About Links
![Page 29: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/29.jpg)
Calls to Action
Calls to action are lost in page
Make calls to actionvery obvious
![Page 30: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/30.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 31: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/31.jpg)
Sketching The Mobile Experience
![Page 32: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/32.jpg)
Nick Finck sketching tools
Garrett Dimon sketching tools
Michael Angeles sketching tools
Geoff Barnes sketching tools
![Page 33: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/33.jpg)
Design Commission iPhone Stencil
Design Commission iPad Stencil
Design Commission iPhone Sketch Pad Design Commission iPad Sketch Pad
Design Commission Website Stencil
Design Commission Android Stencil
![Page 34: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/34.jpg)
Brandon Ewoldt sketches
Michael Angeles sketches Anthony Armendariz sketches
KC Oh sketches
![Page 35: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/35.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 36: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/36.jpg)
Wireframing The Mobile Experience
![Page 37: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/37.jpg)
OmniGroup OmniGraffle Microsoft Visio
Axure RP ProtoShare
![Page 38: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/38.jpg)
Konigi Wireframe Stencil
Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference
MarlinMobile Android Wireframe Stencil
![Page 39: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/39.jpg)
Paul Trow wireframes
James Yoon wireframes Annie Fang wireframes
Arquinauta wireframes
![Page 40: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/40.jpg)
An Example Project
![Page 41: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/41.jpg)
Photo by Edwin de Jongh
![Page 42: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/42.jpg)
![Page 43: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/43.jpg)
![Page 44: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/44.jpg)
![Page 45: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/45.jpg)
![Page 46: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/46.jpg)
![Page 47: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/47.jpg)
![Page 48: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/48.jpg)
![Page 49: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/49.jpg)
![Page 50: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/50.jpg)
![Page 51: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/51.jpg)
Photo by Suzanne
![Page 52: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/52.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 53: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/53.jpg)
Creating The Mobile Experience
![Page 54: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/54.jpg)
Design Iteration
![Page 55: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/55.jpg)
Build Review
Photo by Dmitriy Kopylenko
![Page 56: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/56.jpg)
QA Testing
Photo by Tristan Nitot
![Page 57: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/57.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 58: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/58.jpg)
Qualifying The Mobile Experience
![Page 59: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/59.jpg)
Paper Prototype
![Page 60: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/60.jpg)
Usability Testing
![Page 61: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/61.jpg)
User Interviews
![Page 62: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/62.jpg)
Historical Traffic Analysis
![Page 63: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/63.jpg)
Real-Time Traffic Analysis
![Page 64: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/64.jpg)
Evidence-Driven Iteration
![Page 65: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/65.jpg)
And one more thing...
![Page 66: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/66.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 67: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/67.jpg)
Understand and identify the core
problems first
Identify possible solutions and
plan execution
Create designs that resolve the
core problems
Develop functional code based on the
designs
Review, test, and analyze effectiveness
of the design
Discover Plan Design Build Evaluate
![Page 68: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/68.jpg)
Photo by Yokviv
![Page 70: Mobile Information Architecture and Interaction Design](https://reader030.vdocuments.us/reader030/viewer/2022020115/53f112368d7f72e94b8b4718/html5/thumbnails/70.jpg)
Questions?Photo by Bo Bariel