user experience design, navigation, and interaction flows
TRANSCRIPT
![Page 1: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/1.jpg)
NavigationThree basic questions in IA
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i300 Human-Computer Interaction Fall 2016
![Page 2: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/2.jpg)
Today's Picks
![Page 3: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/3.jpg)
UX Booth
http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
![Page 8: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/8.jpg)
LastClass
![Page 9: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/9.jpg)
![Page 10: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/10.jpg)
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
Ryan Singer's Approach
![Page 11: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/11.jpg)
Empty trash can
![Page 12: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/12.jpg)
Empty trash can
- Drag files into trash can
![Page 13: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/13.jpg)
Empty trash can
- Drag files into trash can
Full trash can
![Page 14: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/14.jpg)
Empty trash can
- Drag files into trash can
Full trash can
- Right click
![Page 15: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/15.jpg)
Full trash can
- Right click
![Page 16: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/16.jpg)
Full trash can
- Right click
Contextual Menu
![Page 17: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/17.jpg)
Full trash can
- Right click
Contextual Menu
- Click “Open” - Click “Empty Trash”
![Page 18: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/18.jpg)
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
![Page 19: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/19.jpg)
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
![Page 20: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/20.jpg)
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
- Click on “Empty” - Sort items by name,date, size, and kind
![Page 21: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/21.jpg)
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
- Click on “Empty” - Sort items by name,date, size, and kind
Empty trash can
![Page 22: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/22.jpg)
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
- Click on “Empty” - Sort items by name,date, size, and kind
Empty trash can
- Drag files intothe trash can
![Page 23: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/23.jpg)
3 Basic Questions
Based on Ding & Lin (2010 and Rosenfeld et al. (2015)
![Page 24: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/24.jpg)
What the user sees
What the user does
What the user sees
What the user does
What the user sees
What the user does
![Page 25: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/25.jpg)
What the user sees
What the user does
What the user sees
What the user does
What the user sees
What the user does
![Page 26: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/26.jpg)
What the user sees
What the user does
What the user sees
What the user does
What the user sees
What the user does
Where am I?
![Page 27: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/27.jpg)
What the user sees
What the user does
What the user sees
What the user does
What the user sees
What the user does
What can I do?
![Page 28: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/28.jpg)
What the user sees
What the user does
What the user sees
What the user does
What the user sees
What the user does
Where can I go from here?
![Page 29: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/29.jpg)
Where am I?
What can I do?
Where can I go from here?
![Page 30: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/30.jpg)
Where am I?
What can I do?
Where can I go from here?
Orientation
![Page 31: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/31.jpg)
Where am I?
What can I do?
Where can I go from here?
Orientation
Content, Interaction, Search
![Page 32: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/32.jpg)
Where am I?
What can I do?
Where can I go from here?
Orientation
Content, Interaction, Search
Global, Local, and Associative Navigation
![Page 33: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/33.jpg)
Let's see…
![Page 34: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/34.jpg)
Where am I? What can I do? Where can I go from here?
![Page 35: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/35.jpg)
Where am I? What can I do? Where can I go from here?
![Page 36: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/36.jpg)
Where am I? What can I do? Where can I go from here?
![Page 37: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/37.jpg)
Where am I? What can I do? Where can I go from here?
![Page 38: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/38.jpg)
Where am I? What can I do? Where can I go from here?
![Page 39: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/39.jpg)
Where am I? What can I do? Where can I go from here?
![Page 40: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/40.jpg)
Where am I? - What can I do? - Where can I go from here?
![Page 41: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/41.jpg)
Where am I? - What can I do? - Where can I go from here?
![Page 42: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/42.jpg)
In-class Activity
![Page 43: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/43.jpg)
•We want you to improve your sketching, so execute it carefully
• We want you to improve your sketchnoting, so practice the hierarchization, arrangement, and presentation of info (notes)
![Page 44: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/44.jpg)
•Sketch the UI of an app or website that you use frequently
•You may like it or hate it
![Page 45: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/45.jpg)
•Show and explain how and where the UI design helps the user answer the three basic IA questions: where am I? what can I do? Where can I go from here?
• Use arrows, boxes, bubbles, different type styles, etc.
![Page 46: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/46.jpg)
•Remember to add the basic sketchnote info: your name, class, and date.
•Turn in the sketch at the end of the class
![Page 47: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/47.jpg)
Questions & Participation
![Page 48: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/48.jpg)
•Does your app/website answers the questions properly?
•Why? Why not?
•What is great?
•What is missing?
![Page 49: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/49.jpg)
•Did you notice a hierarchy or structure in the navigation?
•Where?
•How is it implemented?
![Page 50: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/50.jpg)
•What form does the app/website uses to “answer” the three questions?
•Text? Icons? Something weird?
•Where? When?
![Page 51: User Experience Design, Navigation, and Interaction Flows](https://reader036.vdocument.in/reader036/viewer/2022062503/5886f15d1a28abba528b6cf9/html5/thumbnails/51.jpg)
Thanks!
@omitzec tzec.com
* Some images are taken from the Web for illustration and pedagogical purposes only