School of Visual Arts Basics of Interaction Design + Strategy Fall 2011 Anh Dang

1. Let’s eat!
LUNCH
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

2. Introduction
Morning
• Basics
• Discovery 10:30-11am
– Landscape Audit
• Design Challenge 11am-1pm
• Team Exploration: Navigation
• Team Review
• Lunch Break 1-1:45pm
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

3. Introduction
Afternoon
• Design Challenge 2-3:30pm
– Site Review
– Team Evaluation: E-commerce
• Mobile Challenge 3:30-5pm
– Team Exploration: Mobile Designs
– Team Review
• QA 5pm
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

4. EXPLORE: Design Challenge Information Design
Design Challenge
• Information Design
• Transaction Design
– Site Review
– Team Evaluation
– Review Noteworthy Practices
• Mobile Design
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

5. EXPLORE: Design Challenge Design
1 Team of 20
X 4 WONDERFUL
WELLS
X 4 X 4
GALLANT
HONORABLE
HONEY BEES
X 4
GOATS
X 4
SPECTACULAR
SEEDS
COURAGEOUS
CAMELS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

6. EXPLORE: Site Review
Gift* r
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

7. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

8. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

9. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

10. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

11. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

12. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

13. EXPLORE: Site Review
Women & Children Moms
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

14. EXPLORE: Site Review
Women & Children Moms
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

15. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

16. EXPLORE: Site Review
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

17. Oxfam EXPLORE: Site Review
Category
Product
???
Home
Page
Page
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

18. Let’s buy!
E-COMMERCE
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

19. Home Page EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

20. Gift Guide Landing Page EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

21. Product Details EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

22. Product Details EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

23. Cart EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

24. Log In EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

25. Register EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

26. Billing Information EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

27. Personalize Card A EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

28. Personalize Cards B Review | Oxfam
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

29. Product Details C Review | Oxfam
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

30. Review & Place Order EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

31. Review & Place Order EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

32. Review & Place Order EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

33. Confirmation EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

34. Email Registration Confirmation EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

35. Email Order Confirmation EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

36. Task Flows EXPLORE: Design Challenge E-Commerce
Home Category
Product Your
Page
Page
Details
Cart
Log In/ Billing Personalize Review & Confirmation
Register
Info
Card
Place Order
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

37. EXPLORE: Design Challenge E-Commerce
Team Evaluation
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

38. Register EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

39. Billing Information EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

40. Review & Place Order EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

41. Review & Place Order Review | Oxfam
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

42. Review & Place Order Review | Oxfam
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

43. Let’s refine!
E-COMMERCE
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

44. Oxfam EXPLORE: Design Challenge E-Commerce
Home Category
Product Your
Page
Page
Details
Cart
Log In/ Billing Personalize Review & Confirmation
Register
Info
Card
Place Order
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

45. Oxfam EXPLORE: Design Challenge E-Commerce
Home Category
Product Your
Page
Page
Details
Cart
Billing &
Payment Info
Log In/ Billing Personalize Review & Confirmation
Register
Info
Card
Place Order
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

46. Oxfam EXPLORE: Design Challenge E-Commerce
BEFORE
Log In/ Billing Personalize Review & Confirmation
Register
Info
Card
Place Order
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

47. Oxfam EXPLORE: Design Challenge E-Commerce
BEFORE
Log In/ Billing Personalize Review & Confirmation
Register
Info
Card
Place Order
AFTER
Log In
Check Out
Confirmation
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

48. EXPLORE: Design Challenge E-Commerce
New Customer
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

49. EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

50. EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

51. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

52. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

53. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

54. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

55. EXPLORE: Design Challenge E-Commerce
Existing Customer
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

56. EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

57. EXPLORE: Design Challenge E-Commerce
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

58. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

59. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

60. Part 1: Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

61. Oxfam EXPLORE: Design Challenge E-Commerce
Home Category
Product Your
Page
Page
Details
Cart
Log In
Check Out
Confirmation
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

62. EXPLORE: Noteworthy Practices
Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

63. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

64. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

65. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

66. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

67. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

68. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

69. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

70. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

71. EXPLORE: Noteworthy Practices
http://mashable.com/2010/01/17/haiti-20-million/
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

72. EXPLORE: Noteworthy Practices
Notable Practices
• Minimal number of pages
• Minimal input fields
• Real time feedback
• Limit distractions
• Secure check out
• Printable receipt
• Smart e-mail messaging
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

73. Let’s mobilize!
MOBILE
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

74. Venn Diagram
CONTEXT
UX
CONTENT
USERS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

75. EXPLORE: Design Challenge Information Design
Mobile Considerations
• Mobile Screen sizes
– Varying widths based on devices
128, 160, 176, 240, 320, 360, 400, 480
• Display modes
– Landscape and portrait
• Technical Support
– Javascript, cookies
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

76. EXPLORE: Design Challenge Information Design
Design Challenge
• Information Design
• Transaction Design
• Mobile Design
– Team Exploration
– Team Presentations
– Review Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

77. EXPLORE: Design Challenge Design
10 Teams of 2
X 2 WONDERFUL
WELLS
X 2 X 2
GALLANT
HONORABLE
HONEY BEES
X 2
GOATS
X 2
SPECTACULAR
SEEDS
COURAGEOUS
CAMELS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

78. EXPLORE: Design Challenge Mobile
Gift * r
HOLIDAY GIFT GUIDE
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

79. EXPLORE: Design Challenge Mobile
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

80. EXPLORE: Design Challenge Information Design
Interaction Models
Category Page
Product Page
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

81. EXPLORE: Design Challenge Information Design
Wireframes & Paper Prototypes
Gift* r
HOLIDAY GIFT GUIDE
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

82. EXPLORE: Design Challenge Information Design
Team Presentations
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

83. EXPLORE: Noteworthy Practices
Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

84. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

85. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

86. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

87. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

88. EXPLORE: Noteworthy Practices
Taylor photostream Taylor photostream
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

89. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

90. EXPLORE: Noteworthy Practices
Taylor photostream Taylor photostream
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

91. EXPLORE: Noteworthy Practices
Taylor photostream Taylor photostream
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

92. EXPLORE: Noteworthy Practices
Taylor photostream Taylor photostream
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

93. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

94. EXPLORE: Noteworthy Practices
Taylor photostream Taylor photostream
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

95. EXPLORE: Noteworthy Practices
Noteworthy Practices
• Fluid layouts to fit various sizes for mobile
devices
• Consider performance and load times
• Don't use hover states
• Keep design and functionality simple
• Option to visit full site
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

96. Happy Holidays!
WONDERFUL
WELLS
HONORABLE
HONEY BEES
GALLANT
GOATS
SPECTACULAR
SEEDS
COURAGEOUS
CAMELS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

97. Good-Bye!
Thanks for attending the School of Visual Arts
Basics of Interaction Design + Strategy
Fall 2011
Anh Dang
adang@sva.edu
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang