Mobile Information Architecture and Interaction Design (InfoCamp 2010)
-
Upload
nick-finck -
Category
Education
-
view
111 -
download
4
description
Transcript of Mobile Information Architecture and Interaction Design (InfoCamp 2010)
![Page 1: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/1.jpg)
Evidence-driven design
Mobile Information Architecture & Interaction Design Nick FinckOctober 2nd, 2010
InfoCamp Seattle 2010
Evidence-driven design
![Page 2: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/4.jpg)
User Experience
![Page 5: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/5.jpg)
Peter Morville’s Honeycomb
Usable
Useful
Desirable
Accessible
Credible
Findable
Valuable
![Page 6: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/7.jpg)
It’s not about us,it’s about the users!
![Page 8: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/8.jpg)
Photo by Dirk Borchers
Demographics & Abilities
![Page 9: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/9.jpg)
Photo by Jenny Morros
Challenges & Needs
![Page 10: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/10.jpg)
Photo by Rion Nakaya
Cultural & Social
![Page 11: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/11.jpg)
Photo by Gaurav P
Environmental & Contextual
![Page 12: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/12.jpg)
Photo by Keith Morris - Keith Morris
Stakeholder Interviews
![Page 13: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/13.jpg)
Photo by Kristin Farwell
Kickoff Meeting
![Page 14: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/14.jpg)
Content Audit / Inventory
![Page 15: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/15.jpg)
Photo by Matt Ruecker
Focus Groups
![Page 16: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/16.jpg)
Photo by Leandro Agrò
Card Sorting
![Page 17: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/17.jpg)
Photo by Benjamin Voss
Contextual Inquiries
![Page 18: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/18.jpg)
Personas
![Page 19: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/20.jpg)
Basic Principals of Mobile
![Page 21: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/21.jpg)
Unreadable
Must zoom
Readability
Readablewithoutzooming
Fits perfectly within screen
![Page 22: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/25.jpg)
The world’ssmallestpagination
Pagination
Excellentpaginationsolution
![Page 26: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/26.jpg)
Search
A perfectcase forsearch ahead
A typical search interaction
![Page 27: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/27.jpg)
A very typicalweb button
Buttons
I like big buttons!
![Page 28: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/28.jpg)
555-5555
Designedwith thespecificcontext inmind
A Note About Links
![Page 29: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/31.jpg)
Sketching The Mobile Experience
![Page 32: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/34.jpg)
Brandon Ewoldt sketches
Michael Angeles sketches Anthony Armendariz sketches
KC Oh sketches
![Page 35: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/36.jpg)
Wireframing The Mobile Experience
![Page 37: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/37.jpg)
OmniGroup OmniGraffle Microsoft Visio
Axure RP ProtoShare
![Page 38: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/39.jpg)
Paul Trow wireframes
James Yoon wireframes Annie Fang wireframes
Arquinauta wireframes
![Page 40: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/40.jpg)
An Example Project
![Page 41: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/41.jpg)
Photo by Edwin de Jongh
![Page 42: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/42.jpg)
![Page 43: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/43.jpg)
![Page 44: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/44.jpg)
![Page 45: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/45.jpg)
![Page 46: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/46.jpg)
![Page 47: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/47.jpg)
![Page 48: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/48.jpg)
![Page 49: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/49.jpg)
![Page 50: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/50.jpg)
![Page 51: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/51.jpg)
Photo by Suzanne
![Page 52: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/53.jpg)
Creating The Mobile Experience
![Page 54: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/54.jpg)
Design Iteration
![Page 55: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/55.jpg)
Build Review
Photo by Dmitriy Kopylenko
![Page 56: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/56.jpg)
QA Testing
Photo by Tristan Nitot
![Page 57: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/58.jpg)
Qualifying The Mobile Experience
![Page 59: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/59.jpg)
Paper Prototype
![Page 60: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/60.jpg)
Usability Testing
![Page 61: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/61.jpg)
User Interviews
![Page 62: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/62.jpg)
Historical Traffic Analysis
![Page 63: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/63.jpg)
Real-Time Traffic Analysis
![Page 64: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/64.jpg)
Evidence-Driven Iteration
![Page 65: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/65.jpg)
And one more thing...
![Page 66: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/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 (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/68.jpg)
Photo by Yokviv
![Page 70: Mobile Information Architecture and Interaction Design (InfoCamp 2010)](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c7eccc4a795916268b4654/html5/thumbnails/70.jpg)
Questions?Photo by Bo Bariel