15 UI Design Patterns Web Designers Should Keep Handy

by in Design on 3rd Nov 2010 · Comments

User interface design patterns help create consistency throughout the web, and provide a great resource for web designers looking for the best tested, most usable, and most efficient layouts. Many things in life are in a pattern, and this includes applications in both design and development. Whilst creativity and thinking outside the box is a must in design, so is conformity much of the time. UI patterns in web design are gaining recognition as an important resource to consider, and creating designs around them can help any website be more user-friendly.

15 UI Design Patterns Web Designers Should Keep Handy


In this post we're going to look over the 15 most usable UI design patterns web designers should be paying attention to. By using these patterns, or at least taking bits and pieces of their theory, designs can be created quicker with the best possible results.

1. Page Grids

Grids are often used in web design to organize imagery and content, create alignment, and apply Divine Proportion or other basic design principles. However, grids recognized as interface patterns also serve a purpose in creating clear primary and secondary points of interest.

Grids

Websites have a need for consistency for main areas, such as ads, branding, navigation, and general content. Even for unconventional layout designs, the general areas still apply for easy usage and consistency. While there are a few variations of this design pattern, the following generally applies:

  • Branding (logo, tagline, etc.) are at the top left
  • Navigation is towards the top, preferably as left as possible
  • Content lies within the middle of the page
  • Ads are to the right, in a secondary spot
  • Footer content includes things that are not essential, but should still be usable and interesting since it is the last impression on the reader

Further Resources

2. Vertical Navigation Bar

Left or right navigation bars have become less and less common as we tend towards more simplistic websites and horizontal navigation (below). However, while the look of the vertical navigation bar may seem to be going out of style, its purposes can oftentimes outweigh those of a horizontal navigation.

Left Nav

Horizontal navigation is great for a few links, and a relatively simple tree structure. However, vertical sidebar navigation is perfect for more complex navigation. Take Amazon.com for example: all the categories on this website would make for a horizontal menu that was too wide, but in a vertical navigation it looks compact and in-place. Also, the sub-menus in this example do not interfere with the rest of the content below.

Even for smaller websites, vertical navigation can have its benefits. Placed right below a logo or other primary location, it can be just as effective as horizontal navigation and often beneficial when it comes to available space in the given layout. As long as there is enough width available for the rest of the content, vertical navigation can be more noticeable and user-friendly.

Further Resources

3. Horizontal Navigation Bar

In contrast to the above, horizontal navigation across the top of the page can be best in other situations. This interface pattern is popular for a reason. The fact that it almost always spans the entire page and is near the top makes it a secondary point of interest right after a logo, often what we as designers want from user interface design. Beyond its noticeability, though, it has a few other key benefits.

Horizontal Nav

For more simple forms of navigation (less than 10 categories), this interface can be a huge space saver. Vertical navigation's space includes the width of the longest link, plus varying height depending on the number of items. Horizontal navigation, however, only varies by width, and that width is usually reserved for the navigation to fill anyway. The height is static — the height of the font plus any other padding, margins, and borders.

Horizontal navigation is best for links that are not subject to change. For example, navigation items drawn dynamically or that would change dramatically otherwise could break past the width barrier, and therefore break the layout. In many situations, though, the navigation stays the same, with few alterations throughout the website's lifetime.

Further Resources

4. Modular Tabs

Modular tabs have become much more popular as the age of blogs and other content-heavy websites came into play. There are a lot of different ways to pull off the look from a design perspective, with a very unique approach below as an example. Many are just in the form of tabs though, much as one would see for horizontal navigation above.

Modular Tabs

Modular tabs can compact extra content in a clean and organized way, and hide it until it is wanted by the user. This way, more content can be loaded onto a single page without sacrificing design or overwhelming hierarchy. This additional content once viewed can help users better navigate throughout the site with interesting links or blurbs.

Further Resources

5. Breadcrumbs

Breadcrumbs are a visual representation of navigational hierarchy. When pages and categories are nested, breadcrumbs can come in handy in order to help the user find their way through the levels. Breadcrumbs are usually located above the relative content, and in a single left-to-right line for easy readability.

Breadcrumbs

The use of breadcrumbs from a user interface standpoint can't be said better than on Patternry:

Location Breadcrumbs: The user needs to be able to navigate up (towards the root page) and have an understanding of where he is in relation to the rest of the site.

Attribute Breadcrumbs: The user needs to see the choices he has done while narrowing the search.

Recognizing best practices for breadcrumbs such as which sites to use them on, what types of pages and hierarchical structures to use them on, and how to display them is a much needed skill for any web designer to have, as they are becoming more needed as the web grows in content-heavy and complex websites.

Further Resources

6. Article Lists

As blogs have become popular, so has the design interface for article lists. Whether it is for a series of blog posts, news headlines, or otherwise, knowing how to effectively list articles for the best user engagement is an essential designer skill.

Article Lists

Most article lists today will include these content items: the title/headline, content blurb, comments (if a blog post), date, and any other essential meta data. The title should be the primary point of interest, while the content the second. Other features of this design pattern include adequate spacing between separate posts, and complete consistency in a vertical list.

Following this design interface pattern when displaying article lists is a great way to grab reader attention because it allows the most important feature (the content) to take up a large portion of the page, and conveniently gives the reader everything they need to become immediately intrigued and dig deeper into the website.

Further Resources

7. Archives

Archives provide an easy way for a user to travel back in time when it comes to reading content, and hopefully in an organized and well-categorized way. Unfortunately, there are many blogs and other time-sensitive websites that don't use an archives page, or if they do, it's a very simple and unorganized one. A good archives design pattern is displayed by date first and foremost and preferably by category as well.

Archives

For pieces of content that come in chronological order, it is not practical for the user to find content only by pressing a 'Past articles' link several times to slowly find what they're looking for. Furthermore, if they're not looking for anything in particular, this would just be a tedious and unnecessary task that many users are not willing to do.

A smart archive design pattern though can display all the content on one page, by title, date, and possibly category. This will allow the reader to find what they're looking for, or what they may be interested in quickly and easily.

Further Resources

8. Content Footers

Sometimes content is essential or useful to a website, but is not necessarily primary or even secondary navigation. Navigation or content like this can be useful at the bottom of the page, in an interface design pattern called a 'fat footer.'

Footer Content

Fat footer content is best for leading the user to new content at the end of the page, and so should therefore be easily scannable and in a format that is intriguing. Many designers choose to do three columns across, and links of titles and/or blurbs to fill in the space. Because this is the last visual portion of the page, adding content that syncs with the website's goals is a must: RSS feeds, contact forms, more content titles, etc.

Further Resources

9. Pagination

When there is a lot of data on a website, whether it is blog posts, images, or other types of files, pagination is an interface solution that allows the user to quickly scroll through the content. By separating the data into pages, a sequence can then be displayed to represent it, allowing the user to jump to the last, first, or some of the content in the middle.

Pagination

UI Patterns describes pagination's use in terms of a design solution as follows:

First and foremost, pagination parts large datasets into smaller bits that are manageable for the user to read and cope with. Secondly, pagination controls conveys information to the user about, how big the dataset is, and how much is left to read or check out and how much have they already checked out.

Further Resources

10. Lazy Registration

Registration or sign up forms are a part of many websites, and are definitely something designers must encounter on a regular basis. We've all heard about the difficulties in getting users to sign up for something - from marketing to having an interesting enough app or network to sign into. However, much of the time the problem is that registration is too difficult for the user.

Easy Registration

Interface design is all about not making the user think, and a lazy registration page can help in doing just that. A simple, lazy registration will only allow for a few lines of input, and may dynamically take care of the rest. For example, a website may only want an email address and desired password for now, and then the user can willingly put in their other account information later. Either way, the website still has a new registered user, and an email address to go on.

Further Resources

11. Voting Promotion

Entering the world of web 3.0, we are seeing more user-driven websites. One type of these websites includes content voting sites. Digg and DesignBump are just a couple. The user usually enters in content, and it is rated and given a ranking respective to that rating.

Voting

Using this design pattern and website methodology is a fantastic way to get the most popular content noticed first. By showing the most popular content first, websites can gain more user engagement. From a design perspective, this pattern has three features: the content it is portraying, the number of votes, and up/down ranking buttons for the user to vote with.

Further Resources

12. Information Dashboard

Online apps are everything in modern times, and they are becoming more important as our entire worlds come online. Everything from banking and budgeting to organizing and scheduling are done online, and in a user-customized way. As users interact with these applications, it is important to update them of any changes, notices, or important information changes.

Dashboard

Application dashboards are an interface design pattern that should be studied, and studied well by designers. The trend will grow, and it will be essential for designers to begin working with application design. This design pattern should highlight all the essential content at a glance, in an organized and effective way.

Further Resources

13. Form Wizard

Form wizards, whether on multiple pages or a single one, can break down a longer form process into recognizable and manageable pieces. A point was made above with the lazy registration design pattern: users don't like to think or work, so make it easy for them; let them be lazy. For some forms, this is obviously not possible. Money transactions, ordering processes, or sometimes even more complex registrations need a lot of information. As designers, we need to figure out the best way to make it easy and think-free for the user.

Wizard

Wizards break down and label steps, so the user can identify where they are in the process and how much more work is required. It also organizes forms into relevant categories (general contact information, billing address and information, payment processing), for a quick and seamless process.

Further Resources

14. Hierarchical Actions

Determining hierarchy in web design and then implementing it is needed in order to aid the user experience and highlight important pieces of content most effectively. It's easy to identify which pieces of content need to have first interest and which should have second, but actually creating an interface that gives attention in that order is a bit more difficult.

Primary Secondary

By following the interface pattern for primary and secondary actions, though, it can be made easy. Simple things such as a shape around a primary action and plain text for the secondary action, change in color vibrancy, or otherwise are all good ways to create hierarchical order between two items.

Further Resources

15. Display Collection

We are probably all most familiar with our own portfolio collection, and have each experimented with different ways of displaying our portfolio pieces in a consistent and effective way for potential clients to look through. Many of us use a grid-like form and perhaps a few details per piece, only to display the full information when clicked. This pattern isn't just for our portfolios though; it's all over the web for all types of collections.

Collections

Collections of data whether they be images, resources, documents, or whatever else can be organized in a similar pattern. This design pattern works best for any group of things that can be represented in thumbnails easily, but also holds a lot more information per piece, in which it is just not possible to display all the information of each piece on one page. This pattern compacts a lot of content and organizes it into a grid.

Further Resources

Conclusion

Many common interface patterns today almost seem obvious, but are still well worth taking a look into considering their importance. These fifteen modern interface design patterns are tested and tried, and with the right use, can create highly functional and easy-to-navigate websites.

While providing consistency across the web, we are still imitating the general idea of any of these structures and that can frustrate some designers. However, when we use any one of these patterns, we can still aid in consistency and be creative people as well. Just check out all of the great showcases available for any of these patterns, and one can see how diverse one pattern can really be when it comes to creativity and interesting solutions. What are some of your favorite interface design patterns, and what are some of your best examples of it put into practice?

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.