User interface patterns simply refers to reusable solutions to different design problems or needs. Every design problem is unique and designers will always have different ideas on how to approach these problems.
However, there are some solutions to these problems that are seen on almost every website, web app or mobile application. Instead of creating an entirely new solution, it might be helpful to work with an already existing solution. One huge benefit to using User interface patterns is that as humans, we tend to remember repeated patterns or flows. Seeing these repeated patterns makes it easier for users to understand because they have interacted with them before.
In addition to it being easier for the user, it’s also easier for the designer or developer. You can look through solutions and see which best solves your users need and achieves your goal.
Of course, the option to create an entirely new design pattern from scratch is always there but time and effort will go into trying and testing these patterns to ensure that it’s the best for the user.
Types of UI patterns
According to UX Pin, Typically User Interface patterns target core site functions such as:
Input and Output — These patterns deal with how the user interacts, or submits input, to the site, and likewise of how the site responds, or submits feedback.
Navigation — 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 so that your user can fully enjoy your site.
Social Sharing — These are the patterns that allow, promote, and facilitate the sharing of your site on any social media venue you prefer.
Onboarding — These patterns help users acquire the necessary knowledge, skills, and behaviours to become effective users.
there are other types of design patterns, however, these cover the most common/ basic aspects and areas of design patterns.
Examples of UI patterns
Let’s look at some examples of UI patterns:
Example 1
User Problem: I want to keep my data safe while focusing on working without having to remember to save the file.
UI Pattern Solution: Autosave (as seen in Google Docs) this pattern prevents accidental data loss by automatically saving user input at fixed intervals or at events of interest.
Example 2
User Problem: I want to make sure my users’ passwords are sufficiently strong in order to prevent malicious attacks.
UI Pattern Solution: A password’s strength is measured according to predefined rules and is displayed using a horizontal scale next to the input field. If the password is weak then only a small portion of the horizontal bar is highlighted. The greater the strength of the password the more the horizontal bar is highlighted.
How to use UI patterns
By following a clear process, you don’t get confused and you can be completely sure about what you want to achieve. A good process includes steps such as:
- Defining the need: the first step to solving any design problem is to understand the need. What are the goals, objectives, what would make this a successful design? What are the core functions of the project
- Research: It is always helpful to see what solutions products with similar needs and problems have come up with
- Examining the solution’s use on other sites: is it a usable solution, how well do you think users interact with this component? Carrying out simple usability tests help to see if its a solution that you might want to adopt in your own project
- Sketching a prototype (optional): create a basic sketch of what you have come up with so far
- Checking a library: – check a UI pattern library and see what patterns best align with what you have defined
- Adapting to your specific needs: at this point, you may need to fine-tune what you have so that it more closely aligns with what you want for your project.
Where to find UI patterns
UI – Patterns – this library has a well-categorized list of design patterns. They also have a great collection of helpful articles to get you started on using design patterns and other UX related issues
Pattern Tap – with a library of about 5013 Patterns, Pattern tap is a go-to resource for diverse UI patterns
Mobbin Design – This library focuses solely on mobile design patterns. Their collection is quite varied and covers most patterns that can be seen in modern mobile design
Checklist Design – this is a collection of some of the best UI and UX practices on both mobile and web platforms.
Pttrns – while their focus is on mobile design, they have an extensive list of design resources, interface patterns and inspiration. Their content is well categorized and easy to use.
UI Garage – here you can find specific design inspiration for web, mobile and tablet. With over 3,387 categorized patterns.
Approaching Visual Design Tasks Like a Pro
When designing a new feature or functionality, just starting may seem extremely overwhelming. There are a thousand ways that you could approach the problem and after some time, it starts to get a little confusing. As someone who has to design something every other day, I took it upon myself to create and share a step by step process that I use when approaching design problems. It applies to all tasks of varying complexity and importance. Please note that this focuses particularly on interface design and assumes that user research (when necessary) has been done as well as other user experience related tasks like information architecture, etc.
Below I have listed my process for solving visual design problems and I hope you find it helpful in your next task.
Understand the problem: A little bit obvious yes but it is super important to get a good understanding of the task. What problem are you trying to solve? what are the requirements? What are the objectives of the design? Who is your target audience?
List the likely elements and behaviour that individually form the entire design: For example, if you are designing a landing page, list the sections of content you have decided to include in your design. Is there an FAQ section? Testimonials maybe? Or if you are designing a dashboard, are there charts, tables? stickies? Determine these elements and list them out along with their core functionalities
Group the elements that work together: What are the things that you think are interdependent, that connect, that need to work together to produce a specific outcome. Match them up and have them closest to each other.
Arrange these grouped elements according to importance: Visually speaking, what is the most important thing for the user to see or interact with? This helps you form visual hierarchy for your content. The important elements will most likely need to be highlighted or put at the top. With fonts and typography, you may need to use a bolder typeface for some elements or a brighter colour to highlight them. You may also need a CTA (call to action) button to give the user direction or create conversions for marketing. In cases where you foresee the user getting confused, consider adding a tooltip or some text that will assist your user
Start with a simple sketch: As tempting as it might seem, try not to jump into high fidelity prototypes just yet. Start simple with sketches that best visually describe what you have in mind. Also, remember that your first drawing will almost never be your final so try different layouts, be patient with yourself and note your thought process through each drawing
Look for inspiration: After you have your skeleton and a solid understanding of what you are doing, seek inspiration. From your past designs, from other people’s work, from products that are solving a similar problem, basically from wherever you can find. Get inspired, take note of good ideas and see how they can blend with what you already have without allowing it to completely override what you have come up with so far
Jump into the design: And now for the sweet part 🙂 apply all that you have gathered to each section, make it simple, make it beautiful. Consider adding illustrations, icons or images where necessary. Try to use visually appealing and appropriate colours while working within your style guide or design system if you have one.
Iterate, Iterate, Iterate: If it’s your first attempt, I will tell you for free that it is definitely not your best idea. Give it some time, come back to it, rearrange it, try something crazy. Do not be afraid to make a mess. Just keep going. I sometimes end up with as many as 15 artboards but when I have finally gotten to a really good place, I know
Ask for Feedback: Show someone next to you. Nothing like a fresh pair of eyes to point out things that we as designers might have overlooked
Ultimately, as we grow, we can always create workflows that work best for us. But after designing for a while, working with these steps has helped me structure my design process.