The Need to Include Interaction Patterns in Style Guides

jp_pete's avatar jp_pete on Jan 25th, 2016

What’s needed is not an exhaustive list of best UX practices or a lot of rules about the size and placement of UI elements. Rather, what’s needed is consistent, clear standardization for how a digital product should respond to the actions of the user and how that response should guide the expectations of the user. What’s needed is for style guides to account for interaction patterns.

What this looks like in practical terms will obviously vary widely by the type of app or website you’re working on, but for clarity, let’s consider some theoretical examples. In the case of an e-commerce site, if clicking an “add to cart” button causes a progress spinner to display and temporarily disables the button until the product is successfully added to the cart, then the user will expect this type of behavior to be consistent. So your site should also use a progress spinner for each button the user must click during the checkout process, because this is what the user will have been primed to expect when a button is clicked. Merely specifying the proper color and size for the button in the style guide will not be enough to guarantee this type of continuity, however.

As another example, let’s say your product is an app for finding and saving recipes. When a recipe is saved it is added to “My Recipes,” a list of recipe cards that the user can quickly refer to. If the user can delete a recipe from this list by swiping left on the card for the recipe, he or she will expect this same type of interaction pattern to hold true throughout the app. So if the “Community” section of your recipe app displays a list of cards for the chefs the user is following, the user will expect that he or she can unfollow a chef by swiping left on the chef’s card. Failure to match this expectation that’s been set will confuse and frustrate the user as he or she attempts to complete a task.

The point here is not that one should or should not use spinners or allow users to swipe left on cards to delete them, but rather that interactions should be as consistent and familiar as the visual styles in your digital products. To bring this back to Style Guides then, incorporating these types of granular interaction patterns into your style guide, is the best way to ensure that a consistent experience is provided over time as various designers, developers and product stakeholders revise and add on to your digital experiences.

To get started brainstorming the types UX patterns that you should standardize for your particular digital presence and to give you a little inspiration visit, Microsoft’s Interaction Primer, Google’s Material Design Responsive Interaction Guide, and MailChimp’s UX Patterns.