How to use UI design patterns

Design patterns are optimal solutions to common design problems. As common problems are tossed around a community and are resolved, common solutions often emerge. Eventually, the best of these rise above the din, self-identify, and become refined until they reach the status of a design pattern.

I wouldn’t call a design patern a trend in web design, design patterns seem to be more about looking at how common designs are classified in retrospect, rather than forging new territory or looking to where things are headed.

How should you approach UI design patterns?

We use design patterns all the time, if you’re unfamiliar with them you probably haven’t realized that they’re all around you.

What about the classic example of having too much content to display on one page? We turn our attention to ‘Tabs’, a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links.

The typical benefits for using a design pattern include:

• showing beginners how to use best practices in web design;
• learning to adapt to collective understanding of designers;
• allowing for better communication, reducing the risk associated with unfamiliar choices;
• reducing the necessary time and costs  workflow to carry out specific tasks;
• avoiding wasted time on building something that’s been built before;
• giving the user an experience that he’s familiar and experienced with (the nature of design patterns).

In the above example we see Clicky Media using two very popular design patterns today:

1. Navicon — a universal symbol for menu, otherwise known as site navigation, is becoming increasingly popular in modern web design, but has already been fully adapted to mobile devices.
2. Parallax Scrolling — a unique design pattern that enables single page website, with an easy to use scrolling mechanism, but also includes a list of background sprites that give the page a lively feel.

Even though both the Navicon menu, and the general menu on top of the page share similar choices — it would be very distracting to include all of the links on the same header bar — it becomes clear that small choices can make a big difference.

Here’s what you need to think about when evaluating a design pattern and adapting it to your own needs:

1. Problem summary: what user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
2. Solution: how have others solved this problem? A few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
3. Example: great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, user flows and/or additional notes are necessary to clearly communicate the pattern.
4. Usage: when should this pattern (not) be used? A few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.

It takes practice and discipline to think about patterns in this manner if you haven’t yet been doing it. Take the time to answer these questions when designing your product because it could help you save a lot of time refactoring down the road when the your users and team ask for similar details.

The rise of UI toolkits

UI design patterns have always been about making it easier for the user to navigate your website, application or system. If the user learns how to submit a comment for the first time, chances are he will instantly know how to send you an email using the contact form, it’s the same repetitive concept of information input.

In the recent years, we’ve seen an enormous growth in the UI toolkit market. A UI toolkit can be simply understood as a set of widgets that let you build a fully graphical application from scratch. Twitter Bootstrap is a perfect example of a successful UI toolkit. These days, a large proportion of web designers will rely on Bootstrap features to ease their own workflow. In a sense, there is no need to reinvent the wheel!

3 UI design patterns to remember

In short, design patterns are solutions to recurring problems. By utilizing patterns we can overcome simple user interface problems. If we pay close attention, we notice that patterns are all around us. There is nothing special about that specific design, it’s the way it has been applied that you’re excited about!

Crystal Clear Calls-to-Action

The simplest of web forms (and also, the most common ones) will usually have just a single actionable button: in this case ‘Create Website’. It’s pretty self-explanatory, which is the point.

How much more easy could it get, right? Always go for the easy option, don’t reinvent the wheel just to stand out from the crowd.

Breadcrumbs to the rescue

Breadcrumbs show the path from the front page of the site to the current location of the user in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed.

In this example by Fares Farhan, we see how he utilizes two UI design patterns at the same time. First, he has got the tabs pattern on top, and second the breadcrumbs navigation pattern on the bottom. By having combined them together he makes for a very pleasant browsing experience.

Registration should be easy

Unless you’ve been living under a rock, you’ll be aware of social registration. Registration to a website is a common thing to do, and so should be made as easy and pleasant as possible.

This is one of my favorite registration pages at the moment. It’s the GitHub homepage, and as you can see in the screenshot everything that company stands for is presented in less than hundred words. You also have the ability to register on the go, and the process takes less than a minute to complete. You’ll get an email to verify your account, but that is something that we’re used to anyway!

Final Words

I’ve built websites for over eight years and during those eight years I’ve realized that simplicity is the key to many design problems.

I have come to a conclusion that clutter in design, bloated with unnecessary elements and forms is the most frustrating experience that you can find on the web. Yes, design is exactly how something works, so why not make it work properly? User interface (UI) is incredibly important to the success of your business or venture.

The best way to ensure you are designing successful sites is to learn from and utilize existing design patterns.

Alex Ivanovs

Alex loves to immerse himself in a subject that he is writing about, not only does it help him to escape in peace, it enables him to learn, and grow at the same time. He is the force behind CodeCondo; a web development community for aspiring developers and webmasters, and Ecommerce Platforms; a blog for new online shop owners. You can follow him on Twitter and Google+.