![Page 1: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/1.jpg)
Lessons from WolfWalk: Interface Design for Tablets
Cory Lown NCSU Libraries
edUi 2011 14 October
![Page 2: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/5.jpg)
Albums from UA023.005 Campus Views and Facilities Sub-Group, NCSU Special Collections Research Center"
![Page 6: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/6.jpg)
Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"
![Page 7: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/7.jpg)
Jason Casden, lead developer for WolfWalk, at the NCSU Memorial Tower"
![Page 8: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/11.jpg)
![Page 12: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/12.jpg)
![Page 13: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/13.jpg)
![Page 14: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/14.jpg)
![Page 15: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/15.jpg)
![Page 16: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/16.jpg)
![Page 17: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/18.jpg)
Conceptual approach
An iPad is a big iPhone, right?
![Page 19: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/19.jpg)
![Page 20: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/20.jpg)
Conceptual approach, revised.
An iPad is something else.
![Page 21: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/22.jpg)
Mail for iPhone/iPod
![Page 23: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/23.jpg)
![Page 24: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/24.jpg)
![Page 25: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/25.jpg)
![Page 26: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/26.jpg)
![Page 27: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/27.jpg)
Mail for iPad
![Page 28: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/28.jpg)
![Page 29: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/29.jpg)
![Page 30: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/30.jpg)
![Page 31: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/31.jpg)
![Page 32: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/32.jpg)
![Page 33: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/33.jpg)
![Page 34: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/34.jpg)
Apple Mail for iPad
![Page 35: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/35.jpg)
Apple Mail for iPad
• Prioritize content
![Page 36: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/36.jpg)
Apple Mail for iPad
• Prioritize content
• Flatten the hierarchy
![Page 37: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/37.jpg)
Apple Mail for iPad
• Prioritize content
• Flatten the hierarchy
• Minimize full page transitions
![Page 38: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/38.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/39.jpg)
![Page 40: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/40.jpg)
![Page 41: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/41.jpg)
![Page 42: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/42.jpg)
![Page 43: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/43.jpg)
Details
![Page 44: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/44.jpg)
![Page 45: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/45.jpg)
![Page 46: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/46.jpg)
![Page 47: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/47.jpg)
![Page 48: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/48.jpg)
![Page 49: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/49.jpg)
![Page 50: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/50.jpg)
![Page 51: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/51.jpg)
![Page 52: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/52.jpg)
![Page 53: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/53.jpg)
![Page 54: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/54.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/55.jpg)
![Page 56: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/56.jpg)
![Page 57: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/57.jpg)
![Page 58: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/58.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/59.jpg)
![Page 60: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/60.jpg)
![Page 61: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/61.jpg)
![Page 62: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/62.jpg)
![Page 63: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/63.jpg)
![Page 64: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/64.jpg)
![Page 65: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/65.jpg)
![Page 66: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/66.jpg)
![Page 67: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/67.jpg)
![Page 68: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/68.jpg)
![Page 69: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/69.jpg)
![Page 70: Lessons From WolfWalk: Interface Design for Tablets](https://reader033.vdocuments.site/reader033/viewer/2022052821/55497979b4c905dd558b5b36/html5/thumbnails/70.jpg)