The 27 Most Important Data Input Design Patterns
This article is focused on the practical side of product design. I’m going to go through some of the patterns and how they can be used to make websites, web services, and apps smart without breaking the bank.
I figured out that it’s more common to talk about Design Patterns in the software development area. As a visual designer, I think it’s also related to the product design area. Especially, in this time where the creative and user experience part of products are now developed in a more systemic way.
Mostly, digital products today are built on a base of already existing design systems. Even the things that were created from scratch are also components based.
Designers tend more to create a library of components and even a hierarchical library that can have simple and complex components. I’ll explain the benefits later in this article.
The term design patterns nowadays do not only belong to software development. It’s definitely a design term and it became so for the past 3-4 years.
As a Product Designer myself, mostly, I’ll be writing about patterns related to user interfaces, user experience, and interactive design. Those, I think, play the main role in customer relationships.
Design Patterns Make Things Easier
- Use a pattern from another app to quickly solve your own problem.
- Design patterns have a common language being used between designers.
- It's harder to make design mistakes and create a bad user experience if you use well-known design patterns.
- In some cases, you don't need to hire an expert designer to start building your product if you use a detailed library of design solutions or a UI kit as guideline.
- It's usually, quite easy to stuck in the development process and bloat your scope of work. Pre-made solutions make it easier to stay on track and don't switch your focus on minor details.
- A good library with configuration abilities can be a good base to build your own components and solutions.
Uses of Design Patterns
- Speed up process.
- Tested, proven development paradigms.
- Helps to prevent subtle issues that can cause major problems.
- Patterns help to communicate using well-known, well-understood names and interactions.
- Elimination of inconsistencies.
- Optimization of design processes and a product user experience.
Types of Design Patterns
There are a few types of UI Patterns, some of them are well known and you might be using them almost on a daily basis, some – almost invisible.
I’ll list here 5 the most popular types.
1. Navigation Patterns
Well known and commonly used to locate specific features and content of a website or an app.
2. Persuasive Patterns
This is more about psychological patterns of using digital products and services online.
3. Dealing With Data
Things users can do with data like filtering, sorting, formatting, interacting with it, etc.
4. Social Design Patterns
All related to achievements, social interaction within products and services, chat, following, and so on.
The main topic of this article is…
5. Design Patterns for Forms and Data Input
What You See Is What You Get component helps to create content that contains rich media and formatted text and doesn’t require users to know HTML code or a markup language.
Password Strength Meter
You want your users to choose passwords that are hard to break or guess. The visual aspect of the password strength meter helps users to know what a good password and if their chosen password follows such guidelines.
It helps users to see feedback on the data they’re entering. So they can see and understand either errors or fields that were filled out correctly.
An easy way to choose a date or date range in order to submit, sort, or filter data.
You don’t need to show all of the controls in one view. Some of the buttons and other sets of UI elements can be different depending on a screen and its purpose. User experience can contain several modes like play, pause, on, and off.
It’s mostly used when the input you want to collect is a specific data type, like a zip code, date and time, or a phone number.
Fill in the Blanks
This pattern mimics real physical forms and sometimes looks more friendly than one column forms. Also, it’s better to use this type of form when you have long and complicated labels for input fields, which might make it hard for users to understand. You can place a field in a sentence and express the context of the input field. However, it’s better to use it for short forms with a small number of input fields.
All your users want to easily accomplish their tasks using your interface. It’s important to design a UI that has a minimum amount of distractions. An expandable input makes it possible to clean up the main interface and show necessary controls only when users activate it.
You can implement it in your interface when users have repetitive tasks such as save changes, search, copy and paste data, undo the action, etc.
One dedicated place where users can adjust preferences for the app or service they’re using. Usually, Settings - is a screen or a view where you want to put infrequently accessed preferences that are used by a minority of users, but essential for their needs. Otherwise, it’s better to use a toolbar or quick actions that can be accessed on the spot.
Drag and drop
This pattern is more interaction between a user and an interface in cases like uploading a file or multiple files. It’s a visual approach of adding files to a form in order to submit them.
Real-time preview of information a user wants to submit.
This is a way to revert back actions that the user has taken. This design pattern provides users with more confidence using your interface.
The goal of this design pattern is to provide users with a solution to conduct detailed requests like search that can be based on a custom set of rules. Basically, it helps to request information or lists using several conditions.
Mostly, it’s used when a user needs to quickly edit a value on a page. The main benefit of this approach is that a user doesn’t need to go to an administration page or any completely different screen (page) to be able to edit a value.
When entering a value, the input fields accept more than one format. This makes the interface more flexible and harder to make a mistake using it.
It’s very useful when a website or an app can make educated guesses and present the user with Good Defaults. A set of predefined options can be based on what browser settings users have and the location they’re browsing from. It can be easily changed later. So it’s not forcing users to think about it on the first steps of interaction with a service.
Every user wants to keep their data safe. Autosave feature helps a user to focus on their tasks (i.e. producing content) without worrying about whether their data is safe and saved.
Complex tasks can be broken down into sub-tasks in order to simplify user interaction. I recommend using a wizard design pattern when users need to input complex data into a system and the main task is more easily achieved by splitting the process into a series of smaller and simpler steps.
A guidance or progress bar that shows the process of filling in data over several steps. I recommend using if you have more than 2 steps or the process feels so long that the user might get the impression that it will go on forever without the guidance steps.
Unlike the Steps left pattern the completeness meter is used for a series of non-sequential tasks. It helps to keeps users on track when completing a specific goal and complete a set of minimum tasks related to a specific goal.
Inline Help box
A piece of assistive information located close to the interaction users are about to perform. You can use it as inline tips that help using your interface or when you want to motivate the user to accomplish certain tasks.
This design pattern helps users to make a specific piece of content more popular. It’s mostly used on websites with a large audience and a strong community. So that a sufficient amount of votes can be generated as well as a meaningful comparison can be made.
Pay to promote
In other words, paid promotion similar to what you can see as Google ads (paid search results on top), and boosted social media posts. The main goal of this pattern is to gain increased reach and traction by skipping the content prioritization algorithm.
This design pattern helps your users to understand if a specific piece of content worthwhile spending time and/or money on. It’s an important part of any rating system you use on your website or app. Of course, it works best if you have a large user-base. Also, ratings help businesses to understand what content or product performs the best.
Often big platforms and resources have a ton of user-generated content and it’s almost impossible to moderate everything yourself or with a couple of moderators. A user interface for flagging and reporting inappropriate content solves the issue with moderation.
It helps to keep updated a collection of documents as well as adding or editing content of a website.
All of these patterns are widely used around the web as well as in mobile apps. Tech companies and startups that take their products seriously usually develop their own documentation, style guides, libraries of components, and even design systems.
It becomes more popular to start with an existing solution like a design patterns library or a framework. Especially, when a product or a company is on its start and doesn’t have many resources to build a product where best user experience practices are incorporated even on a very basic level.
A product that works well for its customers doesn’t need a fancy branding and visual appearance.
A website that has valuable content or works as a service doesn’t need a complex design.
Any process that plays role in your product impacts your business metrics and if we talk about cases where your customers need to fill out a form, go through a questionnaire, or just interact with other members of a community they need a simple set of tools or features to do that. Data input design patterns I went through in this article help to achieve this without going into too much of visual details.
Here are several types of Design Patterns packages that might help you.
Packaged Design Patterns
- Libraries of components
- Design patterns libraries
- UI Kits
- UX Kits
- Design systems
These packages can make product design processes easier. Mostly, because the design process is boosted by ready solutions and backed by patterns that were emerging for years. So actually, it will be difficult to do mistakes in your product design if you use a library or kit that fits your needs.