user experience design, navigation, and interaction flows
TRANSCRIPT
NavigationThree basic questions in IA
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i300 Human-Computer Interaction Fall 2016
Today's Picks
UX Booth
http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
LastClass
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
Ryan Singer's Approach
Empty trash can
Empty trash can
- Drag files into trash can
Empty trash can
- Drag files into trash can
Full trash can
Empty trash can
- Drag files into trash can
Full trash can
- Right click
Full trash can
- Right click
Full trash can
- Right click
Contextual Menu
Full trash can
- Right click
Contextual Menu
- Click “Open” - Click “Empty Trash”
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
Contextual Menu
- Click on “Open” - Click on “Empty Trash”
Trash can Window
- Click on “Empty” - Sort items by name,date, size, and kind
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
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
3 Basic Questions
Based on Ding & Lin (2010 and Rosenfeld et al. (2015)
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 the user sees
What the user does
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 the user sees
What the user does
What the user sees
What the user does
Where am I?
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?
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?
Where am I?
What can I do?
Where can I go from here?
Where am I?
What can I do?
Where can I go from here?
Orientation
Where am I?
What can I do?
Where can I go from here?
Orientation
Content, Interaction, Search
Where am I?
What can I do?
Where can I go from here?
Orientation
Content, Interaction, Search
Global, Local, and Associative Navigation
Let's see…
Where am I? What can I do? Where can I go from here?
Where am I? What can I do? Where can I go from here?
Where am I? What can I do? Where can I go from here?
Where am I? What can I do? Where can I go from here?
Where am I? What can I do? Where can I go from here?
Where am I? What can I do? Where can I go from here?
Where am I? - What can I do? - Where can I go from here?
Where am I? - What can I do? - Where can I go from here?
In-class Activity
•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)
•Sketch the UI of an app or website that you use frequently
•You may like it or hate it
•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.
•Remember to add the basic sketchnote info: your name, class, and date.
•Turn in the sketch at the end of the class
Questions & Participation
•Does your app/website answers the questions properly?
•Why? Why not?
•What is great?
•What is missing?
•Did you notice a hierarchy or structure in the navigation?
•Where?
•How is it implemented?
•What form does the app/website uses to “answer” the three questions?
•Text? Icons? Something weird?
•Where? When?
Thanks!
@omitzec tzec.com
* Some images are taken from the Web for illustration and pedagogical purposes only