Good Morning!                                                                 Welcome to the School of Visual Arts        ...
Let’s go!              INTRODUCTIONS               http://www.flickr.com/photos/22563225@N04/4958972220/Basics of Interact...
Introduction      Hi. I’m Anh.Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
Introduction                                                        Travel PlansBasics of Interaction Design + Strategy | ...
Introduction      About Us      This course will focus on practical ways to develop        smart design strategies for mul...
Introduction      Objectives: 5 i’s      • Industry: Core theories, case studies, and practice        of designing for web...
Introduction      Objectives: 5 i’s      • Industry: Core theories, case studies, and practice         of designing for we...
Introduction      Objectives: 5 i’s      • Industry: Core theories, case studies, and practice         of designing for we...
Introduction      Objectives: 5 i’s      • Industry: Core theories, case studies, and practice         of designing for we...
Introduction      Objectives: 5 i’s      • Industry: Core theories, case studies, and practice         of designing for we...
Introduction      Design Process      Discovery                                         Definition             Design      ...
Introduction     Morning     • Basics 10-10:30am        – UX Review        – Trending Topics        – Notable Practices   ...
Introduction     Afternoon     • Definition 10-10:30am        – Landscape Audit        – Conceptual Models     • Design    ...
Let’s review!                           BACK TO BASICS                            http://www.flickr.com/photos/gemmabou/55...
Basics                                                      CONTEXT                                                       ...
Basics                                  User Experience Design                                Create designs that effectiv...
Basics      UX Principles WHITNEY HESS      1. Stay out of peoples way.      2. Create a hierarchy that matches peoples ne...
Basics                                                        R                                                        O  ...
Basics                                                          Return                                                    ...
Basics                                                         Retention                                                  ...
Basics      Retention      • Thoughtful user experiences and content        strategy                 – Does the site offer...
Basics      Orientation      • Site architecture, navigation elements, depth of        content, ease of finding content    ...
Basics      Interaction      • Ease, consistency, accessibility and        interestingness of interactivity on the site   ...
Basics                                                 Business Strategy                                                 P...
Basics                                                 Business Strategy                   Business strategy is about iden...
Basics                                                  Product Strategy                      The product strategy speaks ...
Basics                                                        Design Strategy                      Design strategy isn’t t...
Basics                                                 Content Strategy                 The main goal of content strategy ...
Basics                           Human Centered Design                        “Most design is intended to be used by      ...
Basics      Good Design                                     BRAUN’S 10 PRINCIPLES OF GOOD DESIGN      1.  Is innovative   ...
Let’s chat!        TRENDING TOPICS        http://www.flickr.com/photos/sincretic/5617424729/Basics of Interaction Design +...
TRENDS                 Future Friendly Thinking                 •      Laser focus                 •      Orbital data    ...
TRENDS                 Progressive Enhancements                 •      Abandon comfortable assumptions                 •  ...
TRENDSBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
TRENDS                                                        Ethan MarcotteBasics of Interaction Design + Strategy | Spri...
TRENDS                 Responsive Design                 • Flexible foundation                 • Responsive architecture  ...
TRENDS                                                        Simon CollisonBasics of Interaction Design + Strategy | Spri...
TRENDS                                                        Boston GlobeBasics of Interaction Design + Strategy | Spring...
TRENDS                                                        DisneyBasics of Interaction Design + Strategy | Spring 2012 ...
TRENDS                               Anti- Responsive Design                     Responsive Design is counter productive, ...
TRENDS                                             Responsive Design                                                      ...
Basics                                             Responsive Design                                    I think of respons...
TRENDS                                                        Luke WroblewskiBasics of Interaction Design + Strategy | Spr...
TRENDS                 Mobile First                 • Mobile is exploding.                 • Mobile forces you to focus.  ...
TRENDS                                                      CONTEXT                                                       ...
TRENDS                                                        http://www.lukew.com/Basics of Interaction Design + Strategy...
TRENDS                 Mobile Considerations                 • Mobile Screen sizes                           – Varying wid...
TRENDS                                                        http://www.lukew.com/Basics of Interaction Design + Strategy...
TRENDS                 Tablet Considerations                 • Tablet Screen sizes                           – Varying wid...
TRENDS                 Organizing Mobile                 • Align with how people use their mobile                   device...
TRENDS                 Mobile Capabilities                           – Location/GPS                           – Multi-touc...
TRENDS                 Touch FirstBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
TRENDS                 5th Finger’s Five Tenets                 • The NUI is not the GUI.                 • Be thoughtful ...
TRENDS                 @Lukew in Mobile First: “When holding a touch phone screen with only your right hand, it’s easy to ...
TRENDS                                                        http://www.lukew.com/Basics of Interaction Design + Strategy...
TRENDS                                                        http://www.lukew.com/Basics of Interaction Design + Strategy...
TRENDSBasics of Interaction Design + Strategy | Spring 2012        School of Visual Arts | Anh Dang                       ...
TRENDS                                             Mobile Experience         Responsive design, adaptive design, progressi...
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Spring 2012                  School of Visual Arts ...
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILE                       Taylor	  photostream            Taylor	  photostreamBasics of Interaction Design + Strategy |...
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILE                       Taylor	  photostream            Taylor	  photostreamBasics of Interaction Design + Strategy |...
MOBILE                       Taylor	  photostream            Taylor	  photostreamBasics of Interaction Design + Strategy |...
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILE                       Taylor	  photostream            Taylor	  photostreamBasics of Interaction Design + Strategy |...
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
MOBILE                       Taylor	  photostream            Taylor	  photostreamBasics of Interaction Design + Strategy |...
EXPLORE      Noteworthy Practices      • Fluid layouts to fit various sizes for mobile        devices      • Consider perfo...
Let’s discover!                           RESEARCH                           http://www.flickr.com/photos/visualpanic/2335...
DISCOVERY                                                        http://www.flickr.com/photos/madlyinlovewithlife/65004542...
DEFINEBasics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang
DISCOVERY: Journey Maps                                                        http://uxfindings.wordpress.com/Basics of I...
DISCOVERY: Journey Maps                                                        Journey Maps            Customer journey ma...
DISCOVERY: Journey Maps                                                        Journey Maps                         “Answe...
DISCOVERY: Journey Maps                 Exercise: Journey Maps                 • Share your journey maps                 •...
Basics of Interaction Design + Strategy | Spring 2012        School of Visual Arts | Anh Dang                             ...
DISCOVERY: Journey Maps                                                        Brainstorming                     We happen...
DISCOVERY      OpenIDEO brainstorming rules      •       Defer judgment      •       Encourage wild ideas      •       Bui...
DISCOVERY: Journey Maps                                                        KJ Method                 The KJ-Method, na...
DISCOVERY      KJ Method       •      Determine focus question       •      Organize group       •      Put opinions on st...
DISCOVERY: Journey Maps                 Hybrid Exercise:                 • Brainstorm ideas                           – Ho...
DISCOVERY: Journey Maps                                                        Concept Maps               In the territory...
DISCOVERY: Mind Mappinghttp://www.mindmeister.com/Basics of Interaction Design + Strategy | Spring 2012                 Sc...
DISCOVERY      Site Evaluations     Information Organization     •       Is information presented in a logical structure? ...
DISCOVERY Holiday Guides                                                        Product Guides                            ...
DISCOVERY                                                The ConfiguratorBasics of Interaction Design + Strategy | Spring 2...
CONFIGURATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
CONFIGURATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
CONFIGURATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
CONFIGURATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
CONFIGURATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
The Facet-ilatorBasics of Interaction Design + Strategy | Spring 2012                  School of Visual Arts | Anh Dang
FACET-ILATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
FACET-ILATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
FACET-ILATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
FACET-ILATOR                                                DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
The NavigatorBasics of Interaction Design + Strategy | Spring 2012                   School of Visual Arts | Anh Dang
NAVIGATOR                                                   DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
NAVIGATOR                                                   DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
NAVIGATOR                                                   DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
NAVIGATOR                                                   DISCOVERYBasics of Interaction Design + Strategy | Spring 2012...
DISCOVERY      Key Findings for Guides      • Configurator: allow users to build up a        product based on their interes...
DISCOVERY      Themes      While the main difference is the directional       approach used to accomplish a task…         ...
EXPLORE      Noteworthy Practices      •       Responsive filtering process      •       Immediate feedback      •       Si...
Let’s eat!                                                          LUNCHBasics of Interaction Design + Strategy | Spring ...
Let’s define!                           DESIGN PLANNING                           http://www.flickr.com/photos/nektar/60855...
The BriefBasics of Interaction Design + Strategy | Spring 2012               School of Visual Arts | Anh Dang
BRIEF: New York Times TravelCMYK                                               Sxxx,2012-11-11,TR,001,Bs-4C,E1A SPECIAL IS...
BRIEF: New York Times Travel                                                        Travel                                ...
BRIEF: New York Times Travel                                                        Travel                                ...
BRIEF: New York Times Travel                                                        Frugal                                ...
BRIEF: New York Times Travel                                                        Places                                ...
BRIEF: New York Times Travel                                                        36 HoursBasics of Interaction Design +...
BRIEF: New York Times Travel      Key Opportunities      • Editorial                 –     6 years of Places to Go, over 2...
BRIEF: New York Times Travel                                                        36 HoursBasics of Interaction Design +...
BRIEF: New York Times Travel                                                        CMYK                                  ...
BRIEF: New York Times TravelBasics of Interaction Design + Strategy | Spring 2012                      School of Visual Ar...
BRIEF: New York Times Travel                               What are we designing?                The 36 Hours | Top10 will...
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Basics of Interaction Design & Strategy Fall 2012
Upcoming SlideShare
Loading in...5
×

Basics of Interaction Design & Strategy Fall 2012

616

Published on

Published in: Design

Transcript of "Basics of Interaction Design & Strategy Fall 2012"

  1. 1. Good Morning! Welcome to the School of Visual Arts Basics of Interaction Design & Strategy Fall 2012 Anh Dang adang@sva.eduBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  2. 2. Let’s go! INTRODUCTIONS http://www.flickr.com/photos/22563225@N04/4958972220/Basics of Interaction Design + Strategy | Springll 2012 School of Visual Arts | Anh Dang
  3. 3. Introduction Hi. I’m Anh.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  4. 4. Introduction Travel PlansBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  5. 5. Introduction About Us This course will focus on practical ways to develop smart design strategies for multiple devices. We will discuss core theories, case studies and the practice of designing user experiences. Through collaborative exercises and lightweight, interactive prototypes, we will practice creating information architecture, content strategy, and interface design for web and mobile platforms. Prerequisite: SDC-2827, Introduction to Information Architecture and Design, or equivalent.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  6. 6. Introduction Objectives: 5 i’s • Industry: Core theories, case studies, and practice of designing for web and mobile devices.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  7. 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).Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  8. 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.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  9. 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.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  10. 10. Introduction Objectives: 5 i’s • Industry: Core theories, case studies, and practice of designing for web and mobile devices. • Information: Techniques to organizing information (content strategy, information design, information architecture). • Iteration: Methods to solve design problems through ideation and iterative design. • Interaction: Development of light weight, interactive prototypes. • Interfaces: Design strategy for various platforms.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  11. 11. Introduction Design Process Discovery Definition Design Journey Maps Conceptual Models Design Exercises Brainstorm Techniques - Navigator Model - Sketching - How Do We - Facet Model - Adaptive Design - KJ Analysis - Configurator Model - Desktop Landscape Audits - Tablet - MobileBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  12. 12. Introduction Morning • Basics 10-10:30am – UX Review – Trending Topics – Notable Practices • Discovery • Journey Maps • Brainstorm • How Do We • KJ Technique • Lunch Break 10-10:30amBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  13. 13. Introduction Afternoon • Definition 10-10:30am – Landscape Audit – Conceptual Models • Design • Project Brief • Design Strategy • Conceptual Models • Design Explorations • Review • Team Presentations • QABasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  14. 14. Let’s review! BACK TO BASICS http://www.flickr.com/photos/gemmabou/5502812147/Basics of Interaction Design + Strategy | Springll 2012 School of Visual Arts | Anh Dang
  15. 15. Basics CONTEXT UX CONTENT USERSBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  16. 16. Basics User Experience Design Create designs that effectively communicate a message and allow users to accomplish their goals in an easy, efficient, and engaging manner.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  17. 17. 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 | Spring 2012 School of Visual Arts | Anh Dang
  18. 18. Basics R O IBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  19. 19. Basics Return On InvestmentBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  20. 20. Basics Retention Orientation InteractionBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  21. 21. Basics Retention • Thoughtful user experiences and content strategy – Does the site offer an informative and engaging experience for services/products to retain users? • Features that allow users to hold information in a particular place or state – Does the site offer tools to retain the users customized product or search result?Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  22. 22. Basics Orientation • Site architecture, navigation elements, depth of content, ease of finding content – Is the information presented in a logical structure that communicates the relative importance of options and be easy to understand? – Can users conveniently and expediently find their way through the interface? – Do users understand where they are, where they can go next, and how to return?Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  23. 23. Basics Interaction • Ease, consistency, accessibility and interestingness of interactivity on the site – Can users use the system without hindrance and find information easily? – Is the site engaging and allows users to discover new information? – Does the site address the needs of both novice and experienced users?Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  24. 24. Basics Business Strategy Product Strategy Design Strategy Content StrategyBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  25. 25. 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 | Spring 2012 School of Visual Arts | Anh Dang
  26. 26. 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 | Spring 2012 School of Visual Arts | Anh Dang
  27. 27. 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 | Spring 2012 School of Visual Arts | Anh Dang
  28. 28. 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 @rlovingerBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  29. 29. 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.orgBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  30. 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 designBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  31. 31. Let’s chat! TRENDING TOPICS http://www.flickr.com/photos/sincretic/5617424729/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  32. 32. TRENDS Future Friendly Thinking • Laser focus • Orbital data • Universal/structured content • Unknown vessels • Command your fleetBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  33. 33. TRENDS Progressive Enhancements • Abandon comfortable assumptions • Mobile first • Build up core experience • Set solid foundationBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  34. 34. TRENDSBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  35. 35. TRENDS Ethan MarcotteBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  36. 36. TRENDS Responsive Design • Flexible foundation • Responsive architecture • Adaptive templatesBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  37. 37. TRENDS Simon CollisonBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  38. 38. TRENDS Boston GlobeBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  39. 39. TRENDS DisneyBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  40. 40. TRENDS Anti- Responsive Design Responsive Design is counter productive, not-fit-for-purpose, and based on hypocritical-and-contradicting bull***. KEVIN GALLAGHER http://kevinjohngallagher.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  41. 41. TRENDS Responsive Design Mobile DesignBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  42. 42. Basics Responsive Design I think of responsive design as an alternative to mobile sites. ETHAN MARCOTTE Experiencinginformation.comBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  43. 43. TRENDS Luke WroblewskiBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  44. 44. TRENDS Mobile First • Mobile is exploding. • Mobile forces you to focus. • Mobile extends your capabilities. Luke WroblewskiBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  45. 45. TRENDS CONTEXT UX CONTENT USERSBasics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
  46. 46. TRENDS http://www.lukew.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 44
  47. 47. TRENDS Mobile Considerations • Mobile Screen sizes – Varying widths based on devices 128, 160, 176, 240, 320, 360, 400, 480 • Display modes – Landscape and portrait • Technical Support – Javascript, cookies – Performance/SpeedBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  48. 48. TRENDS http://www.lukew.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 46
  49. 49. TRENDS Tablet Considerations • Tablet Screen sizes – Varying widths based on devices • Small ~5 inches (Galaxy Note) • Medium ~7-9 inches (Kindle Fire) • Large ~9-10 inches (iPad) • Display modes – Landscape and portrait • Technical Support – Javascript, cookies – Performance/SpeedBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  50. 50. TRENDS Organizing Mobile • Align with how people use their mobile devices and why. • Emphasize content over navigation. • Provide relevant options for exploration and pivoting. • Maintain clarity and focus. • Align with mobile behaviors Mobile First by Luke Wroblewski (A Book Apart, 2011)Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  51. 51. TRENDS Mobile Capabilities – Location/GPS – Multi-touch – Accelerometer – CameraBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  52. 52. TRENDS Touch FirstBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  53. 53. TRENDS 5th Finger’s Five Tenets • The NUI is not the GUI. • Be thoughtful about the location of your main interface elements & navigation. • It’s tactile like the real world so use existing real world metaphors! • Don’t be limited by what others are doing – create a new interaction paradigm • Be passionate, and iterate often, to build a tablet UX that customers go out of their way to ‘experience’ not just ‘use’. Steen Anderson, fingerfood.5thfinger.comBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  54. 54. TRENDS @Lukew in Mobile First: “When holding a touch phone screen with only your right hand, it’s easy to hit the dark green area and a stretch to tap the yellow area with your thumb.” UXRave.comBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  55. 55. TRENDS http://www.lukew.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 53
  56. 56. TRENDS http://www.lukew.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 54
  57. 57. TRENDSBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 55
  58. 58. TRENDS Mobile Experience Responsive design, adaptive design, progressive enhancement, and progressive disclosure give us the technical tools we need to create a single website that works well on all sites. Were still learning to use those tools the right way. JOSH CLARK http://globalmoxie.comBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  59. 59. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  60. 60. EXPLORE: Noteworthy PracticesBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  61. 61. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  62. 62. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  63. 63. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  64. 64. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  65. 65. MOBILE Taylor  photostream Taylor  photostreamBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  66. 66. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  67. 67. MOBILE Taylor  photostream Taylor  photostreamBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  68. 68. MOBILE Taylor  photostream Taylor  photostreamBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  69. 69. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  70. 70. MOBILE Taylor  photostream Taylor  photostreamBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  71. 71. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  72. 72. MOBILEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  73. 73. MOBILE Taylor  photostream Taylor  photostreamBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  74. 74. EXPLORE Noteworthy Practices • Fluid layouts to fit various sizes for mobile devices • Consider performance and load times • Dont use hover states • Keep design and functionality simple • Option to visit full siteBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  75. 75. Let’s discover! RESEARCH http://www.flickr.com/photos/visualpanic/233508614/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  76. 76. DISCOVERY http://www.flickr.com/photos/madlyinlovewithlife/6500454297/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  77. 77. DEFINEBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  78. 78. DISCOVERY: Journey Maps http://uxfindings.wordpress.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  79. 79. DISCOVERY: Journey Maps Journey Maps Customer journey maps are "cradle to grave," looking at the entire arc of engagement HBR Blog http://bit.ly/aAkvtdBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  80. 80. DISCOVERY: Journey Maps Journey Maps “Answering customer needs is the end point of our journeys through the structure and the starting point of our thinking about the journey itself.” JASON HOBBS http://bit.ly/WDPXxmBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  81. 81. DISCOVERY: Journey Maps Exercise: Journey Maps • Share your journey maps • Identify common themes for: – Before Trip – During Trip – After Trip • Create a common journey map – Note gaps and opportunitiesBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  82. 82. Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 89
  83. 83. DISCOVERY: Journey Maps Brainstorming We happen to think idea generation is an art form. Its about setting a safe, creative space for people to feel like they can say anything, be wild, not be judged, so that new ideas can be born. http://www.openideo.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  84. 84. DISCOVERY OpenIDEO brainstorming rules • Defer judgment • Encourage wild ideas • Build on ideas of others • Stay focused on the topic • One conversation at a time • Be visual • Go for quantity http://www.openideo.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  85. 85. DISCOVERY: Journey Maps KJ Method The KJ-Method, named for its inventor, Jiro Kawakita (the Japanese put their last names first), allows groups to quickly reach a consensus on priorities of subjective, qualitative data. http://www.openideo.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  86. 86. DISCOVERY KJ Method • Determine focus question • Organize group • Put opinions on sticky notes • Put stick notes on the wall • Group similar items • Name each group • Vote for most important group • Rank the most important groups http://bit.ly/cYIW14Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  87. 87. DISCOVERY: Journey Maps Hybrid Exercise: • Brainstorm ideas – How do we... • Analysis – Cluster similar ideas – Identify core themes – Prioritize featuresBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  88. 88. DISCOVERY: Journey Maps Concept Maps In the territory of concepts, a good map can help us see where we are and decide what to do by establishing landmarks, clarifying relationships, and identifying true north. Peter Morville semanticstudios.comBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  89. 89. DISCOVERY: Mind Mappinghttp://www.mindmeister.com/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 98
  90. 90. DISCOVERY Site Evaluations Information Organization • Is information presented in a logical structure? • Is it clear how site components and sections are related? Are content/function areas logically/intuitively grouped? Navigation • Is the navigation consistent across the site? • Does it help users answer the three fundamental navigation questions: Where am I? Where have I been? Where can I go? Nomenclature • Is terminology clear and consistent across the site (including navigation elements)? • Does the site avoid the use of incomprehensible industry jargon? User interface • Does the site support both experienced and novice users effectively? • Are visual cues are easily understood and consistent? Dorelle Rabinowitz : http://bit.ly/7HRL9hBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  91. 91. DISCOVERY Holiday Guides Product Guides School Guides Travel GuidesBasics of Interaction Design + Strategy | Spring 2012 Financial Guides School of Visual Arts | Anh Dang
  92. 92. DISCOVERY The ConfiguratorBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  93. 93. CONFIGURATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  94. 94. CONFIGURATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  95. 95. CONFIGURATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  96. 96. CONFIGURATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  97. 97. CONFIGURATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  98. 98. The Facet-ilatorBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  99. 99. FACET-ILATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  100. 100. FACET-ILATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  101. 101. FACET-ILATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  102. 102. FACET-ILATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  103. 103. The NavigatorBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  104. 104. NAVIGATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  105. 105. NAVIGATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  106. 106. NAVIGATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  107. 107. NAVIGATOR DISCOVERYBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  108. 108. DISCOVERY Key Findings for Guides • Configurator: allow users to build up a product based on their interest in a bottom up manner. • Faceted Search: encourage users to narrow down their options based on their goals in a top down manner. • Navigator: lets users browse all options organized in defined hierarchy.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  109. 109. DISCOVERY Themes While the main difference is the directional approach used to accomplish a task… CONFIGURATOR FACET-ILATOR NAVIGATOR the ultimate goal is to allow users to control their experience and receive information that is highly relevant to their goals in an easy, efficient and engaging manner.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  110. 110. 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 optionsBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  111. 111. Let’s eat! LUNCHBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  112. 112. Let’s define! DESIGN PLANNING http://www.flickr.com/photos/nektar/6085554556/Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  113. 113. The BriefBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  114. 114. BRIEF: New York Times TravelCMYK Sxxx,2012-11-11,TR,001,Bs-4C,E1A SPECIAL ISSUE SUNDAY, NOVEMBER 11, 2012 Travel Print School of Visual Arts | Anh Dang ANDREA DE SILVA/REUTERS, VIA NEWSCOM Basics of ABOVE Patricia Bailey presents+ creation at the |King and Queen of Carnival competition in Port of Spain, Trinidad, last February. BELOW Suite at Geejam, in Jamaica. Interaction Design a Strategy Spring 2012 127
  115. 115. BRIEF: New York Times Travel Travel OnlineBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  116. 116. BRIEF: New York Times Travel Travel GuidesBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  117. 117. BRIEF: New York Times Travel Frugal TravelerBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  118. 118. BRIEF: New York Times Travel Places To GoBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  119. 119. BRIEF: New York Times Travel 36 HoursBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  120. 120. BRIEF: New York Times Travel Key Opportunities • Editorial – 6 years of Places to Go, over 250 destinations – Featured articles – Slideshows – 36 Hours - weekly – 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 travelersBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
  121. 121. BRIEF: New York Times Travel 36 HoursBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 134
  122. 122. BRIEF: New York Times Travel CMYK Sxxx,2011-09-18,TR,004,Bs-4C,E1 4 TR THE NEW YORK TIMES, SUNDAY, SEPTEMBER 18, 2011 36 Hours Quito, Ecuador PHOTOGRAPHS BY KIKE CALVO FOR THE NEW YORK TIMES FROM LEFT La Boca del Lobo has a lounge and glassed-in patio; musicians play and residents break into dance at Plaza San Francisco; ice cream for sale at Plaza San Franscisco. By MICHELLE HIGGINS 7:30 p.m. N • With a Latin Twist PICHINCHA ONLINE: READERS’ THOUGHTS VOLCANO Swiss 1/4 MILE ESTLED amid snowcapped 2 10 Corner DE Andean peaks, Ecuador’s Hacienda See a slide show of Quito, Ecuador, 9 Rumiloma LA Theatrum Restaurant & Wine Bar (Tea- OSTO capital has long been over- and share your suggestions on where Teleferiqo looked by travelers on their tro Nacional Sucre, Calle Manabi be- AV. DE LOS SHYRIS to stay, where to eat and what to do. AG RE RO tween Guayaquil and Flores; 593-2-257- Cruz Loma FA PÚ way to the country’s most 10 DE AL travel.nytimes.com/quito OY BLICA famous destination, the Galápagos Is- 1011; theatrum.com.ec), on the second TRA Bellavista EL M lands. But visitors who bypass this live- floor of the National Theater, serves AVE. ly historic city of some two million peo- Mediterranean cuisine with a Latin FCO. E Teleférico 5 DE ly above the clouds. The jarring ride is BR 6 ORE ple are missing out. At 9,350 feet above twist in a high-vaulted room draped in LLANA EM Capilla del Metro Café 4 well worth it for a romantic dinner DICI sea level, on the eastern slopes of the red velvet curtains. The five-course Hombre C. LA RÁBIDA overlooking the city. Outfitted in a tasting menu ($38 plus tax; the official 6 DE Pichincha Volcano, Quito offers breath- hodgepodge of Baccarat chandeliers, taking vistas around nearly every cor- currency in Ecuador is the United Quito Mariscal booths made of thick slabs of worn Olga Fisch ner. Its historic center, a Unesco World States dollar) includes specials like Plaza Foch/ La Boca wood and antique chairs covered in del Lobo 8 Heritage site, is one of the largest in grilled octopus with olives and fava Q Restaurant 3 woven fabrics, the restaurant offers a beans, crab ravioli and rabbit risotto, C. FO South America, with 40 colonial C. WAS JO 7 luxurious, rustic feel, with a wood-burn- M TO NA RIA HI RGE AR CH churches and chapels, 16 convents and and a refreshing sorbet as a palate VIC . RIE NG La Chillangua ing stove in one corner and a baby SI TO CA cleanser. The restaurant will also ar- Verde Esmeralda C monasteries and picturesque plazas. In N grand piano in another. Specialties like L recent years, museums have been range free transportation to and from ECUADOR Mercado Artesanal 1 MILE La Marsical the Asian-influenced camarones Rumi- opened; mansions restored; hotels, your hotel. loma ($20) and cordero La Cantera, a restaurants and cafes opened and safe- PARQUE savory lamb dish ($22), are served on EL EJIDO ty improved. And this year, in recogni- 10 p.m. heavy metal platters. Head downstairs • Party Plaza tion of Quito’s rich mix of architectural 11 Basílica del Voto Nacional to the Irish Pub for an after-dinner heritage and cultural traditions, the In- 3 Quito drink next to the fireplace. (There are ternational Cultural Capitals Bureau C. GABRIAL also luxurious suites with fireplaces chose the city as its 2011 American Cap- If the food and altitude haven’t sapped GARCÍA MORENO VENEZUELA your energy, head to Plaza Foch at the from $305.) ital of Culture. intersection of Calle Reina Victoria and Hotel Patio Theatrum Restaurant Andaluz 2 & Wine Bar Friday  Mariscal Foch in northern Quito, where Plaza San Francisco Sunday young people gather before hitting Itchimbía Centro Cultural/ Pacific Pim’s COLOMBIA 10 a.m. 5:30 p.m. nearby night spots. A noticeable police Plaza de la Independencia/ Ocean • Swiss Breakfast Plaza Grande Hotel • Sunset Over the City presence makes it safe to explore the Quito 10 1 immediate area, but if you plan to party ANTONIA JOSÉ DE SUCRE Parque ECUADOR beyond the three-block radius of Cala- La Compañía de Jesús Itchimbía Grab a pastry at the Swiss Corner’s Casa Parque Itchimbía (Calles José María ma, Juan León Mera and Pinto Streets, Gangotena 1 deli/bakery (at the corner of Avenida Aguirre N4-108 and Concepción; 593-2- take a taxi. On Fridays, you’ll find live PERU De los Shyris N38-41 and El Telégrafo; 200 MILES 322-8470) offers panoramic views, in- music after 10 p.m. at Q, a restaurant 592-2-280-5360) or sit down in its cheery cluding Quito’s historic center and, in and bar at the base of the NU House THE NEW YORK TIMES restaurant next door for yogurt and the distance, the winged Virgin of Quito boutique hotel (Calles Marsical Foch fruit parfaits or eggs and hash browns. statue. Check out the Art Nouveau Itch- E6-12 and Reina Victoria; 593-2-255- Prices from $3 to $10. imbía Cultural Center (Itchimbía Cen- 7840; quitoq.com). Across the plaza, La for the express line ($8.50 for tourists, encocadas, a rich seafood dish pre- tro Cultural, 593-2-258-4362; centrocul- Boca del Lobo (Calles Calama 284 and $4.90 for locals). At the top, stroll the pared with coconut juice. 11 a.m. tural-quito.com). The glass and steel Reina Victoria; 593-2-252-7915; nature paths threaded amid waving structure imported from Hamburg in 1889 was on the other side of the city labocadellobo.com.ec) has a red lounge grasses and buy coca tea ($2.25) at the tea shop in the mountain lodge to help 3 p.m. • Old Town 11 • Folklore and Foraging and a glassed-in patio with funky chan- until it was moved to Itchimbía hill in deliers, hanging bird cages and ceiling counteract the high altitude. 8 The cobblestone streets of Quito’s his- 2004. Then, venture below the observa- tiles featuring religious iconography. It toric center are closed to traffic from 8 tion deck, where you’ll find Pim’s, an Folklore Olga Fisch (Avenidas Colón a.m. to 2 p.m. on Sunday — an ideal op- serves a selection of fried appetizers for 11:30 a.m. Ecuadorean chain. Order a cocktail and E10-53 and Caamaño; 593-2-254-1315; portunity to explore. Start at the Basíl- • Art and Architecture midnight snacking. find a seat near one of the heat lamps 6 olgafisch.com) is a boutique with a se- ica del Voto Nacional, (Calle Carchi 122 on the outdoor deck to watch the lights lection of indigenous and Ecuadorean and Venezuela; 593-2-228-9428), Ecua- come on in the city below.   Saturday La Capilla del Hombre (Calles Lorenzo art, including handwoven tapestries, dor’s largest Gothic cathedral, adorned Chávez EA18-143 and Mariano Cal- silver jewelry, straw fedoras and pot- with gargoyles inspired by the coun- 3 a.m. vache; 593-2-244-8492; tery. It’s a must-stop for shoppers. The • After Hours try’s iguanas, pumas and Galápagos 4 capilladelhombre.com), which means small museum upstairs displays pre- tortoises. Then take Calle García More- IF YOU GO Chapel of Man, is an impressive cultur- Columbian artifacts and post-colonial no to the Plaza de la Independencia, Most bars close by 3 a.m. One after- al complex conceived in 1985 by Os- art. Next, hone your haggling skills at Taxis (typically $2 to $6) are recom- Quito’s main square, surrounded by the hours option is the Metro Café (Aveni- waldo Guayasamín, one of Ecuador’s El Ejido park, a short taxi ride away, mended for getting around, especially cathedral, the Presidential Palace, the da Orellana at the corner of Rábida; greatest artists, as a tribute to the resil- where artisans in indigenous garb line at night. Or rent an air-conditioned Archbishop’s Place and City Hall. Take 593-2-255-2570), which prepares diner ience of the Latin American peo- the northern end on most weekends mini-van with a driver, about $130 for a a break at the Plaza Grande Hotel’s fare around the clock. It’s also a good ple. The three-story museum, in the with stalls featuring handmade jewelry, 14-hour day from JL Turismo, jlturis- Café (Calles García Moreno and Chile; breakfast option, serving up stacks of Bellavista neighborhood, houses a alpaca scarves, wooden flutes and oth- moecuador.com. 888-790-5264; plazagrandequito.com) pancakes and greasy-spoon dishes like heart-wrenching sequence of paintings, er crafts. Nearby, the Mercado Artesa- In Old Town, Hotel Patio Andaluz and order a creamy cup of Ecuadorean Cheddar scrambled eggs with hash murals and sculptures that captures nal La Mariscal (Calles Jorge Washing- (García Moreno N6-52 between Mejía hot chocolate ($5). Continuing on Calle browns and bacon. During the day, the miseries and victories of people ton between Reina Victoria and Juan and Olmedo; 593-2-228-0830; hotelpa- García Moreno, you will pass La Com- families with restless children will ap- struggling against political oppression. León Mera) has about another hundred tioandaluz.com) has 32 elegant rooms pañía de Jesús, with its gold-leaf altar. preciate the outdoor playground. stalls of similar souvenirs. with antique-style furniture. Rates from Entrance: $2. On Calle Sucre, head up- $200 a night. 1 p.m. hill to the Plaza San Francisco, dom- • A Taste of the Coast Casa Gangotena, a historic mansion 9 a.m. 8 p.m. inated by a church and convent, where • Into Thin Air • Above the Clouds 7 overlooking Plaza San Francisco in Old musicians gather and locals spontane- 5 9 Town Quito (Calle Bolivar 541; casagan- Settle in for lunch on the leafy patio of ously break into dance. Next, make gotena.com) plans to offer 33 rooms Take the dizzying Teleférico aerial tram La Chillangua Verde Esmeralda (Calles Hold tight for a bumpy ride up the pot- your way to the pedestrian street La with painted tin ceilings, antique furni- up to the Cruz Loma viewpoint, some Zaldumbie N25-165 and Toledo; 593-2- holed gravel road to Hacienda Rumilo- Ronda (also known as Calle Morales), ture and marble bathrooms beginning 13,000 feet above sea level (Avenidas 222-5313), which specializes in coastal ma (at the end of Obispo de la Madrid; where balconies are decorated with this month. Rooms will start at $425, Occidental and Fulgencio Araujo; 593- Ecuadorean cuisine, including tasty ce- 593-2-320-0953; haciendarumiloma flowers and flags, children play hop- with breakfast. There will be eight 2-222-2996). Bring a hat (temperatures viches (from $6 for a small calamari to .com), more than 10,000 feet up the scotch and tiny restaurants serve up rooms with plaza views for $550 a night. drop as you climb to the top) and spring $16 for a large langosta) and camarones slopes of the Pichincha Volcano, literal- Ecuadorean specialties. ÆBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 135
  123. 123. BRIEF: New York Times TravelBasics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang 136
  124. 124. BRIEF: New York Times Travel What are we designing? The 36 Hours | Top10 will be a travel destination that highlights a list of ten destinations to visit optimized for all devices - desktop, tablet, mobile.Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang

×