• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Basics of Interaction Design & Strategy Spring 2012 Part 1
 

Basics of Interaction Design & Strategy Spring 2012 Part 1

on

  • 830 views

Basics of Interaction Design & Strategy

Basics of Interaction Design & Strategy
School of Visual Arts

Statistics

Views

Total Views
830
Views on SlideShare
830
Embed Views
0

Actions

Likes
3
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 Spring 2012 Part 1 Basics of Interaction Design & Strategy Spring 2012 Part 1 Presentation Transcript

    • 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 DangFriday, April 13, 12 1
    • Introduction Hi. I’m Anh. Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 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 DangFriday, April 13, 12 5
    • 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 DangFriday, April 13, 12 6
    • 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 DangFriday, April 13, 12 7
    • 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 DangFriday, April 13, 12 8
    • 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 DangFriday, April 13, 12 9
    • Basics CONTEXT UX CONTENT USERS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh DangFriday, April 13, 12 10
    • 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 DangFriday, April 13, 12 11
    • 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_1BkLF Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 12
    • Basics R O I Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 13
    • Basics Return On Investment Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 14
    • Basics Retention Orientation Interaction Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 15
    • 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 DangFriday, April 13, 12 16
    • 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 DangFriday, April 13, 12 17
    • 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 DangFriday, April 13, 12 18
    • Basics Strategy Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 19
    • Basics Business Strategy Product Strategy Design Strategy Content Strategy Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 20
    • 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 DangFriday, April 13, 12 21
    • 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 DangFriday, April 13, 12 22
    • 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 DangFriday, April 13, 12 23
    • 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 DangFriday, April 13, 12 24
    • 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 DangFriday, April 13, 12 25
    • 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 DangFriday, April 13, 12 26
    • Let’s discover! LANDSCAPE AUDIT http://www.flickr.com/photos/visualpanic/233508614/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 27
    • DISCOVERY http://www.flickr.com/photos/madlyinlovewithlife/6500454297/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 28
    • DISCOVERY http://uxfindings.wordpress.com/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 29
    • DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 30
    • DISCOVERY Holiday Guides Product Guides School Guides Travel Guides Basics of Interaction Design + Strategy | Spring 2012 Financial Guides School of Visual Arts | Anh DangFriday, April 13, 12 31
    • 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 DangFriday, April 13, 12 32
    • DISCOVERY The Configurator Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 33
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 34
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 35
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 36
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 37
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 38
    • CONFIGURATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 39
    • The Facet-ilator Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 40
    • FACET-ILATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 41
    • FACET-ILATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 42
    • FACET-ILATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 43
    • FACET-ILATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 44
    • The Navigator Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 45
    • NAVIGATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 46
    • NAVIGATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 47
    • NAVIGATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 48
    • NAVIGATOR DISCOVERY Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 49
    • 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 DangFriday, April 13, 12 50
    • 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 DangFriday, April 13, 12 51
    • Let’s explore! DESIGN http://www.flickr.com/photos/gemmabou/5949869095/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 52
    • Travel Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 54
    • EXPLORE Travel Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 55
    • EXPLORE 36 Hours Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 56
    • EXPLORE Frugal Traveler Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 57
    • EXPLORE Places to Go Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 58
    • 2007 EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 59
    • 2008 EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 60
    • 2009 EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 61
    • 2010 EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 62
    • 2011 EXPLORE: Overview Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 63
    • 2011 EXPLORE: Overview Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 64
    • 2012 EXPLORE: Overview Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 65
    • EXPLORE 2007 2008 2009 2010 2011 2012 Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 66
    • 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 DangFriday, April 13, 12 67
    • EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 68
    • 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 DangFriday, April 13, 12 69
    • EXPLORE Product Strategy Optimize the travel planning experience across multiple platforms. Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 70
    • 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 DangFriday, April 13, 12 71
    • 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 DangFriday, April 13, 12 72
    • 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 DangFriday, April 13, 12 74
    • EXPLORE 100 Make The Places to Go for On & … Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 75
    • EXPLORE 6 teams of 1 team of Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 76
    • EXPLORE Content is king. Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 77
    • EXPLORE Content Inventory Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 78
    • EXPLORE Content Strategy Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 79
    • EXPLORE Wireframes & Paper Prototypes Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 80
    • 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 DangFriday, April 13, 12 81
    • EXPLORE Team Review Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 82
    • 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 DangFriday, April 13, 12 83