ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Lessons From WolfWalk: Interface Design for Tablets

•
•
C
Cory Lown

This document discusses the design of WolfWalk, an app that provides information about NC State University's campus, for tablets. It describes how the initial WolfWalk app design treated the iPad like a large iPhone, but outlines how the iPad interface was redesigned to prioritize content, flatten hierarchies, and minimize full page transitions based on lessons from Apple's iPad Mail app. The document also notes how jQuery Mobile was used to create a touch-optimized interface while maintaining cross-platform support and familiar HTML/JavaScript development.

1 of 71
Downloaded 10 times
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
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
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?
Lessons From WolfWalk: Interface Design for Tablets
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
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Mail for iPad
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
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
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Details
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Outline •  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
jQuery Mobile •  Touch optimized interface widgets at low cost •  Cross platform support •  Familiar HTML / JavaScript development
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Lessons From WolfWalk: Interface Design for Tablets
Thanks! Cory Lown NCSU Libraries cory_lown@ncsu.edu

More Related Content

Lessons From WolfWalk: Interface Design for Tablets