The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of...
Transcript of The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of...
![Page 1: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/1.jpg)
The Layers of User Experience(What is there to design in an interactive product?)
ID 405: Human-Computer InteractionSpring 2015
Venkatesh Rajamanickam (@venkatrajam)
http://info-design-lab.github.io/ID405-HCI/
![Page 2: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/2.jpg)
© IDC, IIT Bombay
Jesse James Garrett,
The Elements of User Experience
New Riders (2003)
Second edition (2010)
http://www.jjg.net/elements/
![Page 3: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/3.jpg)
© IDC, IIT Bombay
Surface Plane
![Page 4: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/4.jpg)
© IDC, IIT Bombay
Surface Plane
Skeleton Plane
![Page 5: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/5.jpg)
© IDC, IIT Bombay
Surface Plane
Skeleton Plane
Structure Plane
![Page 6: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/6.jpg)
© IDC, IIT Bombay
Surface Plane
Skeleton Plane
Structure Plane
Scope Plane
![Page 7: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/7.jpg)
© IDC, IIT Bombay
Surface Plane
Skeleton Plane
Structure Plane
Scope Plane
Strategy Plane
![Page 8: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/8.jpg)
© IDC, IIT Bombay
Sell books
Be the place to find books
Encourage return customers
Sell other non-touch-and-feel goods
Assimilate competition
![Page 9: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/9.jpg)
© IDC, IIT Bombay
Shopping cart
Book reviews
Cross reference books
Remember addresses
Recommendations
Wish list and promos
Second-hand books
CDs, DVDs, Segway
Partner programs
![Page 10: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/10.jpg)
© IDC, IIT Bombay
Book Intros
Book Details
Book Intros
Book Details
Book Intros
Book Details
Book Intros
Book Details
Amazon
Home
Anirudha’s
Amazon
Recos for
Anirudha
Anirudha’s
Wishlist
Shopping
Cart
Settings (Addresses, Email,
Preferences...)
Checkout
...
![Page 11: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/11.jpg)
© IDC, IIT Bombay
![Page 12: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/12.jpg)
© IDC, IIT Bombay
![Page 13: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/13.jpg)
© IDC, IIT Bombay
![Page 14: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/14.jpg)
© IDC, IIT Bombay
![Page 15: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/15.jpg)
© IDC, IIT Bombay
![Page 16: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/16.jpg)
© IDC, IIT Bombay
![Page 17: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/17.jpg)
© IDC, IIT Bombay
Concrete
Abstract
![Page 18: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/18.jpg)
© IDC, IIT Bombay
Functionality Information
![Page 19: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/19.jpg)
© IDC, IIT Bombay
User needs
Product objectives
Why are we making this?
![Page 20: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/20.jpg)
© IDC, IIT Bombay
Functional specification
Content requirements
What are we making when?
![Page 21: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/21.jpg)
© IDC, IIT Bombay
Interaction design
![Page 22: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/22.jpg)
© IDC, IIT Bombay
![Page 23: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/23.jpg)
© IDC, IIT Bombay
![Page 24: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/24.jpg)
© IDC, IIT Bombay
![Page 25: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/25.jpg)
© IDC, IIT Bombay
Interaction design
Information architecture
![Page 26: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/26.jpg)
![Page 27: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/27.jpg)
© IDC, IIT Bombay
Interaction design
Information architecture
How does the product fit in the
life of the user?
![Page 28: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/28.jpg)
© IDC, IIT Bombay
Interface design
![Page 29: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/29.jpg)
© IDC, IIT Bombay
![Page 30: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/30.jpg)
© IDC, IIT Bombay
![Page 31: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/31.jpg)
© IDC, IIT Bombay
Interface design
Information design
![Page 32: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/32.jpg)
© IDC, IIT Bombay
![Page 33: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/33.jpg)
© IDC, IIT Bombay
Interface design
Information design
Navigation design
![Page 34: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/34.jpg)
![Page 35: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/35.jpg)
© IDC, IIT Bombay
Interface design
Information design
Navigation design
![Page 36: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/36.jpg)
© IDC, IIT Bombay
Sensory design
![Page 37: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/37.jpg)
© IDC, IIT Bombay
![Page 38: The Layers of User Experience - GitHub Pagesinfo-design-lab.github.io/ID405-HCI/files/05_Layers of User Experienc… · The Layers of User Experience (What is there to design in an](https://reader034.fdocuments.net/reader034/viewer/2022042400/5f0f20ea7e708231d442a15f/html5/thumbnails/38.jpg)
© IDC, IIT Bombay