Top Banner
Lessons from WolfWalk: Interface Design for Tablets Cory Lown NCSU Libraries edUi 2011 14 October
71
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lessons From WolfWalk: Interface Design for Tablets

Lessons from WolfWalk: Interface Design for Tablets

Cory Lown NCSU Libraries

edUi 2011 14 October

Page 2: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 3: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 4: Lessons From WolfWalk: Interface Design for Tablets

WolfWalk Concept

Provide a user-friendly way for people to learn about the

history of NC State, while exploring campus.

Page 5: Lessons From WolfWalk: Interface Design for Tablets

Albums from UA023.005 Campus Views and Facilities Sub-Group, NCSU Special Collections Research Center"

Page 6: Lessons From WolfWalk: Interface Design for Tablets

Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"

Page 7: Lessons From WolfWalk: Interface Design for Tablets

Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"

Page 8: Lessons From WolfWalk: Interface Design for Tablets

WolfWalk 1.0

•  Released March 2010 •  Location-aware •  Two flavors •  Mobile web •  Native iPhone/iPod Touch

Page 9: Lessons From WolfWalk: Interface Design for Tablets

WolfWalk 1.1

•  Released June 2011 •  Location-aware •  Three flavors •  Mobile web •  Native iPhone/iPod Touch •  Native iPad

Page 10: Lessons From WolfWalk: Interface Design for Tablets

WolfWalk 1.1

•  Released June 2011 •  Location-aware •  Three flavors •  Mobile web •  Native iPhone/iPod Touch •  Native iPad

Page 11: Lessons From WolfWalk: Interface Design for Tablets
Page 12: Lessons From WolfWalk: Interface Design for Tablets
Page 13: Lessons From WolfWalk: Interface Design for Tablets
Page 14: Lessons From WolfWalk: Interface Design for Tablets
Page 15: Lessons From WolfWalk: Interface Design for Tablets
Page 16: Lessons From WolfWalk: Interface Design for Tablets
Page 17: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 18: Lessons From WolfWalk: Interface Design for Tablets

Conceptual approach

An iPad is a big iPhone, right?

Page 19: Lessons From WolfWalk: Interface Design for Tablets
Page 20: Lessons From WolfWalk: Interface Design for Tablets

Conceptual approach, revised.

An iPad is something else.

Page 21: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 22: Lessons From WolfWalk: Interface Design for Tablets

Mail for iPhone/iPod

Page 23: Lessons From WolfWalk: Interface Design for Tablets
Page 24: Lessons From WolfWalk: Interface Design for Tablets
Page 25: Lessons From WolfWalk: Interface Design for Tablets
Page 26: Lessons From WolfWalk: Interface Design for Tablets
Page 27: Lessons From WolfWalk: Interface Design for Tablets

Mail for iPad

Page 28: Lessons From WolfWalk: Interface Design for Tablets
Page 29: Lessons From WolfWalk: Interface Design for Tablets
Page 30: Lessons From WolfWalk: Interface Design for Tablets
Page 31: Lessons From WolfWalk: Interface Design for Tablets
Page 32: Lessons From WolfWalk: Interface Design for Tablets
Page 33: Lessons From WolfWalk: Interface Design for Tablets
Page 34: Lessons From WolfWalk: Interface Design for Tablets

Apple Mail for iPad

Page 35: Lessons From WolfWalk: Interface Design for Tablets

Apple Mail for iPad

•  Prioritize content

Page 36: Lessons From WolfWalk: Interface Design for Tablets

Apple Mail for iPad

•  Prioritize content

•  Flatten the hierarchy

Page 37: Lessons From WolfWalk: Interface Design for Tablets

Apple Mail for iPad

•  Prioritize content

•  Flatten the hierarchy

•  Minimize full page transitions

Page 38: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 39: Lessons From WolfWalk: Interface Design for Tablets
Page 40: Lessons From WolfWalk: Interface Design for Tablets
Page 41: Lessons From WolfWalk: Interface Design for Tablets
Page 42: Lessons From WolfWalk: Interface Design for Tablets
Page 43: Lessons From WolfWalk: Interface Design for Tablets

Details

Page 44: Lessons From WolfWalk: Interface Design for Tablets
Page 45: Lessons From WolfWalk: Interface Design for Tablets
Page 46: Lessons From WolfWalk: Interface Design for Tablets
Page 47: Lessons From WolfWalk: Interface Design for Tablets
Page 48: Lessons From WolfWalk: Interface Design for Tablets
Page 49: Lessons From WolfWalk: Interface Design for Tablets
Page 50: Lessons From WolfWalk: Interface Design for Tablets
Page 51: Lessons From WolfWalk: Interface Design for Tablets
Page 52: Lessons From WolfWalk: Interface Design for Tablets
Page 53: Lessons From WolfWalk: Interface Design for Tablets
Page 54: Lessons From WolfWalk: Interface Design for Tablets

Outline

•  WolfWalk overview •  First tablet design •  Tablets are different •  WolfWalk for iPad •  Tablets and the Web

Page 55: Lessons From WolfWalk: Interface Design for Tablets
Page 56: Lessons From WolfWalk: Interface Design for Tablets
Page 57: Lessons From WolfWalk: Interface Design for Tablets
Page 58: Lessons From WolfWalk: Interface Design for Tablets

jQuery Mobile

•  Touch optimized interface widgets at low cost

•  Cross platform support •  Familiar HTML /

JavaScript development

Page 59: Lessons From WolfWalk: Interface Design for Tablets
Page 60: Lessons From WolfWalk: Interface Design for Tablets
Page 61: Lessons From WolfWalk: Interface Design for Tablets
Page 62: Lessons From WolfWalk: Interface Design for Tablets
Page 63: Lessons From WolfWalk: Interface Design for Tablets
Page 64: Lessons From WolfWalk: Interface Design for Tablets
Page 65: Lessons From WolfWalk: Interface Design for Tablets
Page 66: Lessons From WolfWalk: Interface Design for Tablets
Page 67: Lessons From WolfWalk: Interface Design for Tablets
Page 68: Lessons From WolfWalk: Interface Design for Tablets
Page 69: Lessons From WolfWalk: Interface Design for Tablets
Page 70: Lessons From WolfWalk: Interface Design for Tablets
Page 71: Lessons From WolfWalk: Interface Design for Tablets

Thanks!

Cory Lown NCSU Libraries [email protected]