Interaction Patterns: Building a better foundation for your design
•Transferir como PPTX, PDF•
2 gostaram•843 visualizações
UXPA 2013 Annual Conference Wednesday July 10, 2013 11:00am - 12:00pm ET by David Rondeau 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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de UXPA International
Mais de UXPA International (20)
Último
Último (20)
Interaction Patterns: Building a better foundation for your design
- 1. 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
- 4. Logo Aux Links Secondary Search Form Convincers Destination Guides Logo Site Links Quick Help Primary Navigation Primary Search Form
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 10. Primary Search Form Low-level interaction
- 11. 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
- 12. 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
- 13. 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
- 15. 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
- 16. 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?
- 17. 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
- 19. 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)
- 21. Understand new interaction paradigms
- 22. Understand new interaction paradigms
- 23. Understand new interaction paradigms PrimaryNavigation Item List Item Details
- 24. 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
- 25. Understand new interaction paradigms
- 26. Understand new interaction paradigms
- 27. 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
- 28. 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
- 29. 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
- 30. 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
- 31. 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
- 32. 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
- 33. Do what works
- 35. 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
Notas do Editor
- 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. Click. 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.From Wikipedia:Benefits of using interaction design patterns include:Teaching novices some best practices and common approachesCapturing collective wisdom of designers across many uses and scenariosGiving teams a common language, reducing misunderstandings that arise from different vocabularyReducing time and costs in the design and development lifecycleMaking usable designs the "path of least resistance"Eliminate wasted time spent "reinventing the wheel"Ensuring users have a consistent and predictable experience within an application or service
- Structure matters. [Click] 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.They aren’t measurable and they don’t come from a quantitative approach.
- 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.Click.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.Talk about each one. Logo, Primary Nav, LoginWhat 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? Click.I decided to call it Primary Search because of [Click.] how 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.We also have Convincers, Destination Guides, another logo, Site links, and Quick Help.
- 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. Click. 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.What about these components? Should Primary search be a section? Or are all of these required to fulfill a larger intent of just Searching? Click.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.What about this stuff at the bottom? Click. Given the distance from the primary section, I think all the components just make up a large footer. Click.
- 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 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. [Click]Here are the places for finding and booking accommodations. It seems much more complicated. [click] Why are they separate places? Should they be?Are these really necessary?When you draw out this level of structure, you can start to see potential problems.You can also have what I call utility patterns. Talk about Quick Help. It’s not 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 this date selector function
- Talk about using this level of detail to understand interaction by understanding structure.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. That’s what the dashed lines around the left Navigation section indicate. 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.You can also annotate the patterns with whatever information you think is relevant to describe the structure of the interaction.Main point: Summarize what makes a screen pattern.
- Just call out a few specific examples.Talk about working in hybrid teams, often with client team members who are not designers.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.Talk about high level benefits only. This is mostly setting the stage for what I’m going to talk about next.
- One way is as a tool for analyzingthe 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 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?”Click. 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.Click. 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.Click. We have another Navigation section with a different kind of navigationClick. Then the primary content—in this case, your music.Click. A related section, with content that is related to primary.Click. and last, some kind of footer section.If we look at the Navigation Section more closely, why is “Links to Store?” 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?Is Share Opinion really like the other components in this section?In the footer, why is Miixed 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?These questions should be driven by interaction design principles, which I’ll talk about shortly.By the way, this isn’t the newest version of iTunes. The redesign addresses some of these issues.Main point: Show how the process reveals structural problems
- One way is as a tool for analyzingthe 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.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.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 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?”Click. 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.Click. 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.Click. We have another Navigation section with a different kind of navigationClick. Then the primary content—in this case, your music.Click. A related section, with content that is related to primary.Click. and last, some kind of footer section.If we look at the Navigation Section more closely, why is “Links to Store?” 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?Is Share Opinion really like the other components in this section?In the footer, why is Miixed 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?These questions should be driven by interaction design principles, which I’ll talk about shortly.By the way, this isn’t the newest version of iTunes. The redesign addresses some of these issues.Main point: Show how the process reveals structural problems
- 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.
- This process of analysis can also help you understand new interaction paradigms.Let’s look at the latest version of Twitter on the iPad
- Let’s take a look at the Search function in the new Windows 8
- Talk about the level of analysis- only what is relevant to the project, not the entire systemTalk about how and why to look at different domainsNames should be more generic to capture the core intentHow long should it take?What will you do with it? Only to support design thinkingWho should do this? Not just designers.Address issue that people will think borrowing is not innovative. You don’t always need to innovate the interactionMain point: Show how interaction patterns can push your design thinking and get you out of a rut
- Maintain coherent and consistent designWhen implementing recommendations from a Contextual Design project in an Agile processWhen designing a product that will appear on desktop, phone, and tabletTo update the other 800 screens in a large systemNot foolishly consistentMain point: Highlight other benefits of interaction patterns
- It’s the act of sketching that matters. By sketching you internalize and own the knowledge. It’s much harder to gain insights by looking at someone else’s patternsCreating or analyzing interaction patterns develops your ability to think structurally and that allows you to create designs with a solid foundationDon’t start from scratch—the world is full of good ideas just waiting for you to modify and rearrange them—and create something new and betterWith shared understanding comes faster more productive design discussions because you have a common languageDesign from general principles that can be applied to many situations, don’t look for hard and fast rulesBenefits everyone, not just designers.Time for more questions.