Relation between interaction flows and the three basic questions of information architecture -- Where am I? What can I do here? Where can I go from here? Lecture slides for Fall 2016 course INFO-I 300: Human-Computer Interaction/Interaction Design at Indiana University Bloomington, School of Informatics and Computing. Instructor of record: Omar Sosa-Tzec, PhD Candidate in Informatics (HCI Design).

1. Navigation
Three basic questions in IA
OmarSosa-Tzec
School of Informatics & Computing
Indiana University Bloomington
info i300 Human-Computer Interaction
Fall 2016

2. Today's
Picks

3. UX Booth
http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

4. ACM Interactions
http://interactions.acm.org/

5. UXPA
https://uxpa.org/

6. IxDA
http://www.ixda.org/

7. Midwest UX Conference
http://2016.midwestuxconference.com/

8. Last
Class

10. https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
Ryan Singer's Approach

11. Empty trash can

12. Empty trash can
-Drag files
into trash can

13. Empty trash can
-Drag files
into trash can
Full trash can

14. Empty trash can
-Drag files
into trash can
Full trash can
-Right click

15. Full trash can
-Right click

16. Full trash can
-Right click
Contextual
Menu

17. Full trash can
-Right click
Contextual
Menu
-Click“Open”
-Click“Empty Trash”

18. Contextual
Menu
-Click on“Open”
-Click on“Empty Trash”

19. Contextual
Menu
-Click on“Open”
-Click on“Empty Trash”
Trash can
Window

20. Contextual
Menu
-Click on“Open”
-Click on“Empty Trash”
Trash can
Window
-Click on“Empty”
-Sort items by name,
date,size,and kind

21. 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

22. 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 into
the trash can

23. 3Basic
Questions
Based on Ding & Lin (2010 and Rosenfeld et al.(2015)

24. What the
user sees
What the
user does
at the
r sees
at the
does
Wha
user
Wha
user

25. What the
user sees
What the
user does
at the
r sees
at the
does
Wha
user
Wha
user

26. What the
user sees
What the
user does
at the
r sees
at the
does
Wha
user
Wha
user
WhereamI?

27. What the
user sees
What the
user does
at the
r sees
at the
does
Wha
user
Wha
user
WhatcanIdo?

28. What the
user sees
What the
user does
at the
r sees
at the
does
Wha
user
Wha
user
WherecanIgo
fromhere?

29. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

30. WhereamI?
WhatcanIdo?
WherecanIgofromhere?
Orientation

31. WhereamI?
WhatcanIdo?
WherecanIgofromhere?
Orientation
Content,Interaction,Search

32. WhereamI?
WhatcanIdo?
WherecanIgofromhere?
Orientation
Content,Interaction,Search
Global,Local,and Associative Navigation

33. Let'ssee…

34. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

35. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

36. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

37. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

38. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

39. WhereamI?
WhatcanIdo?
WherecanIgofromhere?

40. WhereamI? - WhatcanIdo? - WherecanIgofromhere?

41. WhereamI? - WhatcanIdo? - WherecanIgofromhere?

42. In-class
Activity

43. •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)

44. •Sketch the UI of an app or website
that you use frequently
•You may like it or hate it

45. •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.

46. •Remember to add the basic
sketchnote info: your name,
class,and date.
•Turn in the sketch at the end of
the class

47. Questions
&Participation

48. •Does your app/website answers
the questions properly?
•Why? Why not?
•What is great?
•What is missing?

49. •Did you notice a hierarchy or
structure in the navigation?
•Where?
•How is it implemented?

50. •What form does the app/website
uses to“answer”the three
questions?
•Text? Icons? Something weird?
•Where? When?

51. Thanks!
@omitzec
tzec.com
* Some images are taken from the Web for
illustration and pedagogical purposes only