SlideShare a Scribd company logo

Basics of Interaction Design + Strategy F2011 Part 1

A
Anh Dang

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.

DesignTechnology
Related topics:
User Experience Design
1 of 100
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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
Introduction Hi. I’m Anh. Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Introduction Hello. How are you? . Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
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
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
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
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
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
Let’s review! BACK TO BASICS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Venn Diagram CONTEXT UX CONTENT USERS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
Basics R O I Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Basics Return On Investment Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Basics Retention Orientation Interaction Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
Basics Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Basics Business Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Basics Business Strategy Product Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Basics Business Strategy Product Strategy Design Strategy Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
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
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
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
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
Let’s discover! LANDSCAPE AUDIT Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
DISCOVERY Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
DISCOVERY Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Editorial DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Retail DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Blogs DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Gift Guides DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
The Navigator DISCOVERY: Landscape Audit THE NAVIGATOR Marthastewart.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Navigator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Navigator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Navigator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Navigator DISCOVERY: Landscape Audit Landing Category Product Page Page Details Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit THE FACILITATOR Target.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Facilitator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
The Configurator DISCOVERY: Landscape Audit THE CONFIGURATOR Cnet.com Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
The Configurator DISCOVERY: Landscape Audit Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
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
Let’s explore! DESIGN Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Design Challenge Gift* r Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Design Challenge Gift* r HOLIDAY GIFT GUIDE Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
EXPLORE: Design Challenge Design Challenge •  Information Design •  Transaction Design •  Mobile Design Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
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
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
EXPLORE: Design Challenge Information Design Help find On & … Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
EXPLORE: Design Challenge Information Design Content Inventory Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Design Challenge Information Design Wireframes & Paper Prototypes Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Design Challenge Information Design Task Flows Landing Product Page Details Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Design Challenge Information Design Team Presentations Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
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
Let’s eat! LUNCH Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang

More Related Content

PDF
Basics of Interaction Design & Strategy Fall 2012
Anh Dang
 
PDF
Basics of Interaction Design + Strategy F2011 Part 2
Anh Dang
 
PDF
Basics of Interaction Design & Strategy Spring 2012 Part 1
Anh Dang
 
PDF
Basics of Interaction Design Strategy Spring 2012 Part 2
Anh Dang
 
PDF
Sva Intro to Information Architecture & Design Fall 09
Anh Dang
 
PDF
Janet Saunders CV 2016
Janet Saunders
 
PDF
Skills And Competence A Lifespan Perspective Public
Leo Casey
 
PDF
2013 Professional Portfolio
Allen Cochran
 
Basics of Interaction Design & Strategy Fall 2012
Anh Dang
 
Basics of Interaction Design + Strategy F2011 Part 2
Anh Dang
 
Basics of Interaction Design & Strategy Spring 2012 Part 1
Anh Dang
 
Basics of Interaction Design Strategy Spring 2012 Part 2
Anh Dang
 
Sva Intro to Information Architecture & Design Fall 09
Anh Dang
 
Janet Saunders CV 2016
Janet Saunders
 
Skills And Competence A Lifespan Perspective Public
Leo Casey
 
2013 Professional Portfolio
Allen Cochran
 

What's hot (18)

PPTX
2012 A Plus AL Abacus
rightstartmath
 
PDF
Lu's Portfolio 2011
ChiaenLu
 
PPT
Thinking preso6 1-12
Cynthia Clay
 
PPTX
Nata 2017 self study
Arjun Kamal
 
PDF
2012 Profession Portfolio of Allen J Cochran
Allen Cochran
 
PDF
Video Games & Education: Building A Sustainable Innovation Ecosystem
Al Meyers
 
PDF
Ace 2010 final 5 6 2010
Al Meyers
 
PDF
DUHRING1
John Duhring
 
PDF
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
eMadrid network
 
PDF
Using Design thinking to tackle Wicked Problems
ClaireSpacecubed
 
PDF
Stanford's First Behavior Design Major
David Ngo
 
PPTX
Design Thinking For Educational Technology
Stefanie Panke
 
PPTX
EDIT 9990 Course Introduction & Overview
Tonia A. Dousay
 
PDF
Ge Tutorials Part Vi Design Principles
tcooper66
 
PDF
The Drawing Board VS Computer Generation
Mohd Syahmi
 
PDF
Disrupting Aged Care: A Design Manifesto for Change
Sara Rad
 
PDF
Australian Curriculum Capabilities and ICT Competence
digimuve
 
PDF
The stem innovation equation nsta
Diana Laboy-Rush
 
2012 A Plus AL Abacus
rightstartmath
 
Lu's Portfolio 2011
ChiaenLu
 
Thinking preso6 1-12
Cynthia Clay
 
Nata 2017 self study
Arjun Kamal
 
2012 Profession Portfolio of Allen J Cochran
Allen Cochran
 
Video Games & Education: Building A Sustainable Innovation Ecosystem
Al Meyers
 
Ace 2010 final 5 6 2010
Al Meyers
 
DUHRING1
John Duhring
 
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
eMadrid network
 
Using Design thinking to tackle Wicked Problems
ClaireSpacecubed
 
Stanford's First Behavior Design Major
David Ngo
 
Design Thinking For Educational Technology
Stefanie Panke
 
EDIT 9990 Course Introduction & Overview
Tonia A. Dousay
 
Ge Tutorials Part Vi Design Principles
tcooper66
 
The Drawing Board VS Computer Generation
Mohd Syahmi
 
Disrupting Aged Care: A Design Manifesto for Change
Sara Rad
 
Australian Curriculum Capabilities and ICT Competence
digimuve
 
The stem innovation equation nsta
Diana Laboy-Rush
 
Ad

Viewers also liked (16)

PPTX
Mapping Hilton
Shiloh Barnat Goodman
 
PDF
What mindset is needed for Design Thinking?
KEEN
 
PDF
Design Mindset
Francis Xavier
 
PPTX
Webinar : How to Apply Design Thinking to Enable Innovation in Your Workplace
Productinnovationacademy
 
PDF
Acceleration Partners Culture Deck
Acceleration Partners
 
PDF
B2B Ecommerce: Design Principles and Best Practices to Boost Sales
Alex Schmelkin
 
PDF
Design Strategy
Anton Breman
 
PPTX
Mission Based UX Strategy (UX Strat USA 2015)
Ben Judy
 
PDF
Launch your own: Corporate innovation accelerator
Board of Innovation
 
PDF
UX STRAT USA, Phil Ohme, "TurboTax Mobile Experience Strategy"
UX STRAT
 
PDF
Creating an Interactive Content Strategy that Works with Technology
ion interactive
 
PDF
UX STRAT USA, Peter Merholz, "My Journey with Experience Strategy"
UX STRAT
 
PDF
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT
 
PPTX
UX STRAT USA, Kirsten Mann, "Applying UX Strategy to Optimize the Support Exp...
UX STRAT
 
PDF
UX STRAT USA, Andrew Hinton, "Understanding Context to Shape UX Strategy"
UX STRAT
 
PDF
Design Ethics for Artificial Intelligence
Charbel Zeaiter
 
Mapping Hilton
Shiloh Barnat Goodman
 
What mindset is needed for Design Thinking?
KEEN
 
Design Mindset
Francis Xavier
 
Webinar : How to Apply Design Thinking to Enable Innovation in Your Workplace
Productinnovationacademy
 
Acceleration Partners Culture Deck
Acceleration Partners
 
B2B Ecommerce: Design Principles and Best Practices to Boost Sales
Alex Schmelkin
 
Design Strategy
Anton Breman
 
Mission Based UX Strategy (UX Strat USA 2015)
Ben Judy
 
Launch your own: Corporate innovation accelerator
Board of Innovation
 
UX STRAT USA, Phil Ohme, "TurboTax Mobile Experience Strategy"
UX STRAT
 
Creating an Interactive Content Strategy that Works with Technology
ion interactive
 
UX STRAT USA, Peter Merholz, "My Journey with Experience Strategy"
UX STRAT
 
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT
 
UX STRAT USA, Kirsten Mann, "Applying UX Strategy to Optimize the Support Exp...
UX STRAT
 
UX STRAT USA, Andrew Hinton, "Understanding Context to Shape UX Strategy"
UX STRAT
 
Design Ethics for Artificial Intelligence
Charbel Zeaiter
 
Ad

Similar to Basics of Interaction Design + Strategy F2011 Part 1 (20)

KEY
In order for UX to achieve it’s potential, we need to reframe it as a profess...
Peter Merholz
 
PDF
STI, MetaRational #2
João Ramos
 
PDF
The Elements of User Experience
Michael Grillhösl
 
PDF
Elements
FitBlar Mit
 
PDF
The Elements of User Experience
Ben van de Sande
 
PDF
PxS'12 - week 10 - screen design
hendrikknoche
 
PDF
Dk glsec
Tabetha Jones
 
PDF
UX in Italia: idee e futuro
Alberto Mucignat
 
PDF
PxS’12 - week 10 - screen design
hendrikknoche
 
PDF
Element S
guestcc7367
 
PDF
Elements
kaa kaa
 
PDF
Elements Of User Experience
guest829deb
 
PDF
what is interaction design
Aynne Valencia
 
PDF
UX_JJGarrett_elements
Edwin Ritter
 
PDF
Elements Of Web Design
Dan Dixon
 
PDF
"Project Design for Optimaizing User Experience" 20070927
Takashi Sakamoto
 
PDF
Lean UX
Alberto Mucignat
 
PDF
Zukunftsmarkt Zocken
Stephan Engl
 
PDF
Re-imagining the Design of Everyday Things
Effective
 
PDF
Human-Centered Design and the Intersection of the Physical and Digital Worlds
EffectiveUI
 
In order for UX to achieve it’s potential, we need to reframe it as a profess...
Peter Merholz
 
STI, MetaRational #2
João Ramos
 
The Elements of User Experience
Michael Grillhösl
 
Elements
FitBlar Mit
 
The Elements of User Experience
Ben van de Sande
 
PxS'12 - week 10 - screen design
hendrikknoche
 
Dk glsec
Tabetha Jones
 
UX in Italia: idee e futuro
Alberto Mucignat
 
PxS’12 - week 10 - screen design
hendrikknoche
 
Element S
guestcc7367
 
Elements
kaa kaa
 
Elements Of User Experience
guest829deb
 
what is interaction design
Aynne Valencia
 
UX_JJGarrett_elements
Edwin Ritter
 
Elements Of Web Design
Dan Dixon
 
"Project Design for Optimaizing User Experience" 20070927
Takashi Sakamoto
 
Lean UX
Alberto Mucignat
 
Zukunftsmarkt Zocken
Stephan Engl
 
Re-imagining the Design of Everyday Things
Effective
 
Human-Centered Design and the Intersection of the Physical and Digital Worlds
EffectiveUI
 

Recently uploaded (20)

PPTX
6- Architecture design complete (1).pptx
aroojkazmi006
 
PPTX
Implications Existing phase plan and its feasibility.pptx
SamuelJohnson540488
 
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
PPTX
Media And Information Literacy for Grade 12
CaloyMasion
 
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
PPTX
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
ShaluPriya26
 
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
rubaiyaakhterinbox
 
PDF
Urban Design Final Project-Site Analysis
nicolebrog1
 
PDF
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
barkatbushra9
 
PPTX
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Mina Anis
 
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
nikitasaraf21isbms
 
PPTX
Entrepreneur intro, origin, process, method
SANGEETHA PRIYA B
 
PDF
Urban Design Final Project-Context
nicolebrog1
 
PDF
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
PPT
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 
6- Architecture design complete (1).pptx
aroojkazmi006
 
Implications Existing phase plan and its feasibility.pptx
SamuelJohnson540488
 
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
Media And Information Literacy for Grade 12
CaloyMasion
 
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
YV PROFILE PROJECTS PROFILE PRES. DESIGN
ShaluPriya26
 
mahatma gandhi bus terminal in india Case Study.pptx
rubaiyaakhterinbox
 
Urban Design Final Project-Site Analysis
nicolebrog1
 
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
barkatbushra9
 
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Mina Anis
 
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
nikitasaraf21isbms
 
Entrepreneur intro, origin, process, method
SANGEETHA PRIYA B
 
Urban Design Final Project-Context
nicolebrog1
 
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 

Basics of Interaction Design + Strategy F2011 Part 1

  • 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