Mobile Information Architecture and Interaction Design (InfoCamp 2010)

Evidence-driven design Evidence-driven design Mobile Information Architecture & Interaction Design Nick Finck October 2nd, 2010 InfoCamp Seattle 2010

Nick Finck Blink Interactive ‣ User Experience Director ‣ Over 15 years of experience working in the web ﬁeld ‣ Launched one of the very ﬁrst 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

Outline ‣ Discover ‣ Plan ‣ Design* ‣ Build ‣ Evaluate * - Yes, animals will be involved in these parts of the presentation

User Experience

Peter Morville’s Honeycomb Useful Usable Desirable Valuable Findable Accessible Credible

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 ﬁrst plan execution core problems designs of the design

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

Basic Principals of Mobile

Readability Unreadable Readable without zooming Must zoom Fits perfectly within screen

Navigation Content is somewhere way the heck up here Hotspots visible Navigation & clickable only along side after zoomed 10x the content

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

Hotspots Super size hotspots Barely navigable with microscopic Visually hotspots called out navigation Use larger headings & visual hints

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 mind

Calls to Action Make calls to action very obvious Calls to action are lost in page

Sketching The Mobile Experience

Nick Finck sketching tools Michael Angeles sketching tools Garrett Dimon sketching tools Geoff Barnes sketching tools

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

Brandon Ewoldt sketches KC Oh sketches Michael Angeles sketches Anthony Armendariz sketches

Wireframing The Mobile Experience

OmniGroup OmniGraffle Microsoft Visio Axure RP ProtoShare

Konigi Wireframe Stencil MarlinMobile Android Wireframe Stencil Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference

Paul Trow wireframes Arquinauta wireframes James Yoon wireframes Annie Fang wireframes

An Example Project

Photo by Edwin de Jongh

Photo by Suzanne

Creating The Mobile Experience

Design Iteration

Build Review Photo by Dmitriy Kopylenko

QA Testing Photo by Tristan Nitot

Qualifying The Mobile Experience

Paper Prototype

Usability Testing

User Interviews

Historical Traffic Analysis

Real-Time Traffic Analysis

Evidence-Driven Iteration

And one more thing...

Photo by Yokviv

Thank You! Nick Finck @nickf nick@blinkinteractive.com blinkinteractive.com nickﬁnck.com

Photo by Bo Bariel Questions?

http://vega.soi.city.ac.uk	18
http://paper.li	9
http://www.linkedin.com	1

Mobile Information Architecture and Interaction Design (InfoCamp 2010)

by Nick Finck

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 28

Statistics

Mobile Information Architecture and Interaction Design (InfoCamp 2010) Presentation Transcript