• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interaction Patterns: Building a better foundation for your design
 

Interaction Patterns: Building a better foundation for your design

on

  • 387 views

Presented at UXPA 2013 in Washington, D.C. ...

Presented at UXPA 2013 in Washington, D.C.
Interaction Patterns focus on high-level design—the structure, interaction, and flow of a system. Not only do they provide a method to visually represent this structure, but they also provide a process to analyze it. Interaction patterns drive structural thinking, teaching you to see and think structurally—which results in better, more coherent designs.

Statistics

Views

Total Views
387
Views on SlideShare
380
Embed Views
7

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 7

https://twitter.com 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • I’m sure you’re all familiar with design patterns or UI patterns. Patterns like this. They typically focus on low-level design details or widgets—things like breadcrumbs, dropdowns, or badges. They are often a collection of design examples, sometimes with no description, or they are really code patterns that focus on the system and not the user. Just out of curiosity, how many people here have used this kind of pattern? How many have used them in the last year? In the last month? Last week?People who talk about patterns always cite the seminal work of Christopher Alexander from the 70s.He talked about more than patterns though, he talked about pattern languages. Unfortunately, most of design patterns are not languages.They: • don’t help you see the structure in design • don’t provide an abstract or generic framework for design • don’t focus on the user’s intent but rather on the system • don’t let you internalize the knowledge. You have to extract knowledge from the descriptions and examples of othersCertainly not all design patterns are like this, but many are. I’m also not trying to denigrate these kinds of design patterns, because they certainly have their benefits.My main point here is that these are not the kinds of patterns I’m going to talk about.
  • Structure matters. When we look at an interface, we make split-second decisions about what we think it is and how we think it works.What is this place’s purpose? What can I do here? How does it work? What can I get to from here?Interaction patterns can help you make sure your design is clear, coherent, and easy to understand. That your design has a solid foundation to build upon. Interaction patterns are probably not what you think they are. They aren’t pre-digested pattern libraries, they’re a process.Let me say that again—they are a process. They’re a way to help you stop and think structurally. To see and understand structure.
  • How do we think about structure? First, you have to learn to ignore all of the visual design. Pay no attention to the colors, the fonts, the textures, and the gradients.Every interface screen has a variety of functions—content and controls. It’s not just strewn randomly across the screen. Functions are naturally grouped together into coherent chunks that I call components. First thing we want to do is identify those components.Components are a collection of controls and content that support a small focused intent. These are components. Give each one a name and a short purpose. If you can’t, then maybe it isn’t a component.Components can vary in size. How do you decide what’s a component? Are there any other functions next to it that support the same purpose? So logo might seem small, but it’s main purpose is to communicate the brand. Nothing else here does that.What about this area here? Is this multiple components or one component? I would argue it’s one component because all of the content and function supports one basic intent, right? Searching for a flight.But what should you call it? We could name it Search flights, but remember what I said about focusing on intent. Does it really matter that we’re searching flights here? Could this pattern be used for other types of searches? Will it be fundamentally different from a STRUCTURAL point of view than the Hotel search?I decided to call it Primary Search because ofhow the Hotel search works. When you click Search Hotels, that box becomes large and prominent like the Flight search, and the Flight Search becomes small and moves to the left side.
  • Components aren’t placed randomly on a screen either. One or more components are grouped into what I call Sections. Each section also has a coherent purpose—and every component supports that purpose.So what do you think we have for Sections? Which components should be grouped together to fulfill a larger intent?This top section is easy.I usually call this kind of Section a Header. It is a global section across all or most screens. It usually contains either the key functions required across screens, or just secondary stuff that is important to the business but not the real intent of the place. This is also the primary focus for the user—it is the most important part here that supports the intent of the place.Again, you need to name each component and identify its purpose. Keep the name more generic. Think about what type of a section it is, rather than what are the exact functions in it.
  • Here’s what the structure looks like. Components grouped into sections—everything supporting the purpose of this place or screen.This is what I call a screen pattern. What is this place? What is it’s purpose? Do all of the components and sections support that purpose?Again, we need to name the place and identify its purpose.
  • What other places are needed to support the intent of this place?
  • What other places are in HipMunk’s system?Identify the other core places that support the same intent. Identify the core flows from place to place. Are they all there? Are any missing?How do you name the places in the system? Try to use a verb in the name if you can—it makes it more user focused and less system focused. Try not to use the same name that is in the product.Draw out the main places in the system and include the core connections or flows between those places. It’s not a site map! Here are the places for choosing and booking a flight.Here are the places for finding and booking accommodations. It seems much more complicated.Why are they separate places? Should they be?When you draw out this level of structure, you can start to see potential problems.You can also have what I call utility patterns. Quick Help isn’t really in a section, it’s a repeating component that appears on many screens.
  • You can also analyze low-level interaction. Let’s look at how this works first.
  • Let’s analyze just this date selector function
  • You’re still focusing on structure. As you sketch it, you’ll start to understand what’s really going on. What works and what doesn’t
  • Here’s the full screen pattern. It’s anabstraction of the structure, with coherent components and sections combining to create a coherent place. In this case, it’s what you need to search for services..You should give a name and a generic purpose to the place (same as the UED) and list all the screens that use this screen pattern, because there can often be more than one.Modern interfaces can make this kind of structural representation challenging sometimes. Often, a section or component can be optional. By that I mean the user has control over whether or not it is displayed. For more complicated screens with many different states, you’ll just have to draw out the different states, but still consider them to be one screen pattern.
  • Let’s be honest. Many products are still created with no real designers. Even if there are designers involved, they are not the only people responsible for the design. Many people have input. Interaction patterns are a great way to help those people think more structurally and to better understand interaction design.
  • You can analyzethe structure of an existing design. It’s a good way to get a deeper understanding of your products and your competitor’s. The end result isn’t necessarily important here, it’s the process of analyzing the structure that reveals insight.Remember-You should be focused at the level of the structure (components and sections)— not specific wording, controls, or content. You’re asking, “What is the intent of this group of things?” If people are capturing too much detail, I make them draw on small sheets of paper or even post-itsNames can be more specific here, but still try to keep them generic—this is part of the process. Let me show you what I’m taking about.As you’re drawing the structure, always ask yourself “Why?”The top section is pretty clear. The components help you play the content, get info about what’s playing, change how the content is displayed, and find content.OK, these components all help me navigate to content. Here I’m using dashed lines to indicate that the section isn’t always visible. In this case, the user has control over whether it is displayed. We have another Navigation section with a different kind of navigationThen the primary content—in this case, your music. A related section, with content that is related to primary and last, some kind of footer section.If we look at the Navigation Section more closely, why is the second component so hard to name? Is the purpose not clear because the contents don’t really go together? Always pay attention when you are having difficulty naming a component or section or even deciding what goes in a component or section. If it’s hard for you to articulate, how easy do you think it will be for the user to figure out what they can do here?What is most important in this section? Playing my music? Then why is the My Collections component so far down? Are these other things above it more important?Why are Artwork and Share Opinion located where they are? If they are related to the selected item, shouldn’t they be closer to the selected item? Shouldn’t artwork go in the Related section?In the footer, why is Mixed tools hard to name? What is it’s purpose? Why are the shuffle and replay functions here anyway? Shouldn’t they be in Control playback? What is the purpose of this Footer section?By the way, this isn’t the newest version of iTunes. The redesign addresses some of these issues.
  • Now for sections. What would you call this top section?What about this left section?Is this really a Footer section? The components don’t really go together and the sections purpose isn’t clear.
  • Everything I’ve shown looks nicely rendered, but that isn’t how I really make these. I always draw them on paper with a marker.Why hand drawn on paper? Online tools get in the way of thinking—paper is faster and drawing with your hand better connects your brain to the process. The goal here is to do the analysis yourself so that you have an understanding of the structure.
  • So this is the latest version of iTunes, which you can see has greatly simplified the structure.
  • Things that I mentioned as being problematic are moved to a better place- like the replay and shuffle buttons or the artworkor removed entirelyThe Primary section is also much larger.The whole left and right sections are gone—or at least hidden.
  • We can also use this process to better understand new interaction paradigms. Here’s Twitter on the iPad. Let me just show you how it works.
  • Here’s the structure.
  • In order to understand the interaction paradigm, ask yourself these questions.
  • Let’s take a look at the Search function in the new Windows 8 and analyze that.
  • And last, you can use interaction patterns to push your design thinking.Here’s the process I use.
  • Make time in your design process to step back and look at the structure of your designs.Make sure you sketch the patterns yourself—that’s where all the real learning happens. That’s the best way to internalize the knowledge.Don’t focus on low-level details in the design, remember to be abstract and generic. This will help you understand what the design is really doing and help you better see how to change it.Use your company’s or your own personal design principles in conjunction with interaction patterns. They should be done together, not separately.Tailor these to suit your needs. For example, if you are delivering them to a client, it’s OK to make the names more specific and NOT generic. If you make them too generic the client will have no idea what you’re talking about.My last point is intentionally controversial. Don’t build a pattern library. It’s a waste of time, energy, and resources. They take a lot too build and even more to maintain. Think about how often applications change these days. Some change every month or two! Not to mention new paradigms, devices and technologies appearing far too frequently. Even if you are building one for internal use at your company, I would strongly advise you think about it before you do it. Do you really need a library? What will your employees really use and what do they really need?

Interaction Patterns: Building a better foundation for your design Interaction Patterns: Building a better foundation for your design Presentation Transcript

  • Building a better foundation for your design Interaction Patterns July 2013 978.823.0100 info@incontextdesign.com www.incontextdesign.com www.innovationincool.com Twitter: incontextdesign David B. Rondeau, Design Chair david.rondeau@incontextdesign.com Twitter: dbrondeau
  • Design patterns
  • Logo Aux Links Secondary Search Form Convincers Destination Guides Logo Site Links Quick Help Primary Navigation Primary Search Form
  • Logo Aux Links Secondary Search Form Convincers Destination Guides Logo Site Links Quick Help Primary Navigation Primary Search Form Header Section Search Section (Primary) Footer Section Secondary Section
  • Screen pattern Header Section Search Section (Primary) Footer Section Secondary Section Logo Aux Links Secondary Search Form Convincers Logo Site Links Primary Navigation Primary Search Form Destination Guides (Tile List) Quick Help Search for Services Purpose: One place to find travel transportation and accommodations
  • Header Section Search Section (Primary) Footer Section Secondary Section Logo Aux Links Secondary Search Form Convincers Logo Site Links Primary Navigation Primary Search Form Destination Guides (Tile List) Quick Help Search for Services Purpose: One place to find travel transportation and accommodations System pattern Search for Services Purpose: One place to find travel transportation and accommodations
  • System pattern Search for Services Purpose: One place to find travel transportation and accommodations Book Flight (external) Purpose: Reserve and pay for flight Results List (infographic) Purpose: Provide all info needed to easily choose the best flight City Guide Details Purpose: Provide information about neighborhoods, accommodations, and restaurants in a destination city Neighborhood Guide Details Purpose: Provide some information about a neighborhood in a destination city Restaurant Info (external) Purpose: Provide information about a restaurant and directions Select Room Purpose: Provide info about different room types Accommodation Results (map) Purpose: Provide all info needed to easily explore accommodations Accommodation Details Purpose: Provide all info needed to decide and book accommodations Book Room (external) Purpose: Reserve accommodations Book Room Purpose: Reserve accommodations without leaving site? Quick Help Utility Purpose: Easily get help about using system Search Subsystem Purpose: Find and book travel transportation and accommodations, as well as explore destinations
  • Low-level interaction
  • Primary Search Form Low-level interaction
  • Low-level interaction BD: Search multiple days before or after date is not clear Date Range Selector Start Date End Date Current Month Next Month Click to view next month Click to easily remove date Click anywhere in field or on Multiple Days control to make Month panel appear BD: After click Start Date it’s not immediately clear that you’re supposed to click in same calendar to select End Date
  • Screen pattern summary Group functions into components  Identify its purpose and make sure all functions support it Group components into sections  Identify its purpose and make sure all components support it More than 2 levels of hierarchy means the structure may be too complex Name the screen pattern  Use a verb that describes the intent the place supports  Don’t use the same name as in the product Identify the purpose of the place  Make sure all sections and components support the overall purpose Header Section Search Section (Primary) Footer Section Secondary Section Search for Services Purpose: One place to find travel transportation and accommodations Logo Aux Links Secondary Search Form Convincers Logo Site Links Primary Navigation Primary Search Form Destination Guides (Tile List) Quick Help
  • System pattern summary Search Purpose: One place to find travel transportation and accommodations Book Flight (external) Purpose: Reserve and pay for flight Results List (infographic) Purpose: Provide all info needed to easily choose the best flight City Guide Details Purpose: Provide information about neighbor-hoods, accommodations, and restaurants in a destination city Neighborhood Guide Details Purpose: Provide some information about a neighborhood in a destination city Restaurant Info (external) Purpose: Provide information about a restaurant and directions Select Room Purpose: Provide info about different room types Accommodation Results (map) Purpose: Provide all info needed to easily explore accommodations Accommodation Details Purpose: Provide all info needed to decide and book accommodations Book Room (external) Purpose: Reserve accommodations Book Room Purpose: Reserve accommodations without leaving site? Quick Help Utility Purpose: Easily get help about using system Company Info Purpose: Learn about the company and its employees Available Jobs Purpose: Provide info to recruit new employees Recent Press Purpose: Learn about the company and its employees Article (external) Purpose: Provide interesting content Blog Purpose: Provide interesting content about company Search Subsystem Company Info Subsystem Communication Subsystem Group screen and utility patterns into subsystems  Name the subsystem  Identify purpose and make sure all screen and utility patterns support it  Look for places that can be combined with others or removed Indicate only core flows between places and subsystems—it’s not a site map  Check for missing flows
  • Using Interaction Patterns
  • Our design process Step of Process Interaction Design Patterns Heuristic evaluation Reveal structural problems Provide focus for user interviews Vision new concepts Help define scope Create storyboards Push design thinking Improve structural thinking Document system functions Provide way to organize functions by place, section, and component Build paper prototypes Maintain coherent structure Reveal structural problems Make design changes Provide way to organize issues by place, section, and component Help resolve high-level structural issues first Deliver design recommendations Communicate structure of design for implementation and future expansion
  • Identify structural problems Control Playback Change ViewStatus info Simple Search My Collection List Artwork for currently playing 2nd Level Hierarchical Navigation Item List (Table) Share Opinion Recent Posts from friends and strangers?? Recommended Items Summary Info for item list Tools?? 1st Level Navigation ??? Auto-collection List Mixed Tools?
  • Identify structural problems Control Playback Change ViewStatus info Simple Search 1st Level Navigation ??? Auto-collection List My Collections List Artwork for currently playing 2nd Level Hierarchical Navigation Item List (Table) Share Opinion Recent Posts from friends and strangers?? Recommended Items Mixed Tools? Summary Info for item list Tools?? Navigation Section Related Section Content Section (Primary) Footer Section?? Tool Section (global) Nav Section
  • Identify structural problems
  • Identify structural problems Navigation Section Hierarchical Navigation Content Control Section (Global) Related Nav2nd Level Nav1st Level Nav ?Control Playback Content Info & Controls Simple Search Content Section (Primary) Item List (Table)
  • Identify structural problems
  • Understand new interaction paradigms
  • Understand new interaction paradigms
  • Understand new interaction paradigms PrimaryNavigation Item List Item Details
  • Content Feed PrimaryNavigation Item List Item Details Understand new interaction paradigms Sketch the structure and transitions Ask yourself:  What is it? • Item details are shown in place and additional content is outside the main flow  How is it different? • Don’t go to main content, it’s brought to me  Why does it behave this way? • To keep you in the flow of the feed  Is this a good solution to this problem? • Yes, it maximizes space and maintains the experience of flow for the primary content  Does it fit my situation?  Where else might it apply? Author profile External Content
  • Understand new interaction paradigms
  • Understand new interaction paradigms
  • Content Section (Primary) Understand new interaction paradigms Any screen CommonUtilities Search Results Section (Primary) Results List (Tiles) or Results Page Search Entry Simple Search System Sources Application Sources BD: List of sources can be long BD: Don’t know which sources even have results or how many BD: Have to pin or hide sources to simplify list BD: Difficult to get back to Search Entry sidebar
  • Understand new interaction paradigms Ask yourself:  What is it? • Universal search across all sources available on the devices  How is it different? • Extends traditional OS search to go beyond files and provide one place to search everything  Why does it behave this way? • The appearing panel allows the search to be universal and available from every app  Is this a good solution to this problem? • Not sure—the benefit of having one search experience may not offset the difficulty of using it  Does it fit my situation?  Where else might it apply? Content Section (Primary) Any screen CommonUtilities Search Results Section (Primary) Results List (Tiles) or Results Page Search Entry Simple Search System Sources Application Sources
  • Push your design thinking Too close to your old design? Need to make your product more “modern”? Having trouble getting out of a design rut? No “real” designers on your team? Use interaction patterns! 1. Decide which parts to push  Works best for screens, components, and low-level interactions  Example: Redesigning a research application for lawyers with new functionality to create and share collections of content 2. Identify what the system needs to do at a high level  Abstract or generalize beyond the industry or domain  Example: Take content from anywhere and save it to a specific collection that can be organized and shared
  • Push your design thinking 3. Find examples in the world that support same high-level activity  Must be in a different domain or industry to get new thinking  Identify 6-8 examples—don’t evaluate yet  Example: • Amazon Wish List • Dropbox • Evernote • iTunes playlists • Pinterest • Picasa • Read it Later in Safari 4. Evaluate and choose 3-4  That fit your problem most closely or are most different  Example: Amazon Wish List, Evernote, Read it Later, and Pinterest
  • Push your design thinking 5. Sketch interaction patterns for each example  Only parts relevant to your design— not whole system  Example: • Add content to specific collection • Add content from anywhere on web • Manage content inside a collection • Add notes or tags to content when put in collection 6. Evaluate and re-sketch  Keep parts that work and delete ones that don’t  Incorporate new functions you hadn’t thought of—only if supported by customer research  Sketch new interaction pattern 7. Use them to guide your designs—not to restrict them  Change and adjust as needed
  • Other benefits Better communication  Create shared understanding  Using a common design language  Faster and more productive design discussions Maintain a coherent and consistent design  Across products, systems, and devices Create designs faster  Easier to modify and extend your design without breaking it  Don’t have to start from scratch or reinvent the wheel
  • Do what works
  •  We developed the industry-leading customer-centered design process  Our clients are industry leaders – including other design firms  Our experience spans a wide range of work practices, industries and technologies  We have a proven track record creating solutions for the people who use them “The only method I have seen that really tells you how to go out and collect customer data, and then what to do about it.” - Don Norman “The only generative method in the field.” - Ben Shneiderman David B. Rondeau, Design Chair 978.823.0100 david.rondeau@incontextdesign.com Twitter: dbrondeau