Downloaded 18 times
Uploaded byOmar Sosa-Tzec
User Experience Design, Navigation, and Interaction Flows
The document outlines a class on human-computer interaction, emphasizing the importance of navigation by discussing three essential user questions: 'Where am I?', 'What can I do?', and 'Where can I go from here?'. It incorporates an in-class activity focused on sketching UI designs of familiar apps or websites to evaluate how effectively they answer these questions. Additionally, it underscores the need for participants to reflect on the navigation structure and the mediums used to convey information, such as text and icons.
More Related Content
Similar to User Experience Design, Navigation, and Interaction Flows
User Experience Design, Navigation, and Interaction Flows
- 1. Navigation Three basic questionsin IA OmarSosa-Tzec School of Informatics & Computing Indiana University Bloomington info i300 Human-Computer Interaction Fall 2016
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 10.
- 11.
- 12. Empty trash can -Dragfiles into trash can
- 13. Empty trash can -Dragfiles into trash can Full trash can
- 14. Empty trash can -Dragfiles into trash can Full trash can -Right click
- 15.
- 16. Full trash can -Rightclick Contextual Menu
- 17. Full trash can -Rightclick Contextual Menu -Click“Open” -Click“Empty Trash”
- 18.
- 19. Contextual Menu -Click on“Open” -Click on“EmptyTrash” Trash can Window
- 20. Contextual Menu -Click on“Open” -Click on“EmptyTrash” Trash can Window -Click on“Empty” -Sort items by name, date,size,and kind
- 21. Contextual Menu -Click on“Open” -Click on“EmptyTrash” 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“EmptyTrash” 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 Whatthe user does at the r sees at the does Wha user Wha user
- 25. What the user sees Whatthe user does at the r sees at the does Wha user Wha user
- 26. What the user sees Whatthe user does at the r sees at the does Wha user Wha user WhereamI?
- 27. What the user sees Whatthe user does at the r sees at the does Wha user Wha user WhatcanIdo?
- 28. What the user sees Whatthe user does at the r sees at the does Wha user Wha user WherecanIgo fromhere?
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. WhereamI? - WhatcanIdo?- WherecanIgofromhere?
- 41. WhereamI? - WhatcanIdo?- WherecanIgofromhere?
- 42.
- 43. •We want youto 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 UIof an app or website that you use frequently •You may like it or hate it
- 45. •Show and explainhow 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 addthe basic sketchnote info: your name, class,and date. •Turn in the sketch at the end of the class
- 47.
- 48. •Does your app/websiteanswers the questions properly? •Why? Why not? •What is great? •What is missing?
- 49. •Did you noticea hierarchy or structure in the navigation? •Where? •How is it implemented?
- 50. •What form doesthe app/website uses to“answer”the three questions? •Text? Icons? Something weird? •Where? When?
- 51. Thanks! @omitzec tzec.com * Some imagesare taken from the Web for illustration and pedagogical purposes only