Web UI Design for the Human Eye: Principles of Visual Consistency — Part 3
This is an excerpt from the Web UI Design for the Human Eye: Principles of Visual Consistency ebook, written by Jerry Cao, Kamil Zięba, Krzysztof Stryjewski, Matt Ellis, and originally published on UXPin.com.
Mastering UI Patterns for Visual Consistency
Any discussion of visual consistency in interaction design will always return to UI patterns.
UI patterns originate as solutions to common usability problems, and their effectiveness correlates directly with their popularity and adoption. The most successful are ingrained in the minds of even inexperienced users, generating a self-perpetuating cycle as more sites and apps reuse them.
In this chapter, we’ll dive into the anatomy of UI patterns and how to select them as shortcuts to meeting user explanations.
Affordances & Signifiers: The Foundation of UI Patterns
Affordances are what a product can do. Signifiers are the visual cues that hint at the function. At its most atomic level, all UI patterns are composed of signifiers that hint at the interface’s affordances.
For instance, an email service affords sending messages back-and-forth online. But how does the user know that function is possible? A perceived affordance is therefore how the user thinks the interface object might work, which of course should match the actual affordance. This perceived affordance is judged based on signifiers — small hints or cues that signify what the product might be used for.
If the user sees a logo that looks like an envelope (signifier), they might get the impression that the site offers email services (perceived affordance). If the site actually belongs to a bank with a logo that accidentally resembles an envelope, then the perceived affordance and the actual affordance are unfortunately inconsistent.
When signifiers are used properly, the product feels intuitive and familiar, as if the user already knows what the feature is for. A signifier can be anything that suggests meaning, whether a word, a shape, a color, or a movement.
The important benefit about signifiers that we’d like to shine some light on here is that consistently used signifiers from other sites and apps will cut down on your own explaining. Using signifiers that are consistent with other sites will streamline your own design.
To learn more about the categories of affordances and signifiers, we recommend this article on Smashing Magazine as one of the most comprehensive pieces we’ve read.
Pattern Classifications
Patterns come in a lot of forms and serve an assortment of uses. As a good first step to keep you from being overwhelmed, it helps to classify them into six main categories based on their core site functions (which you can actually see on the excellent site UI Patterns):
• Input and Output — These patterns deal with how the user interacts with or submits input to the site, and likewise of how the site responds, or submits feedback.
• Navigating — These help guide the user around the site, ensuring they are properly oriented and know how to find their way if lost.
• Content Structuring — Is your content accessible and easy to access? These patterns help you organize your content in a way that reflects logic and hierarchy.
• Reducing Friction — How does your site present content without friction or cognitive load? As described in Interaction Design Best Practices, these patterns help you guide users through your site at a comfortable pace.
• Incentivizing — These are the patterns that motivate your users to interact, like progress bars or other methods of gamification. These design patterns exploit the brain’s habit loop to hook users onto the product.
• Social Sharing — These are the patterns that allow, promote, and facilitate the sharing of your site on any social media venue you prefer. You could also use social proof patterns to increase trust with users.
Of course, design patterns are just blueprints for your creativity. Because they represent popular interaction design best practices, starting with a UI pattern allows you to be innovative without alienating users.
Implementing UI Patterns
Beyond their function, patterns can further be classified by how they’re used on a site. As we’ll discuss below, some patterns can be interpretive and used different ways, while others are very precise and keep only one method of implementation. We define patterns as tactical, strategic, and site-specific, based upon Anders Toxboe’s UI Pattern Pyramid.
1. Tactical
Tactical patterns are the most direct and strict patterns, and the rules tend to be black-and-white: the logo remains in the upper-left on every page, all textual links use a blue font color, etc.
Tactical implementation relies heavily on both external and internal consistency: external because, as patterns, their strength comes from the familiarity of their use on other sites; internal because their implementation remains the same on every page within your site. For example, you’d want to place the search bar in the top right since it’s become so commonplace (external consistency). Once you’ve done so on one page, you’d want to make that search bar a pattern so that it happens on all pages (internal consistency).
Front-end style guides document mostly implementation patterns, since these atomic details affect how developers code designs and how designs are reproduced sitewide.
2. Strategic
A step above tactical patterns are patterns that are chosen as part of the UX strategy. At this level, patterns become more advanced, and are concerned with how they help the user move through the site to achieve their goals.
Would a Jump-To or Sticky Navigation work better to help users access additional content? Given your user and the type of website, what’s the best way to ask for input without overwhelming the user?
Strategic choices later lead to tactical choices.
For example, you might select a single-page site instead of tabs or multiple pages because you want to craft a stronger narrative — that’s a strategic implementation of a pattern. Once you’ve made that decision, you need to then make a series of tactical decisions, such as what kind of scroll bar you’ll use, how the text is broken up, etc.
Let’s take a look at Spotify and Pinterest for an example of how the same pattern, hidden controls, can have two different strategic implementations.
Both sites need to give their users quick access to additional options or actions on the site, without paralyzing them with too many choices. The hidden controls UI pattern is the solution by tucking away additional options in an expandable menu.
But the difference isn’t in the what, it’s in the how. Spotify has a short-and-sweet menu that appears over the selection, while Pinterest has an all-inclusive menu that’s hidden inside of a hamburger icon (another pattern in and of itself).
Strategic patterns are influenced by external consistency. You can see in the example that the overflow menu is not a groundbreaking UI pattern. Most designers will follow the spirit of the pattern, then apply different visual or interactive elements to make the pattern consistent with the look/feel of the site.
3. Site-specific
Some patterns only work on certain types of sites, or have different versions depending on the site. These distinctions are made first and foremost, before either strategic and tactical implementations are decided.
For example, let’s say you’re building a site for a design agency: you know you’ll need to create pages for a portfolio, gallery, biographies, and testimonials or social proof. You know that you need to include these pages because of the type of site — these are the patterns the typical user expects based on the type of site they’re on. Only afterwards do you decide the strategy for implementing them, and then the tactics.
Of course, if you’re making a ecommerce site, your users won’t expect a portfolio page. And given the different context, a cards pattern may be more appropriate for displaying images of products on sale.
Virgin America requires a UI pattern for its booking form (an advanced user input pattern) because it’s in the airline business. Obviously, users would never expect this type of pattern on a site like Netflix or CNN.
Because users expect specific functionalities from certain types of sites, site-specific patterns are influenced purely by external consistency.
4. Bringing It All Together
Let’s say you’re a photographer, and you’re building a website to promote yourself, specifically the homepage. You’ll select your patterns by following the three steps we outlined above.
First, you’ll decide which site-specific patterns your users are expecting. Because you’re a photographer, you’ll need to showcase your samples.
Next you decide the how to showcase them — this is a question of strategy. You could use an old fashioned grid view, but instead you opt for an image carousel.
Last, you decide which tactics to use for the image carousel. Foregoing the dot locators at the bottom, you take a minimalist approach with only two very basic arrows on each end. Finally, you implement this pattern consistently across the entire site.
Selecting the Right UI Pattern for You
There are thousands of established patterns, with more and more being created everyday — but not all of them will work for you.
The selection process for UI patterns can be simplified to four basic steps:
1. Determine the problems that need to be solved.
2. Explore how others have solved the same problem.
3. Examine the solution’s use on other sites.
4. Detail the patterns proper usage so you can recreate it.
Let’s see the process at work with an example: you notice that a lot of your users aren’t signing in when browsing your site.
1. Determine the problems that need to be solved. Because the users are still coming to your page and spending an appropriate amount of time there, you can deduce that the problem stems from the login and signup processes. The solution, then, would be a way to simplify both processes so that your users don’t mind doing them.
2. Explore how others have solved the same problem. You decide to do a little detective work and visit some popular sites similar to yours. Some use a lazy signup, but that doesn’t solve your problem of enticing your users to signup or login. Some others use incentives like extra features or more content, but that doesn’t fit in with the style of your particular site.
Finally, you notice that some sites use a social login, which allows them to login or signup with their preexisting social media accounts. This sounds like a good solution for your problem and fits the site’s easygoing style.
(Notice that lazy signup, signup incentives, and social login are all different patterns. Which you choose will depend on your site’s specific needs.)
3. Examine the solution’s use on other sites. You take a deeper look at big sites like Spotify, Pinterest, Wunderlist and see how they utilize the social login. You even check sites unrelated to yours to see how they handle the pattern, just in case they inspire you.
4. Detail the patterns proper usage so you can recreate it. You notice that different sites offer different social media outlets like Twitter, Google, or LinkedIn — but every site includes Facebook. Sometimes the options are spelled out with text (“Sign up with Facebook”) while other times they just have the social media’s icon situated nearby the login form so you know its purpose.
Remembering the Gestalt principle about how proximity suggests function (which you learned from our Web UI Design for the Human Eye), you decide only a button with an icon is enough — after all, social login is a popular pattern and your users will likely know these buttons mean they can login with their social media accounts. You decide to include Facebook, Twitter, and Google because those were the most frequent on the sites you checked, and you put Facebook in the top position as the most popular option.
Once you’ve found an effective UI pattern, don’t feel too attached. While UI patterns are great for consistency, you don’t want to be stuck in your local maximum. For example, you might be designing a viral content site and decide that infinite scroll is the best way to make all your content accessible. After all, you’ve seen plenty of other sites use it to great success.
While infinite scroll may produce a better experience than forcing users to click “Next Page” every ten entries, it may not be the best solution. You can only determine that through free-minded brainstorming, wireframing, prototyping, and testing.
Treat UI patterns as a “safe zone” for consistency, then venture outside it one creative step at a time. Know the patterns, respect the patterns, but start your design with a fresh outlook each time. That will ensure your design remains familiar, but still has room to blossom into something new.
UI Pattern Libraries & Resources
Even if you’re a hardened UI designer with years of experience, it’s hard to keep track of all the patterns at your disposal. Below are several resources that collect and compile all the latest and most useful patterns. These will help you stay up-to-date, and can help you improve upon the patterns with your own creativity.
• UI Patterns — One of the most comprehensive pattern libraries featuring a highly logical layout for easy browsing. Fun fact: it was just recently redesigned and restructured.
• Pattern Tap — This designer community from ZURB posts and updates lots of helpful resources for web design education.
• Patternry — While this is a subscription-based app, it provides a comprehensive library of UI patterns for CSS and HTML. It also lets you customize them as needed to build your own library.
• Capptivate — An exhaustively thorough collection of mobile UI patterns. Almost all of them are animated, so you can see how to layer interactions on top of popular patterns.
• UseYourInterface — A fantastic infinitely-scrolling library of GIFs that show the interactive power of UI patterns.
• Web UI Design Patterns — Our own compilation of effective UI patterns, in which we explain the proper application of the 63 best web UI patterns from sites like Amazon, Facebook, and Pinterest, and many more.
• Mobile UI Design Patterns — The companion piece to our compilation of web patterns, this ebook features 46 of the most successful UI patterns for mobile devices.
For even more detailed listings on UI pattern collections, Smashing Magazine posted a list of over 40 online pattern libraries.
Takeaway
Throughout this ebook, we’ve discussed the proper ways to maintain consistency, but all that knowledge is useless unless you remember why consistency is important. Good design makes your users happy and eager-to-return gives a feeling of familiarity and can be used mostly by intuition.
These seemingly natural aspects are anything but — they must be crafted with effort and know-how to give them that “natural” feeling. Maintaining consistency (and knowing when to break it) is the key to creating this feeling and satisfying your users’ expectations.
