Designing Interactions / Experiences: Lecture #05

2,840 views

Published on

This is the 5th (fifth) lecture of the "Designing Interactions / Experiences" module I’m teaching at Köln International School of Design of the Cologne University of Applied Sciences, which I’m honored to give by invitation of Professor Philipp Heidkamp. In this presentation we discuss the different design artifacts typically produced during the ideation stage

Published in: Design, Technology
  • Be the first to comment

Designing Interactions / Experiences: Lecture #05

  1. 1. { Designing Interactions: The Design of Experiences } Youareat: Introduction » Welcome Designing Interactions: Welcome! My name is Itamar Medeiros http://www.designative.info/ http://www.linkedin.com/in/designative/ medeiros.itamar@gmail.com @designative
  2. 2. { Designing Interactions: The Design of Experiences } Youareat: Introduction » Learning Objectives and Outline Designing Interactions: The Design of Experiences Learning Outcomes §  You will learn about the different design artifacts typically produced during the ideation stage Class Outline §  Bridge the Research and Design §  The Language of Interactive Experiences §  Conceptual Design Documents, Wireframes, and Paper Prototypes §  High Fidelity Mockups, Design Specifications
  3. 3. Introduction: Collect / Create / Relate / Donate Collect Learn from previous experiences ! Relate Consult with peers and mentors " # $ Create Explore, compose, and evaluate possible solutions Donate Disseminating results Shneiderman, B. (February 1999), Creating Creativity for Everyone: User Interfaces for Supporting Innovation, ACM Transactions on Computer-Human Interaction 7, 1 (March 2000), 114-138. { Designing Interactions: The Design of Experiences } Youareat: Introduction » Collect / Create / Relate / Donate
  4. 4. { Designing Interactions: The Design of Experiences } Youareat: Collect » Course Outline Design Thinking (1/3 of the course) §  Week 01: Design “vs” Design Thinking §  Week 02: Discovery “Mode” §  Week 03: Interpretation “Mode” §  Week 04: Reflection in Action Course Outline
  5. 5. { Designing Interactions: The Design of Experiences } Youareat: Collect » Course Outline Information Design (1/3 of the course) §  Week 05: Visualizing Data / Processes §  Week 06: Diagrams (Affinity / Swimlane / System Boundaries) and Models (Mental / Work / Artifact) §  Week 07: Story Telling (Storyboarding / Customer Journey Maps / Personas & Scenarios) §  Week 08: Reflection in Action Course Outline
  6. 6. { Designing Interactions: The Design of Experiences } Youareat: Collect » Course Outline User Experience Design (1/3 of the course) §  Week 09: Turning Insights into Action §  Week 10: Concept Design, Wireframing, Prototyping §  Week 11: User Validation §  Week 12: Reflection in Action Course Outline
  7. 7. { Designing Interactions: The Design of Experiences } Youareat: Collect » Course Outline Bridge the Research and Design After all the time we’ve spent gathering user insights, framing and prioritizing design opportunities, now is time to address the design challenge with design solutions
  8. 8. The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
  9. 9. IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
  10. 10. “Design Thinking” “Information Design” “Interaction Design”
  11. 11. { Designing Interactions: The Design of Experiences } Youareat: Collect » User Experience » Definitions "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. User Experience: Definitions Norman, D., Nielsen, J., (2014), The Definition of User Experience, retrieved January 9, 2014 from http://www.nngroup.com/articles/definition-user-experience/
  12. 12. We’re seeing the rise of the “experiential industry”, in which people in the “future”, would be willing to allocate high percentages of their salaries to live amazing experiences. User Experience: Definitions Pine, J.B, Gilmore, J.H, (1999), The Experience Economy: Work Is Theater & Every Business a Stage, Harvard Business School Press, Boston, 1999. { Designing Interactions: The Design of Experiences } Youareat: Collect » User Experience » Definitions
  13. 13. TheHuffingtonPost.com, (2014), The World’s Most Expensive Restaurant is Where?, retrieved June 12th 2014 from http://www.huffingtonpost.com/2014/04/24/most-expensive- restaurant_n_5207199.html
  14. 14. TheHuffingtonPost.com, (2014), The World’s Most Expensive Restaurant is Where?, retrieved June 12th 2014 from http://www.huffingtonpost.com/2014/04/24/most-expensive- restaurant_n_5207199.html
  15. 15. It is user experience that forms the customer’s impression of the company’s offerings, it is user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back User Experience: Definitions Garrett, J.J, (2010), The Elements of User Experience: User-Centered Design for the Web, New Riders; 2 edition (December 26, 2010) { Designing Interactions: The Design of Experiences } Youareat: Collect » User Experience » Definitions
  16. 16. The sensation of interaction with a product, service, or event, through all of our senses, over time, and on both physical and cognitive levels. Experience: Definitions Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011, http://www.nathan.com/thoughts/unified/19.html { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Definitions
  17. 17. Since our objective is to create interactive experiences, let’s try to understand the difference between passive experiences -- like watching television or reading a book -- and interactive experiences. Language of Experiences { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Definitions
  18. 18. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011, http://www.nathan.com/thoughts/unified/19.html
  19. 19. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011, http://www.nathan.com/thoughts/unified/19.html
  20. 20. Passive Interactive Feedback Control Sophisticated Navigation, High Audience Control Creativity Creation Tools, Creation Help Productivity Productivity Tools, Living Information Communications Adaptivity Artificial Intelligence, Agents, etc… Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011, http://www.nathan.com/thoughts/unified/19.html
  21. 21. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011, http://www.nathan.com/thoughts/unified/19.html
  22. 22. Experience: Control & Feedback Aspects of interactivity defined by how much control users have over the outcome or the rate, sequence, or type of action, and how much feedback exists in the interface. { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Control & Feedback
  23. 23. Taito Corporation, (1980), Space Invaders. [CARTRIGDE] Atari 2600. Tokyo: Taito Corporation.
  24. 24. Blizzard Entertainment, (2007), World of Warcraft: The Burning Crusade. [DISC] PC / MAC. Irvine, Calif: Blizzard Entertainment..
  25. 25. Experience: Productivity & Creativity Type of interaction that allows the user to make, do, or share something themselves: users must participate by creating or manipulating instead of merely watching and consuming. { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Productivity & Creativity
  26. 26. Autodesk, Inc., (2011), Autodesk AutoCAD. [DISC] PC/Mac. San Rafael, Calif: Autodesk, Inc.
  27. 27. Apple, Inc. (2012), iMovie for iOS, Cupertino California.
  28. 28. Toca Boca (2012), Toca Band for iOS, Stockholm Sweden.
  29. 29. Toca Boca (2012), Toca Hair Salon for iOS, Stockholm Sweden.
  30. 30. Experience: Communicative Type of interaction that allow users to meet, talk, share their personal stories and opinions with other users of the system/product. { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Communicative
  31. 31. Brian Solis and JESS3., (2010), Conversation Prism, retrieved August 1st, 2011, http://www.theconversationprism.com/
  32. 32. Instagram, Inc. (2013), Instagram, iOS, San Francisco California.
  33. 33. Foodspotting, Inc. (2013), Foodspotting,iOS, San Francisco California.
  34. 34. Zynga, Inc. (2012), Draw Something Free, iOS, San Francisco California.
  35. 35. Zynga, Inc. (2012), Draw Something Free, iOS, San Francisco California.
  36. 36. Experience: Adaptive Type of interaction based on technologies that changes the experience based on the behavior of the user. These can include agents, modifying behaviors, and artificial intelligence. { Designing Interactions: The Design of Experiences } Youareat: Collect » Experience » Communicative
  37. 37. Activision, Inc., (2010), Call of Duty: Black Ops. [DISC] Xbox 360. Santa Monica, Calif: Activision, Inc.
  38. 38. Amazon LLC., (1996-2011), Amazon.com. retrieved August 1st 2011, http://www.amazon.com/
  39. 39. Foursquare Labs,, Inc. (2013), Foursquare, iOS, San Francisco California.
  40. 40. { Designing Interactions: The Design of Experiences } Youareat: Collect » User Experience Design » Definitions Experience design is the practice of designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions User Experience Design: Definitions Aarts, Emile H. L.; Stefano Marzano (2003). The New Everyday: Views on Ambient Intelligence. 010 Publishers. p. 46
  41. 41. Visua.ly (2013), Disciplines of User Experience Design, retrieved May 16th, 2013 from http://visual.ly/disciplines-user-experience-design
  42. 42. Psomas, S., (2007), The Five Competencies of User Experience Design in UX Matters, retrieved May 16th, 2013 from http://www.uxmatters.com/mt/archives/2007/11/the-five-competencies-of- user-experience-design.php
  43. 43. { Designing Interactions: The Design of Experiences } Youareat: Collect » Use Experience Design » Walking towards Clarity Since User Experience Design is such a interdisciplinary and collaborative discipline, the artifacts produced by experience designers are vital for the discussions that happen along the way through the product development process. User Experience Design: Walking towards Clarity
  44. 44. { Designing Interactions: The Design of Experiences } Youareat: Collect » Use Experience Design » Walking towards Clarity When design teams and other functional groups have to collaborate with Product Management to turn Marketing Requirements into Product Requirement Documents, it’s only natural that Product definition occurs at the beginning of the project. User Experience Design: Walking towards Clarity Medeiros, I. (2007), Political & Economical Issues in Distinction Award in the MA Design Practice, retrieved on January 9th, 2014 from http://designative.info/works/honors-awards/distinction-award-ma-design-practice/#Political
  45. 45. Medeiros, I. (2007), Political & Economical Issues in Distinction Award in the MA Design Practice, retrieved on January 9th, 2014 from http://www.designative.info/portfolio/honors-awards/distinction-award-ma-design-practice/
  46. 46. Paulson, B. (1976), Designing to Reduce Construction Costs in Journal of the Construction Division, ASCE. Proceedings of the American Society of Civil engineers, Vol. 102, Dec: 587-594
  47. 47. Beck, K., (2004). Boehm’s Curve in Extreme Programming Explained: Embrace Change. Boston: Addison-Wesley; 2nd edition (November 26, 2004)
  48. 48. { Designing Interactions: The Design of Experiences } Youareat: Collect » Use Experience Design » The Artifacts Here are some examples of design artifacts resulted throughout different phases of the product development process User Experience Design: The Artifacts
  49. 49. { Designing Interactions: The Design of Experiences } Youareat: Collect » Use Experience Design » The Artifacts One should – of course – consider how appropriate each artifact is based on a few variables: §  What information needs to be conveyed? §  Who is the audience? §  What phase of the product development? User Experience Design: The Artifacts
  50. 50. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Conceptual Design Documents Conceptual design is a type of art which gives precedence to hypothetical function, it is the creation and exploration of new ideas. The Artifacts: Conceptual Design Documents Wikipedia, (2014), Conceptual Design, retrieved January 23, 2014 from http://en.wikipedia.org/wiki/Conceptual_design
  51. 51. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  52. 52. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  53. 53. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  54. 54. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  55. 55. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  56. 56. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  57. 57. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  58. 58. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/
  59. 59. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Conceptual Design Documents Conceptual design can be also of a more abstract nature (and less detailed), specially if you’re trying to cast a vision, or to validate an idea in its early stages. The Artifacts: Conceptual Design Documents
  60. 60. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  61. 61. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  62. 62. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  63. 63. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  64. 64. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  65. 65. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  66. 66. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  67. 67. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  68. 68. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from http://www.rentathing.org/
  69. 69. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Wireframes Wireframes are diagrams based on the idea that you can describe the interactions of screen-based products by removing any aspects of the design incidental to the behavior The Artifacts: Wireframes Brown, D., (2010), Communicating Design: Developing Web Site Documentation for Design and Planning, New Riders; 2 edition (September 25, 2010)
  70. 70. Brown, D., (2010), Wireframe Samples - IPhone App for Zoo Visitors in Communicating Design, retrieved January 23, 2014 from http://communicatingdesign.com/2010/08/10/wireframes-samples-iphone-app-for-zoo-visitors/
  71. 71. A Produle Systems Pvt. Ltd. (2008-2014), Print Dialog in Samples created with Mockflow, retrieved January 23, 2014 from http://app.mockflow.com/view/E7BDE62D74C39BD59DCD75112B5F9126
  72. 72. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Prototypes Prototyping is a great way to communicate the intent of a design both clearly and effectively. Prototypes help you to flesh out design ideas, test assumptions, and gather real-time feedback from users. The Artifacts: Prototypes Warfel, T. Z., (2009), Prototyping: A Practitioner's Guide, Rosenfeld Media; 1st edition
  73. 73. Medeiros, I., (2014), Adding Basemaps from Consumer Map Services, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/adding-basemaps-consumer-map-services/
  74. 74. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Prototypes A prototype […] captures the intend of a design and simulates multiple states of that design. Wireframes and storyboards are static representations of a design that or their own merit do not simulate multiple states of a design, It’s the simulation and multiple states part that creates the distinction. The Artifacts: Prototypes Warfel, T. Z., (2009), Prototyping: A Practitioner's Guide, Rosenfeld Media; 1st edition
  75. 75. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved January 9, 2014 from http://designative.info/portfolio/user-experience/project- collaboration-tracking-app/
  76. 76. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved January 9, 2014 from http://designative.info/portfolio/user-experience/project- collaboration-tracking-app/
  77. 77. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved January 9, 2014 from http://designative.info/portfolio/user-experience/project- collaboration-tracking-app/
  78. 78. ProtoIO Inc, (2014), Wack-A-Monster, retrieved June 12th, 2014 from https://showcase.proto.io/share/?id=ea5c5bec-9589-465f-86bd-937b6d982d26&v=1
  79. 79. Warfel, T. Z., (2009), Sketching & Prototyping: Rapid Design Techniques, retrieved January 24, 2014 from https://vimeo.com/5381949
  80. 80. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Paper Prototypes High Fidelity Mockups are more useful for refining the details of the design and are thus more effective in the later stages[…] They allow you to explore page layout and arrangement as well as more thorough investigations of color and palette choices. The Artifacts: High Fidelity Mockups Brink, T., Gergle, D., Wood, S., (2001), Usability for the Web: Designing Web Sites that Work, Morgan  Kaufmann;  1  edi1on  (October  29,  2001)
  81. 81. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Paper Prototypes Moving into high fidelity visual-design assets, you receive much more tactical feedback. Test participants will be able to respond to branding, aesthetics and visual hierarchy, as well as aspects of figure/ground relationship, grouping of elements, and the clarity of your calls-to-action. The Artifacts: High Fidelity Mockups Goethelf, J., Seiden, J., (2013), Lean UX: Applying Lean Principles to Improve User Experience, O'Reilly Media (March 8, 2013)
  82. 82. Medeiros, I., (2014), Cruising & Navigation App for iOS, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/ cruising-navigation-app-ios/
  83. 83. Medeiros, I., (2014), Cruising & Navigation App for iOS, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/ cruising-navigation-app-ios/
  84. 84. Medeiros, I., (2014), Cruising & Navigation App for iOS, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/ cruising-navigation-app-ios/
  85. 85. Medeiros, I., (2014), Cruising & Navigation App for iOS, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/ cruising-navigation-app-ios/
  86. 86. Medeiros, I., (2014), Cruising & Navigation App for iOS, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/ cruising-navigation-app-ios/
  87. 87. { Designing Interactions: The Design of Experiences } Youareat: Collect » The Artifacts » Paper Prototypes A design specification provides explicit information about the requirements for a product and how the product is to be put together. It also tells specific examples of how the design of the project should be executed, helping others work properly. The Artifacts: Design Specifications Wikipedia (2013), Design Specification, retrieved January 24, 2014 from http://en.wikipedia.org/wiki/Design_specification
  88. 88. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/
  89. 89. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/
  90. 90. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/
  91. 91. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/
  92. 92. Based on the level of clarity you have on the personas and scenarios derived from the user research, what kind of artifacts should be produced? User Experience Design: The Artifacts { Designing Interactions: The Design of Experiences } Youareat: Relate » User Experience Design » The Artifacts
  93. 93. Choose 1 (one) design artifact you think is more appropriate for the current phase of the product development process your are in { Designing Interactions: The Design of Experiences } Youareat: Create » The Artifacts » Exercise The Artifacts: Exercise
  94. 94. Go to our KISD Space for this course and share the artifacts you created. Itamar Medeiros http://designative.info/ http://twitter.com/designative itamar.medeiros@designative.info { Designing Interactions: The Design of Experiences } Youareat: Donate » Disseminating Results Donate: Disseminating Results

×