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

Thank You!

Nick Finck@nickfnick@blinkinteractive.comblinkinteractive.comnickfinck.com

Questions?Photo by Bo Bariel