1. CS 4963: UI Design Interaction Design, Part 2

2. Today: What is Interaction Design, anyways? How do we do interaction design? – Fundamentals and Building Blocks – Heuristics and Patterns Wrap up Agile UX Deliverables and practices Documentation

3. BUT FIRST

6. …so not a lot of images today.

7. agile ux

8. design 1 to 2 iterations ahead

9. hardening iteration

10. (From Budwig, Jeong, Kelkar.)

11. (not yet right.)

12. story team is important

13. (everyone is figuring it out)

14. most important is having overall vision

15. SKETCHING AND PROTOTYPING

16. sketching is brainstorming

17. prototypes are interactive

18. “I can always animate that interaction faster than you can code it.” —Chris Bernard, Microsoft UX Evangelist

19. sketching

20. thinking visually

21. low-fi vs. high-fi

22. sketching notations

23. doesn’t have to be on paper

24. video sketches

25. participatory design

26. design jams

27. prototyping

28. paper prototypes

29. (choose your own adventure)

30. code prototypes

31. ideally want to carry over things

32. styles and resources

33. animation (!!!)

34. tools

35. THERE ARE A LOT OF THEM

36. shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice- which-prototyping-tool-is-right-for-you

37. shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice- which-prototyping-tool-is-right-for-you shootout of prototyping tools

38. pick what’s appropriate to your project

39. I <3 SketchFlow

40. processing.org & variants

41. if you’re making a web page, prototype in markup

42. jQuery, et al. ixedit

43. DOCUMENTATION

44. documentation is communication

45. think about the why

46. do what makes sense

47. old school: giant spec docs

48. each screen

49. detailed lists of assets on each screen

50. actions for every interactive element

51. states for screens and app

52. transitions between all states

53. etc.

54. all kept in a change-tracked word doc (or series of PDFs)

55. new school: ?

56. new school: living documents!

57. guess what?

58. still needs most of the same information

59. focus on patterns

60. common elements

61. common behaviors

62. show can be better than tell

63. how to record?

64. what does your technology support for inline ixd patterns/documentation?

65. version control

66. (pixelnovel = psd + svn) http://www.pixelnovel.com/

67. (dropbox = fileshare + versioning) http://www.getdropbox.com/tour

68. word doc

69. wiki

70. blog

71. bliki?

72. how do you want to document?

73. lots of images

74. walkthroughs

75. screenshare/screencast can be faster

76. ( be fast! )

77. comments and feedback

78. …from whom?

79. timestamps

80. design decisions

81. DESIGN DECISIONS

82. design journal

83. time-based?

84. feature-based?

85. whatever works for your project

86. keep feedback manageable by sorting, organizing, or landmarking

87. remember ( be fast! ) ?

88. be detailed

89. detailed enough

90. be clear

91. documentation is communication

92. now you know what to expect

93. ask your designers

94. that’s it.

95. CLASS PROJECT

96. For next time… 1.Next time is spring break. 2. Readings for next lesson: on the class blog. (May have guest lecturer.)

97. Contact Us Matthias Shapiro matthias.shapiro@gmail.com Jason Alderman Jason.alderman@utah.edu http://huah.net/cs4963