Mobile Information Architecture and Interaction Design

Notes:	Hide Notes

Slide 1: Evidence-driven design Evidence-driven design Mobile Information Architecture & Interaction Design Nick Finck September 23rd, 2010 Design For Mobile 2010 - Chicago Slide 2: 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 ‣ 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” Slide 3: Outline ‣ Discover ‣ Plan ‣ Design* ‣ Build ‣ Evaluate * - Yes, animals will be involved in these parts of the presentation Slide 4: User Experience Slide 5: Peter Morville’s Honeycomb Useful Usable Valuable Findable Credible Accessible Desirable Slide 6: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 7: It’s not about us, it’s about the users! Slide 8: Demographics & Abilities Photo by Dirk Borchers Slide 9: Challenges & Needs Photo by Jenny Morros Slide 10: Cultural & Social Photo by Rion Nakaya Slide 11: Environmental & Contextual Photo by Gaurav P Slide 12: Stakeholder Interviews Photo by Keith Morris - Keith Morris Slide 13: Kickoff Meeting Photo by Kristin Farwell Slide 14: Content Audit / Inventory Slide 15: Focus Groups Photo by Matt Ruecker Slide 16: Card Sorting Photo by Leandro Agrò Slide 17: Contextual Inquiries Photo by Benjamin Voss Slide 18: Personas Slide 19: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 20: Basic Principals of Mobile Slide 21: Readability Unreadable Readable without zooming Must zoom Fits perfectly within screen Slide 22: Navigation Content is somewhere way the heck up here Hotspots visible & clickable only after zoomed 10x Navigation along side the content Slide 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 Slide 24: Hotspots Barely navigable with microscopic hotspots Super size hotspots Visually called out navigation Use larger headings & visual hints Slide 25: Pagination The world’s smallest pagination Excellent pagination solution Slide 26: Search A typical search interaction A perfect case for search ahead Slide 27: Buttons A very typical web button I like big buttons! Slide 28: A Note About Links Designed with the specific context in mind 555-5555 Slide 29: Calls to Action Make calls to action very obvious Calls to action are lost in page Slide 30: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 31: Sketching The Mobile Experience Slide 32: Nick Finck sketching tools Michael Angeles sketching tools Garrett Dimon sketching tools Geoff Barnes sketching tools Slide 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 Slide 34: Brandon Ewoldt sketches KC Oh sketches Michael Angeles sketches Anthony Armendariz sketches Slide 35: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 36: Wireframing The Mobile Experience Slide 37: OmniGroup OmniGraffle Microsoft Visio Axure RP ProtoShare Slide 38: Konigi Wireframe Stencil MarlinMobile Android Wireframe Stencil Theresa Neil iPhone Wireframe Stencil Cvilly Touch Gesture Reference Slide 39: Paul Trow wireframes Arquinauta wireframes James Yoon wireframes Annie Fang wireframes Slide 40: An Example Project Slide 41: Photo by Edwin de Jongh Slide 51: Photo by Suzanne Slide 52: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 53: Creating The Mobile Experience Slide 54: Design Iteration Slide 55: Build Review Photo by Dmitriy Kopylenko Slide 56: QA Testing Photo by Tristan Nitot Slide 57: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 58: Qualifying The Mobile Experience Slide 59: Paper Prototype Slide 60: Usability Testing Slide 61: User Interviews Slide 62: Historical Traffic Analysis Slide 63: Real-Time Traffic Analysis Slide 64: Evidence-Driven Iteration Slide 65: And one more thing... Slide 66: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 67: Discover Plan Design Build Evaluate Understand and identify the core problems ﬁrst 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 Slide 68: Photo by Yokviv Slide 69: Thank You! Nick Finck @nickf nick@blinkinteractive.com blinkinteractive.com nickﬁnck.com Slide 70: Photo by Bo Bariel Questions?