• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Basics of Interaction Design + Strategy F2011 Part 1
 

Basics of Interaction Design + Strategy F2011 Part 1

on

  • 861 views

School of Visual Arts

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

Statistics

Views

Total Views
861
Views on SlideShare
861
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Basics of Interaction Design + Strategy F2011 Part 1 Basics of Interaction Design + Strategy F2011 Part 1 Presentation Transcript

    • Good Morning! Welcome to the School of Visual Arts Basics of Interaction Design + Strategy Fall 2011 Anh Dang adang@sva.eduBasics 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 5pmBasics 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 peoples way. 2.  Create a hierarchy that matches peoples 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_1BkLFBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Basics R O IBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Basics Return On InvestmentBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Basics Retention Orientation InteractionBasics 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 StrategyBasics 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.comBasics 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.comBasics 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.comBasics 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.jpgBasics 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
    • DISCOVERYBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • DISCOVERYBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Editorial DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Retail DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Blogs DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Gift Guides DISCOVERY: Landscape AuditBasics 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 AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Navigator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Navigator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Navigator DISCOVERY: Landscape Audit Landing Category Product Page Page DetailsBasics 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 AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Facilitator DISCOVERY: Landscape AuditLanding Category Results Product Product Page Page Page Overview DetailsBasics 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 AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • The Configurator DISCOVERY: Landscape AuditLanding Category Configuration Results Product Page Page Pages Page DetailsBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • Task Flows DISCOVERY: Landscape AuditThe Navigator! Landing Category Product Page Page DetailsThe Facilitator! Landing Category Results Product Product Page Page Page Overview DetailsThe Configurator! Landing Category Configuration Results Product Page Page Pages Page DetailsBasics 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* rBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Design Challenge Gift* r HOLIDAY GIFT GUIDEBasics 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: ConfigureBasics 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 DetailsBasics 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 PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
    • EXPLORE: Noteworthy PracticesBasics 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