Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

10 UI Design Patterns You Should Be Paying Attention To

Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well.

In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

You may be interested in the following related posts:

1. Lazy Registration Link

To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die6. This certainly doesn’t mean they should be completely omitted but rather that they should be only one part in the process of introducing users to a system, and should come late in the process. Such an approach is called “lazy registration” and relates to the account registration pattern.

When would you actually use lazy registration? Although it may seem like lazy registration could be used all the time, some circumstances are ideal:

  • When users are allowed to try out your website product or service before making a decision (which not every website permits, though).
  • When it is important to familiarize users with your system before they sign up, which can be a crucial step in their process of deciding whether to register. shopping cart7
Amazon lets you browse and add products to your shopping cart before signing up.

This pattern is meant to allow users to use your system and take action before registering. If satisfied with your service so far, users will regard this quick act of registration as just another small step in the entire process and not an obligation. The shopping cart is a good example of this pattern: users can browse and choose products and only have to register when they proceed to check out. sign-up form8
Picnik is another good example of lazy registration. Users can use all of the service’s functions to edit their photos online. They are asked to register only before saving their work.

2. Progressive Disclosure Link

This pattern is used to show only the information or features relevant to the user’s current activity and to delay other information until it is requested. By hiding more complex or infrequently used features, you de-clutter the user interface; by revealing them only as they are needed, you help users perform a complex, multi-step process on a single page.

The goal is to show only essential information in the first step and then invite users to take the next step. When the user completes a step, you reveal the information in the next step, keeping all previous steps visible. By keeping previous steps visible, you allow users to change what they have entered. And the data they input in the current step can affect the behavior of the next step. comments12
Digg uses progressive disclosure in its comments section. Users can read a comment and, by clicking on the “Replies” link, see all of the replies to that comment. The link also tells you how many replies will be shown. replies13
Once the replies are revealed, users can not only read them but also reply to and rate them. Comments below the viewing threshold are collapsed by default and are revealed by clicking “Show.”

Examples of progressive disclosure are everywhere. A simple “Show more” link that reveals more information is one of the simplest forms of progressive disclosure. But it can be used for more complex cases, such as filling out Web forms. Try to open an account on Picnik14 (which we mentioned in the lazy registration pattern) to see how progressive disclosure can be used at a more complex level.

YouTube customize section15
YouTube uses progressive disclosure when users customize the look of the video player. When a user clicks the icon, customization features open up below.

3. Forgiving Format Link

Search functions can offer users various options and sometimes be complex. When searching weather and street maps, for example, users can use such criteria as city name, street name and zip code. To indicate to users that they can use several criteria, interfaces tend to show multiple options and become overly complex. Instead of adding clutter to the interface, use the forgiving format pattern, which lets users enter data in various formats and leaves it to the system to parse the data.

Yahoo weather search18
Yahoo weather search allows users to search by city or zip code.

To convey which formats are supported, give users hints on how to search, whether by listing all available formats, as in the example above, or by providing a link to a help page, as in the example below.

Google maps search19
Google Maps allows users to search by city, street, zip code and even latitudinal and longitudinal values.

The forgiving format pattern significantly simplifies user interfaces. However, it may require a lot of work from back-end developers. The more options users have, the more difficult parsing becomes.

4. Clear Primary Actions Link

Simple Web forms often allow just one action (“Submit,” “Save” or “Send”). The user knows exactly what their final action in filling out the form will be, because they have only one option. However, users may sometimes be faced with several options and have to distinguish between primary and secondary actions.

Clearleft contact form20
Clearleft makes a distinction between primary and secondary actions with color.

What are primary and secondary actions? Primary actions lead to the completion of a form; for example, clicking “Save” or “Send.” Secondary actions usually do not lead to a form’s completion; these include clicking “Cancel.” There are exceptions, though. Which are the primary and secondary actions when you see “Save,” “Save and continue” and “Publish” buttons all in a row? When users have several options, highlighting primary actions and de-emphasizing secondary actions are good practice.

This can be done in two ways:

  • By giving primary and secondary actions different colors; for example, giving primary actions a vibrant color and secondary actions a shade of gray.
  • By styling primary actions as buttons and secondary actions as links.

Flickr upload images form21
Flickr highlights the primary action by putting the secondary action in a small label below.

Both ways clearly distinguish between primary and secondary actions, relieving the user from having to think about which option to choose in order to complete their task.

5. Breadcrumbs Link

Breadcrumbs show the path from the front page of the site to the current location of th users 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. Each label in a breadcrumb trail is linked to its respective page or section in the hierarchy, the exception being the one for the current page, which should just be an unlinked label.

Apple breadcrumbs23
Apple’s breadcrumbs are graphic elements that fit the overall design of the website well.

Breadcrumbs take up minimal space and are usually positioned at the top of the page, below the header and above the content. They would serve no purpose on the home page and so should not appear there. Breadcrumbs can appear simply as text links separated by the “>” sign, or they can be graphic elements, like the breadcrumbs on Apple’s website:

6. Account Registration Link

The definition of this pattern varies from place to place, but we can say that it solves three somewhat related problems:

  • Certain content is accessible only to registered users,
  • Users need to re-enter their personal data often,
  • Users need to be able to access personalized content on a system.

The solution to allowing users to access protected content is to have them register for an account on the system and store their personal data, to be reused later. The benefits are numerous. For instance, users can be shown personalized offers, as seen on Amazon. Users could also perform tasks more efficiently if the system reused the information submitted during registration. Storing shipping details is just one example. Because filling out forms is not a favorite task of users, requiring only necessary information is important. Another important thing is to clearly highlight all of the benefits users will receive, so that they become more willing to register. sign-up form26
Vimeo has a simple but attractive sign-up form. sign-up form27
Tumblr requires only minimal information of the user to sign up.

7. Required Field Marker Link

Making the user interface obvious is essential. This applies just as much to Web forms. One of the best ways to make the interface of Web forms obvious is by marking required fields. The purpose of these markers is to alert the user to information they will need to provide. This way, users won’t feel they have to fill out the entire form to avoid seeing an error message.

Ideally, you should remove all optional fields and let the user type only the information that is necessary for the interaction. A rule of thumbs: the simpler and shorter a web form is, the better is the user experience. Another interesting idea is to make it possible for users to remove all optional fields – you can find more about how to implement it in practice (as well as a ready-to-be-used-script) in Andy Clarke’s article Trimming Form Fields. contact form31 puts “Required” markers next to field labels on its contact form.

You can position required field markers in one of two places:

  • Next to labels, allowing users to scan the form quickly,
  • Next to or inside input fields; if the fields are the same width, users will be able to scan the form quickly.

When deciding on which fields to require, take into account the total number of fields in the form. If the form is complex and most of its fields are required, the user will likely see it as unnecessary clutter.

8. Steps Left Link

This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to:

  • Guide users,
  • Explain the scope of the process by clearly stating how many steps are needed to complete it,
  • Show the user’s current position in the process by visually highlighting the current step.

StatementStacker sign-up process32
StatementStacker clearly shows the number of steps and highlights the current step.

Steps are usually displayed horizontally and connected by arrows, showing the order in which the steps will be performed. Also, each step is usually marked with a large number and very concise description of what users should do in that step. The important thing here is consistency: a progress indicator should always appear in the same position across the pages and show users where they are at.

This pattern is usually combined with the well-known “wizard” pattern to create a multi-step process, such as for registration or a shopping cart.

Delicious sign-up process33
Delicious has a good-looking progress indicator that clearly defines the purpose of each step. It also highlights the current step by displaying it in a different color.

9. Subscription plans Link

This pattern is suitable if the website offers one product or service that comes in different plans and requires regular payments, usually monthly payments. Each plan should be descriptive and provide the following information:

  • Name of the plan, such as “Basic” or “Professional,”
  • Price of the subscription plan and how long it is valid for,
  • List of features (the cheapest plan usually has the fewest features),
  • Sign-up button.

Wufoo subscription plans34
Wufoo clearly shows its subscription plans, the prices and the differences between them.

Always show your plans in order. Plans are usually ordered from most to least expensive. You can highlight the plan you want users to buy by using a different color or size.

CrazyEgg subscription plans35
Crazyegg’s subscription table draws attention to the “Basic” plan.

10. Hover Controls Link

When a user interface has many elements in which the user can perform actions, the page can become cluttered and hard to scan. This is especially common in the administration section of Web applications, where users can change table data. A good way to handle this is to hide each element and reveal it when the user hovers over that area.

An “Edit” link is revealed as the user hovers over each section of their Facebook profile page.

Hiding controls and revealing them on hover significantly de-clutters the user interface without taking away functionality.

Twitter reveals “Reply” and “Favorite” links when the user hovers over each tweet.


Footnotes Link

  1. 1 /2009/06/03/9-crucial-ui-features-of-social-media-and-networking-sites/
  2. 2 /2009/06/15/40-helpful-resources-on-user-interface-design-patterns/
  3. 3 /2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
  4. 4 /2008/07/04/web-form-design-patterns-sign-up-forms/
  5. 5 /2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10 /2008/07/04/web-form-design-patterns-sign-up-forms/
  11. 11 /2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Janko Jovanovic is user interface designer, software engineer, blogger, speaker and artist. In his free time, he writes about user interfaces on his blog JankoAtWarpSpeed and tweets regularly on Twitter.

  1. 1

    Nice work. Love it. Thanks!

  2. 2

    Dear SM, can you publish something on software ui?

  3. 3

    Ryan William

    June 23, 2009 6:03 am

    Good stuff. The lazy registration trend is my favourite thing that I’ve seen as of late, as someone who does a fair bit of online shopping.

    By the way, you might want to go with something a bit more aggressive when censoring private details. It took a few clicks in Photoshop to do this with the ‘Smart Sharpen’ filter:

    Could probably get it considerably cleaner with a bit more time. Obviously it’s no big deal with Facebook, but I’m pointing it out just in case you ever censor seriously private details in a similar way! :)

  4. 4

    Nice article. Good introduction to patterns most of us use but don’t actually know it or know their names.
    Good work and keep it up!

  5. 5

    You guys rock. This is great information that every web designer/developer should know and do their best to adhere too!

  6. 6

    James Schend

    June 23, 2009 8:10 am

    Beware, hover controls only work on devices that have a mouse. They’re useless on iPhones. (And tablet PCs, and touchscreen kiosks, etc, etc.)

    And while you can tell an iPhone apart using it’s userAgent, good luck trying to figure out if a Windows OS userAgent is on a desktop PC or tablet PC. (Or even on a Mac that the user has a tablet on– that can surf the web too with no mouse.)

    Personally, I’d avoid using them– why would you want to exclude a user just because he prefers a stylus to a mouse?

  7. 7

    Argh! Breadcrumbs do not show you the path you took – that’s what the back button is for. They are hierarchical indicators: where you are in the site.

    As an aside, in the fairy tale, when Hansel and Gretle used breadcrumbs instead of white pebbles they got hopelessly lost in the forest.

  8. 8

    Once again, a really nice article! Tnx

  9. 9

    Courtny Cotten

    June 23, 2009 5:32 am

    Interesting article. I was hoping that you would include some mention of UI for mobile devices, as they present a unique challenge for designers who are attempting to assimilate these same principles to a screen the size of a postage stamp.

    Thanks Janko!

    • 10

      Stuart Rutter UI Designer

      January 20, 2012 1:05 am

      Yeah a follow up article on 10 UI design patterns for mobile would be useful.

  10. 11

    Great article, but you made a slight error in one part. Where it shows the Mint signup form, it’s not “ puts…” The actual address is, and the picture is linked correctly. However the caption text is misleading.

  11. 12

    Connor McCarra

    June 23, 2009 6:24 am

    Nice Article! I really like simple registrations in web design. I like the idea of only needing simple things like name, email and password to sign up and then later when your used to the system being able to add more details, only when needed.

  12. 13

    Thanks for the great article Janko and thanks for the mad props to one of our designs! Statement Stacker.

  13. 14

    Good article. But I would not call Amazon “lazy registration.” Typically eCommerce sites will allow you to add items to a shopping cart before registration because it increases the chance you will actually buy the items. Because you have already invested time in adding products to the basket, you will be more than likely to continue the process of registration at the end of the process. If a site asks “fill out this form before you can shop” then of course you will have a much higher drop-off rate. In this sense, it is called “strategy” not “laziness.”

    • 15

      @Jessica That is ‘lazy registration’ by definition. In fact, you have listed the benefits of ‘lazy registration’ by listing the characteristics of the shopping cart usage. The e-commerce approach with shopping cart may be the first to go this route. In fact, this model made sense for online shops by default. And, to credit you, there is a case where e-commerce has evolved past registration altogether by allowing checkout as a guest, causing it to not be an example of this at all. It’s the difference between your grocery store frequent shopper’s club and SAM’S Club. At the grocery store you shop then buy (maybe you register, maybe not) and the other you register for membership then shop.

  14. 16

    great article. some really interesting points. thanks

  15. 17

    Marcus Neto

    June 23, 2009 6:40 am

    Love it when I read a short article like this and walk away with 2-3 more To-Dos for my site. Thanks for the info.

  16. 18

    This was an especially good post. Loved it.

  17. 19

    Dr. Girlfriend

    June 23, 2009 4:24 pm

    Nicely done, Janko! I enjoyed reading this article.

    A few points I would like to make:


    Number 2 – Progressive Disclosure should not be used on sites that are user comment-based like digg, imho, unless the site allows the user to switch back to the “classic” way comments are displayed (either inline or flat) and retains that user preference. Making the reader repeatedly click a drop down arrow to reveal other comments in the conversation is a huge turn-off and a recipe for repetitive stress injuries.

    Much of the appeal of sites like Consumerist, digg, and Lifehacker are the lively user comments and it breaks the user’s flow to have to click, click, click every time when you just want to scroll and keep reading. It’s much easier to skim past what you don’t want to read rather than click, click, click to reveal comments you may or may not have wished to skip. I’ve completely stopped reading sites like those on the Gawker network because I find that extra clicking so tiresome. At least save the user preference for flat, inline forum comments in the cookie! Gawker websites like the Consumerist and Lifehacker make you re-set this stupid preference on every fricken page! It’s horrible. The does not — it retains your preference as long as you are signed in — that’s the way Progressive Disclosure should behave.

    Number 4 – Clear Primary Actions should fail gracefully. An example: this morning I was making a post on in a form field much like your example here. When I hit “POST”, I was redirected to another page with a vaguely worded warning telling me that foul language wasn’t allowed; I was admonished to click the “back” button and fix this foul language. I clicked the back button but didn’t see any foul language anywhere in my post. Two words were underlined with a faint red squiggle line, but I figured that was just Firefox’s spell checker, which can’t tell the difference between acronyms and misspelled words sometimes. I tried to re-send my post multiple times, but was redirected to the same warning and denied every single time.

    I finally figured out that the Macupdate webpage uses the same notification of “foul language” as Firefox (and most other browsers) use to denote a misspelled word — the red underline. The site actually thought my acronyms were “foul language”. Annoying! I spelled the words out and the site finally allowed me to post. This whole time-wasting scenario could have been handled much more gracefully if the site had used a light-colored highlight over the offending word and allowed me to correct the error on the same page, rather than redirecting me to a fail page and making me use the “back” button several times to try and guess what my error had been.

    Numbers 5 and 8 – Breadcrumbs and Steps Left should ALWAYS allow backward navigation. Some shopping sites, for example, do not allow backward navigating. Let’s say the user enters a coupon code and they are on the final page; the coupon reduces the overall price and now the customer no longer qualifies for free shipping. The customer then tries to go “back” to shop and add more products, but the webpage will not allow it. Argh!

    Number 6 – Account Registration should provide clear and true benefit to the user. Don’t tell the users to fill out yet another form in order to receive “valuable discounts” if all you intend to do is SPAM their email accounts.

    Number 7 – Required Field Marker should not use “confirm email” and make the user type this information twice. It’s annoying, unnecessary, and defeats the convenience of using form-filling apps like 1Password and Roboform. I also agree with Marty’s comments [#27].

    Number 9 – Subscription Plans. Fact: If you have a goofy name like Wufoo, you WILL alienate and lose potential customers. I discovered from reading about it on a productivity blog I visit; I promptly signed up for a free account (over a year ago) to test it out. Since that time, I’ve wanted to use the paid/subscription version of Wufoo at least half a dozen times, but I could not for the life of me remember that stupid name! My mental association for Wufoo has now gone from “that cool-looking site with useful tools” to “that cool-looking site with useful tools and the stupid name that I can never remember.” Even though I’ve bookmarked, the name does not carry any mental association for what it actually does and therefore, I never think of it when I need one of their services.

    Number 10 – Hover Controls. I disagree completely. Hover controls tend to be overused to cover up poor design, and as James Schend points out, they do not work for alternative input devices like tablet PCs and touchscreens.

    My apologies for the length of this post.

  18. 20

    Jasper Kennis

    June 23, 2009 7:41 am

    Some patterns don’t really need explanation (required fields doesn’t), but over all a good article.

  19. 21

    @Jessica ‘But I would not call Amazon “lazy registration.” … it is called “strategy” not “laziness.”’

    ‘Laziness’ is a well-used software development terminology and is no way intended as pejorative. Like Larry Wall (Perl guru) says, the three traits of a great programmer are laziness, impatience, and hubris. Calling Amazon’s signup process ‘lazy registration’ is completely correct and accurate in this context.

  20. 22

    Great post! But Christopher Alexander was an architect, not a civil engineer. His work is very important in our field. (I’m an architect too, BTW).


↑ Back to top