What are they?
Design patterns are solutions that solve common, recurring design problems.
They can define standard layouts, interactions and flows for things like navigation, drop-downs or search.
Design patterns evolve over time. Some designers download new applications and visit new websites every day to keep up with how patterns are changing.
What are Pattern Libraries?
A collection of mobile screenshots that visually demonstrate design patterns. Designers use these as reference and inspiration for the problem at hand.
A few notable design pattern libraries:
Forms are input fields — such as text inputs, checkboxes, radio buttons, drop-downs, toggles, file uploads, reset or reload buttons, submit buttons, and selections — that allow users to enter information into a product for processing.
Forms are used for logging in/signing up for a service or for entering billing information within a checkout flow.
Forms should be clearly labeled
In a quick glance, users should be able to understand what elements are inputs, and what input fields are for (e.g. username, email, password)
In this Google sign in page, it’s clear to tell what are text fields and what are buttons.
Forms should clearly communicate their interactivity and their state
Interactive elements appear clickable. If your buttons do not look like buttons, your user may not understand how to navigate through your UI and get frustrated. Interactivity can be communicated with labels, hover states, slight drop shadows or other design details. Disabled buttons can be used to communicate that a user needs to complete forms above that button before the button will be useful and usable.
This sign up page is an example of of a disabled button. The user must first fill out their information before the “create an account” button becomes interactive.
Differentiate primary and secondary actions
If multiple, potential actions are presented at the same time, the actions should be visually prioritized based on user context so that users see the likely more useful action item first.
This app sign-in screen for heartlink has two options: “sign up” and “login.” The login button has a white fill color and is bright so it will be seen first. Although humans tend to read from the top down, the login button has visual priority because it is assumed that the user already has an account. It is also easier for people to click and press on buttons that are on the bottom of the screen because it is closer to our thumbs reach. These features make “login” the primary action and “sign up” the secondary action.
Clearly communicate errors and provide actionable feedback whenever possible
It’s important to identify input errors as detailed as possible so that users can recover from them immediately.
Poor error messaging might simply say “Error” or prevent the user from progressing in the flow. Without clear actionable feedback, a user might get frustrated and completely stop using the product.
In this example, the interface produces three errors: one that clearly tells the user she needs to select a different username, one that tells her that the way she inputed her email is incorrect, and one that shows her password is too short.
Whenever possible, provide a user with immediate clear and simple feedback on her progress within a form.
Progress feedback encourages a user through a task — like selecting a password — and lets her know whether she’s on the right track.
The first example that comes to mind when I think about showing progress is the Twitter character limit that allows for 140 characters and below it is a word count, “97” that keeps track of the characters left to enter so that the user doesn’t need to.
Netflix.com design patterns
Now I’d like to examine one of my favorite websites that I use, Netflix. Usually when I log into my account, I tend to browse what is newly added, what is trending, and see what stands out to me. Netflix does a great job at using image patterns, navigation patterns, and search patterns.
Netflix navigation is a horizontal global navigation bar at the top of the homepage and is interactive upon click. Once you click on a category, you are taken to a new page.
Netflix image patterns are also very visually prioritized and stimulating. I can scroll down and see that the TV shows are broken up into categories. Each category is displayed as a carousel pattern, and each image thumbnail is expanded upon hover, like shown below.
If I don’t like what I see once I browse through the categories, or don’t like what I choose from the navigation bar at the top of the page, I can search for a particular movie or tv show, or I can search for a particular genre to speed up the process. Once I start to type the word, “action” into the search bar, Netflix, auto-populates content that are related to my search. It shows categories at the top of the page, as well as image thumbnails for each movie or tv show.
I personally love websites and applications that stimulate my visual senses and that is why I love Netflix UI. It is easy to navigate and search, and the images make it really easy to find what I am looking for.