Lessons from WolfWalk: Interface Design for Tablets
Cory Lown NCSU Libraries
edUi 2011 14 October
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
WolfWalk Concept
Provide a user-friendly way for people to learn about the
history of NC State, while exploring campus.
Albums from UA023.005 Campus Views and Facilities Sub-Group, NCSU Special Collections Research Center"
Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"
Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"
WolfWalk 1.0
• Released March 2010 • Location-aware • Two flavors • Mobile web • Native iPhone/iPod Touch
WolfWalk 1.1
• Released June 2011 • Location-aware • Three flavors • Mobile web • Native iPhone/iPod Touch • Native iPad
WolfWalk 1.1
• Released June 2011 • Location-aware • Three flavors • Mobile web • Native iPhone/iPod Touch • Native iPad
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
Conceptual approach
An iPad is a big iPhone, right?
Conceptual approach, revised.
An iPad is something else.
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
Mail for iPhone/iPod
Mail for iPad
Apple Mail for iPad
Apple Mail for iPad
• Prioritize content
Apple Mail for iPad
• Prioritize content
• Flatten the hierarchy
Apple Mail for iPad
• Prioritize content
• Flatten the hierarchy
• Minimize full page transitions
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
Details
Outline
• WolfWalk overview • First tablet design • Tablets are different • WolfWalk for iPad • Tablets and the Web
jQuery Mobile
• Touch optimized interface widgets at low cost
• Cross platform support • Familiar HTML /
JavaScript development