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

2. Nick Finck
Blink Interactive
‣ 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
‣ 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

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

4. User Experience

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

6. 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 first plan execution core problems designs of the design

7. It’s not about us,
it’s about the users!

8. Demographics & Abilities
Photo by Dirk Borchers

9. Challenges & Needs
Photo by Jenny Morros

10. Cultural & Social
Photo by Rion Nakaya

11. Environmental & Contextual
Photo by Gaurav P

12. Stakeholder Interviews
Photo by Keith Morris - Keith Morris

13. Kickoff Meeting
Photo by Kristin Farwell

14. Content Audit / Inventory

15. Focus Groups
Photo by Matt Ruecker

16. Card Sorting
Photo by Leandro Agrò

17. Contextual Inquiries
Photo by Benjamin Voss

18. Personas

19. 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 first plan execution core problems designs of the design

20. Basic Principals of Mobile

21. Readability
Unreadable Readable
without
zooming
Must zoom
Fits perfectly within screen

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

23. 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

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

25. Pagination
The world’s
smallest
pagination Excellent
pagination
solution

26. Search
A typical A perfect
search case for
interaction search ahead

27. Buttons
A very typical
web button
I like big
buttons!

28. A Note About Links
Designed
with the
specific 555-5555
context in
mind

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

30. 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 first plan execution core problems designs of the design

31. Sketching The Mobile
Experience

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

33. 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

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

35. 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 first plan execution core problems designs of the design

36. Wireframing The Mobile
Experience

37. OmniGroup OmniGraffle Microsoft Visio
Axure RP ProtoShare

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

39. Paul Trow wireframes Arquinauta wireframes
James Yoon wireframes Annie Fang wireframes

40. An Example Project

41. Photo by Edwin de Jongh

51. Photo by Suzanne

52. 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 first plan execution core problems designs of the design

53. Creating The Mobile
Experience

54. Design Iteration

55. Build Review
Photo by Dmitriy Kopylenko

56. QA Testing
Photo by Tristan Nitot

57. 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 first plan execution core problems designs of the design

58. Qualifying The Mobile
Experience

59. Paper Prototype

60. Usability Testing

61. User Interviews

62. Historical Traffic Analysis

63. Real-Time Traffic Analysis

64. Evidence-Driven Iteration

65. And one more thing...

66. 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 first plan execution core problems designs of the design

67. 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 first plan execution core problems designs of the design

68. Photo by Yokviv

69. Thank You!
Nick Finck
@nickf
nick@blinkinteractive.com
blinkinteractive.com
nickfinck.com

70. Photo by Bo Bariel
Questions?