This document provides an introduction and agenda for a course on interaction design and strategy at the School of Visual Arts. The course will focus on designing user experiences for web and mobile through collaborative exercises and interactive prototypes. It will cover core theories, case studies, information architecture, content strategy, iterative design processes, and designing for different platforms. The schedule outlines sessions on basics, discovery activities, design challenges, and a mobile challenge for the day.

1. Good Morning!
Welcome to 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

2. Introduction
Hi. I’m Anh.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

3. Introduction
Hello. How are you? .
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

4. Introduction
About Us
This course will focus on practical ways to develop
smart design strategies for web and mobile devices. We
will discuss core theories, case studies and the practice
of designing user experiences.
Through collaborative exercises and lightweight,
interactive prototypes, we will practice creating
information architecture, content strategy, and interface
design for web and mobile platforms.
Prerequisite: SDC-2827, Introduction to Information Architecture and Design, or equivalent.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

5. Introduction
Objectives: 5 i’s
• Industry: Core theories, case studies, and practice
of designing for web and mobile devices.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

6. Introduction
Objectives: 5 i’s
• Industry: Core theories, case studies, and practice
of designing for web and mobile devices.
• Information: Techniques to organizing information
(content strategy, information design, information
architecture).
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

7. Introduction
Objectives: 5 i’s
• Industry: Core theories, case studies, and practice
of designing for web and mobile devices.
• Information: Techniques to organizing information
(content strategy, information design, information
architecture).
• Iteration: Methods to solve design problems
through ideation and iterative design.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

8. Introduction
Objectives: 5 i’s
• Industry: Core theories, case studies, and practice
of designing for web and mobile devices.
• Information: Techniques to organizing information
(content strategy, information design, information
architecture).
• Iteration: Methods to solve design problems
through ideation and iterative design.
• Interaction: Development of light weight, interactive
prototypes.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

9. Introduction
Objectives: 5 i’s
• Industry: Core theories, case studies, and practice
of designing for web and mobile devices.
• Information: Techniques to organizing information
(content strategy, information design, information
architecture).
• Iteration: Methods to solve design problems
through ideation and iterative design.
• Interaction: Development of light weight, interactive
prototypes.
• Interfaces: Design strategy for various platforms.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

10. Introduction
Morning
• Basics 10-10:30am
• 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

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

12. Let’s review!
BACK TO BASICS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

14. Basics
User Experience Design
Create designs that effectively
communicate a message and allow users
to accomplish their goals in an easy,
efficient, and engaging manner.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

15. Basics
UX Principles WHITNEY HESS
1. Stay out of people's way.
2. Create a hierarchy that matches people's needs.
3. Limit distractions.
4. Provide strong information scent.
5. Provide signposts and cues.
6. Provide context.
7. Use constraints appropriately.
8. Make actions reversible.
9. Provide feedback.
10. Make a good first impression.
http://thenextweb.com/dd/2011/11/08/the-principles-of-experience-design-and-10-sites-doing-it-right/?awesm=tnw.to_1BkLF
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

16. Basics
R
O
I
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

17. Basics
Return
On
Investment
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

18. Basics
Retention
Orientation
Interaction
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

19. Audit
Retention
• Thoughtful user experiences and content
strategy
– Does the site offer an informative and engaging
experience for services/products to retain userss?
• Features that allow users to hold information
in a particular place or state
– Does the site offer tools to retain the users
customized product or search result?
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

20. Audit
Orientation
• Site architecture, navigation elements, depth of
content, ease of finding content
– Is the information presented in a logical structure
that communicates the relative importance of
options and be easy to understand?
– Can users conveniently and expediently find their
way through the interface?
– Do users understand where they are, where they
can go next, and how to return?
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

21. Audit
Interaction
• Ease, consistency, accessibility and
interestingness of interactivity on the site
– Can users use the system without hindrance and
find information easily?
– Is the site engaging and allows users to discover
new information?
– Does the site address the needs of both novice
and experienced users?
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

23. Basics
Business Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

24. Basics
Business Strategy
Product Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

25. Basics
Business Strategy
Product Strategy
Design Strategy
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

26. Basics
Business Strategy
Business strategy is about identifying your
business objectives and deciding where to
invest to best achieve those objectives.
JAMES KALBACH
Experiencinginformation.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

27. Basics
Product Strategy
The product strategy speaks to how you
hope to deliver on the business strategy.
JAMES KALBACH
Experiencinginformation.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

28. Basics
Design Strategy
Design strategy isn’t the act of designing,
rather the application of design to help
reach business objectives.
JAMES KALBACH
Experiencinginformation.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

29. Basics
“Most design is intended to be used by
people, so the needs and requirements of
people ought to be driving much of the
work throughout the entire process.”
DONALD NORMAN
http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpg
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

30. Basics
"
Good design BRAUN’S 10 PRINCIPLES OF GOOD DESIGN
1. Is innovative
2. Enhances the usefulness of product
3. Is aesthetic
4. Displays the logical structure of a product; it’s form follows its
function
5. Is unobtrusive
6. Is honest
7. Is enduring
8. Is consistent right to the details
9. Is ecologically conscious
10. Is minimal design
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

31. Basics"
Discovery
Definition
Design
Development
• Site Maps"
• Task Flows"
• Wireframes"
• Prototypes"
• User Testing"
• Visual Design"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

32. Basics"
Discovery
Definition
Design
Development
• Site Maps"
• Task Flows!
• Wireframes!
• Prototypes!
• User Testing"
• Visual Design"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

33. Let’s discover!
LANDSCAPE AUDIT
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

34. DISCOVERY
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

35. DISCOVERY
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

36. Editorial DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

37. Retail DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

38. Blogs DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

39. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

40. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

41. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

42. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

43. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

44. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

45. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

46. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

47. Gift Guides DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

48. Gift Guides DISCOVERY: Landscape Audit
Basic Navigation!
View a grid of
products"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

49. Gift Guides DISCOVERY: Landscape Audit
Basic Navigation! Faceted Search!
View a grid of Find and filter
products" products results"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

50. Gift Guides DISCOVERY: Landscape Audit
Basic Navigation! Faceted Search! Configuration!
View a grid of Find and filter Find a gift based on
products" products results" preferences"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

51. The Navigator DISCOVERY: Landscape Audit
THE NAVIGATOR
Marthastewart.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

52. The Navigator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

53. The Navigator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

54. The Navigator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

55. The Navigator DISCOVERY: Landscape Audit
Landing
Category
Product
Page
Page
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

56. The Facilitator DISCOVERY: Landscape Audit
THE FACILITATOR
Target.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

57. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

58. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

59. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

60. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

61. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

62. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

63. The Facilitator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

64. The Facilitator DISCOVERY: Landscape Audit
Landing
Category
Results
Product Product
Page
Page
Page
Overview
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

65. The Configurator DISCOVERY: Landscape Audit
THE CONFIGURATOR
Cnet.com
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

66. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

67. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

68. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

69. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

70. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

71. The Configurator DISCOVERY: Landscape Audit
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

72. The Configurator DISCOVERY: Landscape Audit
Landing
Category
Configuration
Results
Product
Page
Page
Pages
Page
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

73. Task Flows DISCOVERY: Landscape Audit
The Navigator!
Landing
Category
Product
Page
Page
Details
The Facilitator!
Landing
Category
Results
Product Product
Page
Page
Page
Overview
Details
The Configurator!
Landing
Category
Configuration
Results
Product
Page
Page
Pages
Page
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

74. DISCOVERY: Landscape Audit
Key Findings
• Navigator: lets users browse all options
organized in defined hierarchy
• Facilitator: encourage users to narrow down
their options based on their goals in a top
down manner
• Configurator: allow users to build up a
product based on their needs in a bottom up
manner
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

75. DISCOVERY: Landscape Audit
Themes
While the main difference is the directional
approach used to accomplish a task…
NAVIGATOR FACET-ILATOR CONFIGURATOR
the ultimate goal is to allow users to control
their experience and receive information that
is highly relevant to their goals in an easy,
efficient and engaging manner.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

76. Let’s explore!
DESIGN
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

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

79. EXPLORE: Design Challenge
Gift* r BUSINESS STRATEGY
• Saving Lives
• Helping people overcome poverty.
• Fighting for social justice.
We are an international relief and development
organization that creates lasting solutions to
poverty, hunger, and injustice in more than 90
countries.
Together with individuals and local groups in
these countries, we save lives, help people
overcome poverty, and fight for social justice.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

80. EXPLORE: Design Challenge
Gift* r PRODUCT STRATEGY
Pick a
What
Gift
You Get
Where
How
It Goes
It Helps
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

81. EXPLORE: Design Challenge
Gift* r DESIGN STRATEGY
• Keep it simple.
• Make it fun.
• Be relevant.
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

83. EXPLORE: Design Challenge Information Design
Design Challenge
• Information Design
– Refine Task Flows
– Develop Wireframes & Paper Prototypes
– Present Teamwork
– Review Noteworthy Practices
• Transaction Design
• Mobile Design
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

84. EXPLORE: Design Challenge Information Design
5 Teams of 4 people
WONDERFUL
WELLS
HONORABLE
HONEY BEES
GALLANT
GOATS
SPECTACULAR
SEEDS
COURAGEOUS
CAMELS
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

85. EXPLORE: Design Challenge Information Design
Personas & Scenarios
I know what I want…
let’s learn more and
I’m not sure what I see what’s similar.
I know what I like…
want…
but need to find the
let’s see what’s there
right match.
Mindset: Tentative, Passive
Mindset: Direct, Active
Mindset: Savvy
Goals: Browse Goals: Search Goals: Configure
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

86. EXPLORE: Design Challenge Information Design
Help find
On & …
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

87. EXPLORE: Design Challenge Information Design
NAVIGATOR
FACET-ITATOR
CONFIGURATOR
Basic Navigation! Faceted Search! Configuration!
View a grid of products" Find and filter products Find a gift based on
results" preferences"
Task Flow" Task Flow" Task Flow"
Landing Page" Landing Page" Landing Page"
Category Page" Category Page" Configuration Pages"
Product Page" Results Page" Results Page"
Product Page" Product Page"
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

88. EXPLORE: Design Challenge Information Design
Content Inventory
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

89. EXPLORE: Design Challenge Information Design
Wireframes & Paper Prototypes
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

90. EXPLORE: Design Challenge Information Design
Task Flows
Landing
Product
Page
Details
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

92. EXPLORE: Noteworthy Practices
Noteworthy Practices
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
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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

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

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

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

99. EXPLORE: Noteworthy Practices
Noteworthy Practices
• Responsive filtering process
• Immediate feedback
• Side by side comparison
• Up front instructions
• Visuals of products
• Tools to save, print, email, share, compare
• Related products
• Clear and short steps
• Display details on mouse over
• Multiple view options
Basics of Interaction Design + Strategy | Fall 2011
School of Visual Arts | Anh Dang

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