Basics of Interaction Design & Strategy School of Visual Arts

1. Good Morning!
Welcome to the School of Visual Arts
Basics of Interaction Design & Strategy
Spring 2012
Anh Dang
adang@sva.edu
Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Friday, April 13, 12 1

2. Introduction
Hi. I’m Anh.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 3

3. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 5

4. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 6

5. Introduction
Morning
• Basics 10-10:30am
• Discovery 10:30-11am
– Journey Maps
– Landscape Audit
• Design Challenge Part 1: Web 11am-1:00pm
• Brief
• Team Exploration
• Team Review
• Notable Practices
• Lunch Break 1-1:30pm
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 7

6. Introduction
Afternoon
• Trending Topics 1:30-2:30pm
– Progressive Enhancements
• Responsive Design
• Mobile First
– Mobile Basics
• Design Challenge Part 2: Mobile 2:30-4:30pm
– Team Exploration
– Team Review
– Notable Practices
• QA 4:30-5pm
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 8

7. Let’s review!
BACK TO BASICS
http://www.flickr.com/photos/gemmabou/5502812147/
Basics of Interaction Design + Strategy | Springll 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 9

8. Basics
CONTEXT
UX
CONTENT USERS
Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Friday, April 13, 12 10

9. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 11

10. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 12

11. Basics
R
O
I
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 13

12. Basics
Return
On
Investment
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 14

13. Basics
Retention
Orientation
Interaction
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 15

14. Basics
Retention
• Thoughtful user experiences and content
strategy
– Does the site offer an informative and engaging
experience for services/products to retain users?
• 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 16

15. Basics
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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 17

16. Basics
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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 18

17. Basics
Strategy
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 19

18. Basics
Business Strategy
Product Strategy
Design Strategy
Content Strategy
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 20

19. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 21

20. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 22

21. 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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 23

22. Basics
Content Strategy
The main goal of content strategy is to use
words and data to create unambiguous
content that supports meaningful,
interactive experiences.
RACHEL LOVINGER
@rlovinger
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 24

23. Basics
Human Centered Design
“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
jnd.org
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 25

24. 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
Friday, April 13, 12 26

25. Let’s discover!
LANDSCAPE AUDIT
http://www.flickr.com/photos/visualpanic/233508614/
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 27

26. DISCOVERY
http://www.flickr.com/photos/madlyinlovewithlife/6500454297/
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 28

27. DISCOVERY
http://uxfindings.wordpress.com/
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 29

28. DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 30

29. DISCOVERY
Holiday Guides
Product Guides
School Guides
Travel Guides
Basics of Interaction Design + Strategy | Spring 2012 Financial Guides School of Visual Arts | Anh Dang
Friday, April 13, 12 31

30. DISCOVERY
Key Findings for Guides
• Configurator: allow users to build up a
product based on their interest in a bottom
up manner.
• Faceted Search: encourage users to narrow
down their options based on their goals in a
top down manner.
• Navigator: lets users browse all options
organized in defined hierarchy.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 32

31. DISCOVERY
The Configurator
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 33

32. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 34

33. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 35

34. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 36

35. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 37

36. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 38

37. CONFIGURATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 39

38. The Facet-ilator
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 40

39. FACET-ILATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 41

40. FACET-ILATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 42

41. FACET-ILATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 43

42. FACET-ILATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 44

43. The Navigator
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 45

44. NAVIGATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 46

45. NAVIGATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 47

46. NAVIGATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 48

47. NAVIGATOR DISCOVERY
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 49

48. DISCOVERY
Themes
While the main difference is the directional
approach used to accomplish a task…
CONFIGURATOR FACET-ILATOR NAVIGATOR
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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 50

49. DISCOVERY
Task Flows
The
Configurator
Landing Configured Results Detail
Page Page Page Page
The
Facet-ilator
Landing Filtered Detail
Page Results Page Page
The
Navigator
Landing Category Detail
Page Page Page
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 51

50. Let’s explore!
DESIGN
http://www.flickr.com/photos/gemmabou/5949869095/
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 52

51. Travel
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 54

52. EXPLORE
Travel
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 55

53. EXPLORE
36 Hours
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 56

54. EXPLORE
Frugal
Traveler
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 57

55. EXPLORE
Places to
Go
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 58

56. 2007 EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 59

57. 2008 EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 60

58. 2009 EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 61

59. 2010 EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 62

60. 2011 EXPLORE: Overview
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 63

61. 2011 EXPLORE: Overview
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 64

62. 2012 EXPLORE: Overview
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 65

63. EXPLORE
2007 2008 2009
2010 2011 2012
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 66

64. EXPLORE
Key Opportunities
• Editorial
– 6 years of Places to Go, over 250 destinations
– Featured articles
– Slideshows
– 36 Hours
– Frugal Traveler
• Travel Guides
– Where to Stay, Where to Eat, What to Do, Where to Go, When to Go,
Maps
• Social Community
– Loyal followers
– Engaged travelers
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 67

65. EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 68

66. EXPLORE
Business Strategy
Showcase the breadth and depth
of the editorial travel content.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 69

67. EXPLORE
Product Strategy
Optimize the travel planning
experience across multiple platforms.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 70

68. EXPLORE
Design Strategy
Create an engaging experience
that helps readers discover information
for their travel plans.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 71

69. EXPLORE
Content Strategy
Define content purpose and identify
content gaps to support interactive
experiences for travel planning.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 72

70. EXPLORE
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… Show me. let’s see what fits my
let’s see what’s there. interests.
Surprise me. Lead me.
The
Planner
The The
Explorer Generalist
Mindset: Tentative, Passive Mindset: Direct, Active Mindset: Generalist
Goals: Browse Goals: Search Goals: Configure
Need: Inspiration Need: Information Need: Direction
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 74

71. EXPLORE
100
Make The
Places to Go for
On & …
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 75

72. EXPLORE
6 teams of 1 team of
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 76

73. EXPLORE
Content is king.
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 77

74. EXPLORE
Content Inventory
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 78

75. EXPLORE
Content Strategy
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 79

76. EXPLORE
Wireframes & Paper Prototypes
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 80

77. EXPLORE
Conceptual Explorations
The The The
Configurators Facet-ilators Navigators
Configuration Faceted Search Basic Navigation
Find results based on Find and filter results View a grid of results
interest
Landing Page (Interests) Landing Page (Search) Landing Page (All)
Configuration Results Filtered Results Destination Details
Destination Details Destination Details
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 81

78. EXPLORE
Team Review
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 82

79. EXPLORE
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 | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 83