![Page 1: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/1.jpg)
Between Here and ThereNavigation Design for Mobile
Presented by Ryan Unger (@ryanunger) ofPunchkick Interactive (@punchkickmobile)
Hash tag #d4m2010
![Page 2: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/2.jpg)
Punchkick Interactive Helps Brands Use Personalized Communication to Inspire Trust
• Headquartered in Chicago, IL• Our work is featured in:
• Mobile Web Design by Cameron Moll• Mobile Marke0ng Handbook
by Kim Dushinski• The NEW Launch Plan by Joan Schneider and
Julie Hall
• Founded 2006• Award-‐winning services:
• Text-‐message campaign management• Mobile Web site design• Custom App development• Mobile-‐media planning
![Page 3: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/3.jpg)
Session Goals
1. Understand the importance of forgeOng what you know
2. Learn to focus on the audience along with the hardware3. IdenPfy basic steps you can take today to improve how
you approach designing mobile navigaPon systems
![Page 4: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/4.jpg)
So Why Did You Show Up Today?
![Page 5: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/5.jpg)
![Page 6: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/6.jpg)
![Page 7: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/7.jpg)
Unlearn What?
![Page 8: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/8.jpg)
![Page 9: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/9.jpg)
#1 Most Important Design Consideration
for Navigation?
![Page 10: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/10.jpg)
The Three Minute Rule
![Page 11: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/11.jpg)
Tech Considera3ons• Divergent hardware• Wide variety of operaPng systems and browsers
• User-‐Input
Other Considera3ons• Users oQen misbehave, and they don’t follow the path that you expect
• What is the content? Actually does it maTer?
• Who is your audience?• The 3-‐minute rule
What Else to Consider When Designing Navigation Systems
![Page 12: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/12.jpg)
Why Haven’t I Seen a Phone Yet!?!
![Page 13: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/13.jpg)
Because Steve Said So
![Page 14: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/14.jpg)
Back to the Considerations...
![Page 15: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/15.jpg)
Mind Reading 101
![Page 16: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/16.jpg)
![Page 17: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/17.jpg)
How Many People Here Want to Hot
Wire a Light Switch?
![Page 18: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/18.jpg)
![Page 19: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/19.jpg)
93%
7%
No Absolutely Not
![Page 20: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/20.jpg)
How to Get Started Today
• Throw out what you think you know• Then Start fresh...• Then start over...• Then do it again...• The rest is easy
![Page 21: Design for Mobile 2010 - Navigation Design for Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103121/55d532f6bb61eb335f8b458f/html5/thumbnails/21.jpg)
Thanks!
Hash tag #d4m2010
Follow @ryanunger & @punchkickmobile