mobile information architecture and interaction design
DESCRIPTION
A talk I did for the Design For Mobile 2010 conference in Chicago, ILTRANSCRIPT
Evidence-driven design
Mobile Information Architecture & Interaction Design Nick FinckSeptember 23rd, 2010
Design For Mobile 2010 - Chicago
Evidence-driven design
‣ 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
Outline
‣ Discover
‣ Plan
‣ Design*
‣ Build
‣ Evaluate
* - Yes, animals will be involved in these parts of the presentation
User Experience
Peter Morville’s Honeycomb
Usable
Useful
Desirable
Accessible
Credible
Findable
Valuable
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
It’s not about us,it’s about the users!
Photo by Dirk Borchers
Demographics & Abilities
Photo by Jenny Morros
Challenges & Needs
Photo by Rion Nakaya
Cultural & Social
Photo by Gaurav P
Environmental & Contextual
Photo by Keith Morris - Keith Morris
Stakeholder Interviews
Photo by Kristin Farwell
Kickoff Meeting
Content Audit / Inventory
Photo by Matt Ruecker
Focus Groups
Photo by Leandro Agrò
Card Sorting
Photo by Benjamin Voss
Contextual Inquiries
Personas
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
Basic Principals of Mobile
Unreadable
Must zoom
Readability
Readablewithoutzooming
Fits perfectly within screen
Navigation
Hotspots visible & clickable only
after zoomed 10x
Content is somewhere way the heck up here
Navigationalong sidethe content
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
Barely navigable with microscopic hotspots
Super sizehotspots
Visuallycalled outnavigation
Use largerheadings &visual hints
Hotspots
The world’ssmallestpagination
Pagination
Excellentpaginationsolution
Search
A perfectcase forsearch ahead
A typical search interaction
A very typicalweb button
Buttons
I like big buttons!
555-5555
Designedwith thespecificcontext inmind
A Note About Links
Calls to Action
Calls to action are lost in page
Make calls to actionvery obvious
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
Sketching The Mobile Experience
Nick Finck sketching tools
Garrett Dimon sketching tools
Michael Angeles sketching tools
Geoff Barnes sketching tools
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
Brandon Ewoldt sketches
Michael Angeles sketches Anthony Armendariz sketches
KC Oh sketches
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
Wireframing The Mobile Experience
OmniGroup OmniGraffle Microsoft Visio
Axure RP ProtoShare
Konigi Wireframe Stencil
Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference
MarlinMobile Android Wireframe Stencil
Paul Trow wireframes
James Yoon wireframes Annie Fang wireframes
Arquinauta wireframes
An Example Project
Photo by Edwin de Jongh
Photo by Suzanne
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
Creating The Mobile Experience
Design Iteration
Build Review
Photo by Dmitriy Kopylenko
QA Testing
Photo by Tristan Nitot
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
Qualifying The Mobile Experience
Paper Prototype
Usability Testing
User Interviews
Historical Traffic Analysis
Real-Time Traffic Analysis
Evidence-Driven Iteration
And one more thing...
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
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
Photo by Yokviv
Questions?Photo by Bo Bariel