Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience Design, Navigation, and Interaction Flows

1,578 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

User Experience Design, Navigation, and Interaction Flows

  1. 1. Navigation Three basic questions in IA OmarSosa-Tzec School of Informatics & Computing Indiana University Bloomington info i300 Human-Computer Interaction Fall 2016
  2. 2. Today's Picks
  3. 3. UX Booth http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
  4. 4. ACM Interactions http://interactions.acm.org/
  5. 5. UXPA https://uxpa.org/
  6. 6. IxDA http://www.ixda.org/
  7. 7. Midwest UX Conference http://2016.midwestuxconference.com/
  8. 8. Last
 Class
  9. 9. https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows Ryan Singer's Approach
  10. 10. Empty trash can
  11. 11. Empty trash can -Drag files into trash can
  12. 12. Empty trash can -Drag files into trash can Full trash can
  13. 13. Empty trash can -Drag files into trash can Full trash can -Right click
  14. 14. Full trash can -Right click
  15. 15. Full trash can -Right click Contextual Menu
  16. 16. Full trash can -Right click Contextual Menu -Click“Open” -Click“Empty Trash”
  17. 17. Contextual Menu -Click on“Open” -Click on“Empty Trash”
  18. 18. Contextual Menu -Click on“Open” -Click on“Empty Trash” Trash can Window
  19. 19. Contextual Menu -Click on“Open” -Click on“Empty Trash” Trash can Window -Click on“Empty” -Sort items by name,
 date,size,and kind
  20. 20. 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
  21. 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 -Drag files into
 the trash can
  22. 22. 3Basic Questions Based on Ding & Lin (2010 and Rosenfeld et al.(2015)
  23. 23. What the user sees What the user does at the r sees at the does Wha user Wha user
  24. 24. What the user sees What the user does at the r sees at the does Wha user Wha user
  25. 25. What the user sees What the user does at the r sees at the does Wha user Wha user WhereamI?
  26. 26. What the user sees What the user does at the r sees at the does Wha user Wha user WhatcanIdo?
  27. 27. What the user sees What the user does at the r sees at the does Wha user Wha user WherecanIgo fromhere?
  28. 28. WhereamI? WhatcanIdo? WherecanIgofromhere?
  29. 29. WhereamI? WhatcanIdo? WherecanIgofromhere? Orientation
  30. 30. WhereamI? WhatcanIdo? WherecanIgofromhere? Orientation Content,Interaction,Search
  31. 31. WhereamI? WhatcanIdo? WherecanIgofromhere? Orientation Content,Interaction,Search Global,Local,and Associative Navigation
  32. 32. Let'ssee…
  33. 33. WhereamI? WhatcanIdo? WherecanIgofromhere?
  34. 34. WhereamI? WhatcanIdo? WherecanIgofromhere?
  35. 35. WhereamI? WhatcanIdo? WherecanIgofromhere?
  36. 36. WhereamI? WhatcanIdo? WherecanIgofromhere?
  37. 37. WhereamI? WhatcanIdo? WherecanIgofromhere?
  38. 38. WhereamI? WhatcanIdo? WherecanIgofromhere?
  39. 39. WhereamI? - WhatcanIdo? - WherecanIgofromhere?
  40. 40. WhereamI? - WhatcanIdo? - WherecanIgofromhere?
  41. 41. In-class Activity
  42. 42. •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)
  43. 43. •Sketch the UI of an app or website that you use frequently •You may like it or hate it
  44. 44. •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.
  45. 45. •Remember to add the basic sketchnote info: your name, class,and date. •Turn in the sketch at the end of the class
  46. 46. Questions &Participation
  47. 47. •Does your app/website answers the questions properly? •Why? Why not? •What is great? •What is missing?
  48. 48. •Did you notice a hierarchy or structure in the navigation? •Where? •How is it implemented?
  49. 49. •What form does the app/website uses to“answer”the three questions? •Text? Icons? Something weird? •Where? When?
  50. 50. Thanks! @omitzec tzec.com * Some images are taken from the Web for illustration and pedagogical purposes only

×