Interaction patterns: NOT your Average Design Patterns

  • 1,293 views
Uploaded on

Design patterns too often represent the low-level details of a design: the controls, interactions, and widgets. But they're not useful when addressing the more important and complex structural …

Design patterns too often represent the low-level details of a design: the controls, interactions, and widgets. But they're not useful when addressing the more important and complex structural problems of a system. After all, typical design patterns only show what someone else has designed—they don’t teach you HOW to create a holistic, well-structured design.

Interaction patterns are different because they focus on structure, interaction, and flow, not low-level design details. At InContext Design, they’re a critical part of our design process.

In this talk, I define Interaction Patterns and using real world examples, I illustrate some of their benefits:
• Reveal significant design problems by analyzing the structure (or lack of structure)
• Understand new design paradigms before incorporating them into your design
• Get out of a design rut and open up thinking—by understanding structure in different domains

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,293
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. May 2012 Interaction Patterns NOT your average design patterns 978.823.0100 David B. Rondeau, Design Chair 2352 Main Street, Suite 302 Concord, MA 01742 david.rondeau@incontextdesign.com Twitter: dbrondeau www.incontextdesign.com www.innovationincool.com Twitter: incontextdesign © 2012 InContext Enterprises Inc. All rights reserved.
  • 2. © 2012 InContext Enterprises Inc. All rights reserved.Design patterns
  • 3. © 2012 InContext Enterprises Inc. All rights reserved.Design patterns
  • 4. What are Interaction Patterns?© 2012 InContext Enterprises Inc. All rights reserved.
  • 5. © 2012 InContext Enterprises Inc. All rights reserved. What is interaction design? Space
  • 6. © 2012 InContext Enterprises Inc. All rights reserved. What is interaction design? Space Controls
  • 7. © 2012 InContext Enterprises Inc. All rights reserved. What is interaction design? Patterns – 6 notes Back/Forward View Sync Usage Trunk New Note Search Hide All Notes Notebooks Tags Web Clips Mobile Files Account Shared Created Title Updated Today, 10:46 AM LukeW | Multi-Device Layout Patterns Today, 10:52 AM Space NOTEBOOKS Today, 10:47 AM LukeW | 12 Standard Screen Patterns Today, 10:51 AM All Notebooks 543 Sep 23, 2011 3:52 PM Components Versus Patterns September 23, 2011 3:52 P dbrondeau’s notebook 10 Sep 23, 2011 3:38 PM Using interaction design patterns to clarify and push September 23, 2011 3:38 P Design Stack July 23, 2010 10:50 AM Dark Patterns: dirty tricks designers use to make people do stuff– 90 Percent of Ev… July 23, 2011 10:50 AM Controls Blog 21 Design 63 May 20, 2010 12:05 AM A List Apart: Articles: Design Patterns: Faceted Navigation May 20, 2010 12:05 AM Design Curriculum 13 Content Design Log 38 Patterns 6 Genealogy 12 LukeW | Multi-Device Layout Patterns Personal Stack To Read 28 Patterns click to add tags To Share 31 Created: May 4, 2012 Updated: May 4, 2012 www.lukew.com TAGS 3D Printing 3 Advertising 4 Aesthetics 2 Augmented Reality 23 Image Automobiles 11 SAVED SEARCHES Logo Multi-Device Layout Patterns March 14, 2012 by Luke Wroblewski Image Through fluid grids and media query adjustments, responsive design enables W eb page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, were not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable
  • 8. © 2012 InContext Enterprises Inc. All rights reserved. What is interaction design? Patterns – 6 notes Back/Forward View Sync Usage Trunk New Note Search Hide All Notes Notebooks Tags Web Clips Mobile Files Account Shared Created Title Updated Today, a tag AM Find 10:46 LukeW | Multi-Device Layout Patterns Today, 10:52 AM Space NOTEBOOKS Today, 10:47 AM LukeW | 12 Standard Screen Patterns Today, 10:51 AM All Notebooks 543 Sep3D printing 3:52 PM 23, 2011 Components Versus Patterns September 23, 2011 3:52 P dbrondeau’s notebook 10 Sep 23, 2011 3:38 PM Using interaction design patterns to clarify and push September 23, 2011 3:38 P Advertising Design Stack July 23, 2010 10:50 AM Dark Patterns: dirty tricks designers use to make people do stuff– 90 Percent of Ev… July 23, 2011 10:50 AM Controls Aesthetics Blog 21 May 20, 2010 12:05 AM A List Apart: Articles: Design Patterns: Faceted Navigation May 20, 2010 12:05 AM Augmented Reality Design 63 Automobiles Design Curriculum 13 behavior Content Design Log 38 books Patterns 6 charity Genealogy 12 LukeW | Multi-Device Layout Patterns Coaching Personal Stack Interaction To Read 28 To Share 31 Conference Patterns Constraints click to add tags Consumer Created: May 4, 2012 Updated: May 4, 2012 www.lukew.com TAGS cool 3D Printing 3 Course Advertising 4 creativity Aesthetics 2 criticism Augmented Reality 23 Image Css3 Automobiles 11 design share SAVED SEARCHES Logo design thinking edge cases Education Multi-Device Layout Patterns Elderly Frameworks Gesture March 14, 2012 by Luke Wroblewski Image Through fluid grids and media query adjustments, responsive design enables W eb page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, were not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable
  • 9. © 2012 InContext Enterprises Inc. All rights reserved. What is interaction design? Patterns – 6 notes Back/Forward View Sync Usage Trunk New Note Search Hide All Notes Notebooks Tags Web Clips Mobile Files Account Shared Created Title Updated Today, a tag AM Find 10:46 LukeW | Multi-Device Layout Patterns Today, 10:52 AM Space NOTEBOOKS Today, 10:47 AM LukeW | 12 Standard Screen Patterns Today, 10:51 AM All Notebooks 543 Sep3D printing 3:52 PM 23, 2011 Components Versus Patterns September 23, 2011 3:52 P dbrondeau’s notebook 10 Sep 23, 2011 3:38 PM Using interaction design patterns to clarify and push September 23, 2011 3:38 P Advertising Design Stack July 23, 2010 10:50 AM Dark Patterns: dirty tricks designers use to make people do stuff– 90 Percent of Ev… July 23, 2011 10:50 AM Controls Aesthetics Blog 21 May 20, 2010 12:05 AM A List Apart: Articles: Design Patterns: Faceted Navigation May 20, 2010 12:05 AM Augmented Reality Design 63 Automobiles Design Curriculum 13 behavior Content Design Log 38 books Patterns 6 charity Genealogy 12 LukeW | Multi-Device Layout Patterns Coaching Personal Stack Interaction To Read 28 To Share 31 Conference Patterns Constraints click to add tags Consumer Created: May 4, 2012 Updated: May 4, 2012 www.lukew.com TAGS cool 3D Printing 3 Course Advertising 4 creativity Aesthetics 2 criticism Augmented Reality 23 Image Css3 Automobiles 11 design share SAVED SEARCHES Logo design thinking edge cases Education Multi-Device Layout Patterns Elderly Frameworks Gesture March 14, 2012 by Luke Wroblewski Image Through fluid grids and media query adjustments, responsive design enables W eb page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, were not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable
  • 10. © 2012 InContext Enterprises Inc. All rights reserved.Components of design Logo f with Facebook Join | About | Login GO All Technology World & Business Science Gaming Lifestyle Entertainment Sports Offbeat Artist/Group advanced search Popular Upcoming | News Videos Images | CustomizeNOTEBOOKS Worse, the touch screen is balky and nonresponsive, even for the All Notebooks 543 Nook product manager who demonstrated it for me. The only thing slower than the color strip is the main screen above it. Even dbrondeau’s notebook 10 though it’s exactly the same E Ink technology that the Kindle and Design Stack Sony Readers use, the Nook’s screen is achingly slower than the Blog 21 Kindle’s. It takes nearly three seconds to turn a page — three Design 63 Arial 14 A times longer than the Kindle — whichAis really disruptive if you’re A in midsentence. Design Curriculum 13 B I ABC A Design Log 38 Often, you tap some button on the color strip — and nothing Patterns 6 happens. You wait for the Nook to respond, but there’s no Genealogy 12 progress bar, no hourglass, no indication that the Nook ―heard‖ you. So you tap again — but now you’ve just triggered a second PLAY Personal Stack command that you didn’t want. To Read 28 To Share 31 It takes four seconds for the Settings panel to open, 18 seconds for the bookstore to appear (over Wi-Fi), and 8 to 15 seconds to open a book or newspaper for the first time, during which you stare at a message that says ―Formatting.‖ 05:02 HD Add Bookmark Name Genre Artist Album by Artist Time RatingAdd to Home Screen 1 Blue Thunder Indie Pop Galaxie 500 On Fire 3:48 2 Tell Me Indie Pop Galaxie 500 On Fire 3:52 ***** 3 Snowstorm Indie Pop Galaxie 500 On Fire 5:13 ****Mail Link to this Page 4 Strange Indie Pop Galaxie 500 On Fire 3:18 ***** 5 When Will You Come Home Indie Pop Galaxie 500 On Fire 5:22 ***** Print 6 Decomposing Trees Indie Pop Galaxie 500 On Fire 4:07 ***** 7 Another Day Indie Pop Galaxie 500 On Fire 3:43 ***** 8 Leave The Planet Indie Pop Galaxie 500 On Fire 2:42 **** 9 10 Plastic Bird Isn’t It A Pity Indie Pop Indie Pop Galaxie Galaxie 500 500 On Fire On Fire 3:18 5:11 **** **** *****
  • 11. © 2012 InContext Enterprises Inc. All rights reserved.A screen is made up of components
  • 12. © 2012 InContext Enterprises Inc. All rights reserved.A screen is made up of components Assorted Tools Simple Search Filter Content Section Navigation Item List (Table) Collection List Item Summary Info Tag List Save Searches List Content Item Advertising Toolbar
  • 13. © 2012 InContext Enterprises Inc. All rights reserved.Components are organized into sections Tool Section Assorted Tools Simple Search Filter Content Section Navigation Navigation Navigation Section Section Item List (Table) Collection List Primary Content Section Item Summary Info Tag List Save Searches List Content Item Advertising Toolbar
  • 14. © 2012 InContext Enterprises Inc. All rights reserved. Screen patterns Name of pattern: Collected Content Tool Section Assorted Tools Simple Search Filter Content Components+ Sections Navigation Section Navigation Section Section Navigation Item List (Table)= Screen Collection ListPattern Tag List Primary Content Section Saved Searches Item Summary Info Content Item Advertising Toolbar Purpose: Collect and manage digital content Used by: Collect Content – List View
  • 15. © 2012 InContext Enterprises Inc. All rights reserved. Combine to create subsystems Manage Content Subsystem Add/Edit Item Utility Collected Content Collected Content Tool Section Tool Section Tool Section Navigation Navigation Section Component Section Navigation Navigation Section Navigation Section Navigation Section Primary Content Section Add/Edit Item Section Section Section Primary Content Section or Screen Searchable Filter Utility Subsystem Tool Section Searchable Item List • List View • Detail List View •Thumbnail View Any Screen External Content Customize Utility Tool Section Customize Toolbar Any Screen
  • 16. © 2012 InContext Enterprises Inc. All rights reserved. Combine to create whole systems System Pattern Sharing Subsystem Manage Content Subsystem Component Add/Edit Item Collected Content Manage Sharing Sharing Invite & Confirmation Invitation Email Utility Section Screen Searchable Filter Utility Subsystem Registration Utility Usage Info Utility System Customize Utility External Content Marketplace Subsystem Marketplace Product Detail
  • 17. © 2012 InContext Enterprises Inc. All rights reserved.Interaction patterns apply everywhere
  • 18. How Do You Use Them?© 2012 InContext Enterprises Inc. All rights reserved.
  • 19. © 2012 InContext Enterprises Inc. All rights reserved.Our design processStep of Process Interaction Design PatternsHeuristic evaluation Reveal structural problems Provide focus for user interviewsVision new concepts Help define scopeCreate storyboards Push design thinking Improve structural thinkingDocument system functions Provide way to organize functions by place, section, and componentBuild paper prototypes Maintain coherent structure Reveal structural problemsMake design changes Provide way to organize issues by place, section, and component Help resolve high-level structural issues firstDeliver design recommendations Communicate structure of design for implementation and future expansion
  • 20. © 2012 InContext Enterprises Inc. All rights reserved.Identify structural problems
  • 21. © 2012 InContext Enterprises Inc. All rights reserved.Identify structural problems
  • 22. © 2012 InContext Enterprises Inc. All rights reserved.Identify structural problems
  • 23. © 2012 InContext Enterprises Inc. All rights reserved.Identify structural problems
  • 24. © 2012 InContext Enterprises Inc. All rights reserved.Understand new interaction paradigms Primary NavigationSketch the structure and transitions Item List Author InfoAsk yourself:  What is it? • Sliding content panels  How is it different? • Don’t go to content, it’s brought to me  Why does it behave this way? • There’s a lot of drilldown and linking  Is this a good solution to this problem? • Yes  Why is it a good solution? • It maximizes space and makes it easy to browse content  Does it fit my situation?  Where else might it apply?
  • 25. © 2012 InContext Enterprises Inc. All rights reserved.Push your design thinkingDecide where you need fresh thinking  Typically screen or component levelIdentify 3-4 products in differentdomains that support same intent  For example: Designing search application for lawyers and adding ability to create and share collections of content • Analyze Amazon’s Wish List, Evernote, and PicasaQuickly sketch interaction patterns  Focus only on what is relevant, not entire systemIdentify what works and what doesn’t  Look for new structure, function, and interaction styles  Based on understanding user needs
  • 26. © 2012 InContext Enterprises Inc. All rights reserved.Other benefitsBetter communication  Create shared understanding  Using a common design language  Faster and more productive design discussionsMaintain a coherent and consistent design  Across products, systems, and devicesCreate designs faster  Easier to modify and extend your design without breaking it  Don’t have to start from scratch or reinvent the wheel
  • 27. © 2012 InContext Enterprises Inc. All rights reserved.Do what works
  • 28. Sketch the patterns yourself Think structurally Don’t start from scratch Create shared understanding Design from principles, not rules© 2012 InContext Enterprises Inc. All rights reserved.
  • 29. Don’t miss our upcoming workshop:What Makes Things CoolIntentionally Design for Cool — Create atransformative experience with your productsWhen: June 20th – June 21stWhere: San Francisco, CAPresenter: Karen HoltzblattFor more information go to:www.incontextdesign.com“The only method I have seen that really tells you howto go out and collect customer data, and then what todo about it.‖ - Don Norman“The only generative method in the field.”- Ben ShneidermanDavid B. Rondeau, Design Chairdavid.rondeau@incontextdesign.comtwitter: dbrondeau© 2012 InContext Enterprises Inc. All rights reserved.