10 UI Design Patterns You Should Be Paying Attention To

Advertisement

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

To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die. 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.

Amazon.com shopping cart
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.

Picnik.com sign-up form
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.

Recommended reading

2. Progressive Disclosure

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.

Digg.com comments
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.

Digg.com replies
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 Picnik (which we mentioned in the lazy registration pattern) to see how progressive disclosure can be used at a more complex level.

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

Recommended reading

3. Forgiving Format

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 search
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 search
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

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 form
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 form
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.

Recommended reading

5. Breadcrumbs

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 breadcrumbs
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:

Recommended reading

6. Account Registration

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.

Vimeo.com sign-up form
Vimeo has a simple but attractive sign-up form.

Tumblr.com sign-up form
Tumblr requires only minimal information of the user to sign up.

Recommended reading

7. Required Field Marker

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.

Haveamint.com contact form
Haveamint.com 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

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 process
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 process
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

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 plans
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 plans
Crazyegg’s subscription table draws attention to the “Basic” plan.

10. Hover Controls

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.

Facebook
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
Twitter reveals “Reply” and “Favorite” links when the user hovers over each tweet.

(al)

↑ Back to top

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

    Once again, a really nice article! Tnx

    1
  2. 2

    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!

    7
  3. 4

    Nice work. Love it. Thanks!

    0
  4. 5

    Dear SM, can you publish something on software ui?

    -3
  5. 6

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

    0
  6. 7

    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:

    http://serve.ryanjohnwilliams.com/images/facebook_blur.jpg

    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! :)

    2
  7. 8

    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!

    -1
  8. 9

    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.

    1
  9. 10

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

    0
  10. 11

    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.”

    0
    • 12

      @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.

      0
  11. 13

    great article. some really interesting points. thanks

    0
  12. 14

    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.

    -1
  13. 15

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

    0
  14. 16

    This was an especially good post. Loved it.

    0
  15. 17

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

    0
  16. 18

    @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.

    0
  17. 19

    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?

    1
  18. 20

    Hi!
    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).

    0
  19. 21

    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.

    0
  20. 22

    This was a good read. I’ve really come to appreciate patterns while reading “The Design of Sites”; we all look for ways to avoid recreating the wheel but I don’t often see discussions on the topic.

    0
  21. 23

    Floris Fiedeldij Dop

    June 23, 2009 9:19 am

    I just love these posts, they help me remind where I still lack, and what is upcoming for me to learn. Keep up these sort of articles.

    0
  22. 24

    Not bad, not bad at all.

    One peeve of mine that hasn’t gone away is ‘required fields are red (or, whatever)’. like the average Joe knows what a ‘field’ is. Some may know now, but something like ‘items’ would have served much better.

    0
  23. 25

    LMAO at the example for number 2!

    0
  24. 26

    Great article, I definitely have to start working on lazy registration. Also I love hover clouds, it is great UI design and keeps pages clean with lots of white space.

    Nice work Janko.

    0
  25. 27

    One comment that I would make regarding #7 Required Fields – in general, having the required field marker at the start of the label makes it easier for users of screen readers to know when a field will be required – if it’s not, they can skip that field. And from a more opinion-based standpoint, I think that having a graphic that repeats as in your example creates too much clutter – I would rely on the asterisk, which has become a de facto standard to represent ‘required field’.

    1
  26. 28

    Simon Harlinghausen

    June 23, 2009 1:42 pm

    Another great article.

    A toolbar with a “new article alert”
    would be soooo cool ;-) Or a twitter
    message.

    0
    • 29

      acntio January 24th, 2009 3:55 am Really good little article. One comment I would make is that 5. Use colour-coded lists would benefit from some comment/caveat regarding colour blindness.Whilst colour coding can be useful for most people, for the 4-5% of people with colour blindness you may need to provide some additional sort of signal or at least ensure that the contrast between the colours bears up ok. If you you will notice that the disinction in the Lighthouse example becomes much less clear. To be fair they do use a text label and do not rely soley on the colour coding.And thats my point: colour coding is great when used a progressive enhancement, however it should not be relied upon as the sole means of conveying important information.

      0
  27. 30

    “great article?!” “breadcrumbs?!!!!! all this stuff is dying in a tar pit somewhere, should be called “UI design patterns that Nostradamus predicted” …disappointing.

    0
  28. 31

    This is defiantly worth bookmarking. I have other UI pattern websites but they are very outdated. Its good to see an updated set.

    0
  29. 32

    Subscription plans, a UI design pattern? huh? I know you wanted to make it a round number but…

    Also, your definition of breadcrumbs (ie. “path users have taken to their current location”) is completely wrong. The Apple example you got would look exactly the same if user came straight from a search engine to that page.

    If you learned anything from this article, please don’t call yourself a web designer, you’re not.

    0
  30. 33

    Nicely done, Janko! I enjoyed reading this article.

    A few points I would like to make:

    Re:

    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 imdb.com 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 Macupdate.com 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 Wufoo.com 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 Wufoo.com, 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.

    0
  31. 34

    You might like to fix the Jakob link (Breadcrumb Navigation Increasingly Useful) … it’s not pointing where it should :P

    0
  32. 35

    Awesome article!

    To 1. Lazy Registration
    you should add to the recommended reading:
    The $300 Million Button
    By Jared M. Spool
    Originally published: Jan 14, 2009
    http://www.uie.com/articles/three_hund_million_button

    0
  33. 36

    Tejendra Shandilya

    June 23, 2009 7:50 pm

    Nice work. and nice article . Thanks!

    0
  34. 37

    Thais really great post about UI design patterns.

    0
  35. 38

    Gr8 article! I learn lots of thing from this. Thanks man.

    0
  36. 39

    @Marty #27: having the required field marker at the start of the label might make users of browsers harder to scan forms. However I agree that it should be used carefully and try avoid clutter.

    @Yann #31: Can you give same explanation on why you think that subscription plans could not be called design pattern? Regarding breadcrumbs, I described it as path to the current page location in the site’s hierarchy and path from the front page of the site to the current location of the users, but it is not the same as path users have taken to their current location as you mentioned.

    @Dr. Girlfriend #32: Thanks for the long comment, I appreciate your efforts! Let me give you my thoughts on those:

    #2: I’m fine with progressive disclosure in this context, although “show all” link or something like that would help.

    #4: If I understood your example correctly, you had the problem with validation. The purpose of clear primary actions is to emphasize “POST” button in comparing to let’s say “Cancel” or “Reset”.

    #7 I think that in the example in this article they used marker properly on fields for confirmation for email and password. If they omitted marker there some users might think those are not mandatory. Clutter is a problem, though, and therefore should be used carefully.

    #9 You might like their name or not but Wufoo has nice example of Subscription plans :)

    #10 I think that using any of these or other patterns won’t cover bad design :) However using hover controls might cause problems for alternative devices, that’s true.

    I appreciate all of your comments.

    0
  37. 40

    I’ll try to put it in practice!

    0
  38. 41

    A very good and rather useful article SM. one of the best I have seen in a bit, well done.

    Tim

    0
  39. 42

    Very useful info indeed. Learn a lot!

    0
  40. 43

    really nice article!

    I like that Janko set many links to foreign ressources, even when he would be able to set many links to his own Blog, where the most of this themes have a own, great article with many information, pictures and examples.

    0
  41. 44

    Thank you for this post! I like how concisely written it is, and the reasonable number of examples (as some posts in Smashing Magazine have so much text and images that you can’t finish them in one sitting).

    Can you explain how Amazon can be considered lazy registration? Sure, you can browse and add products before signing up, but you HAVE to sign up anyway. (And I think Amazon in general is a poor example to be used in a UI article.)

    On progressive disclosure: I’d like to add that an “expand all” option would really help if the pattern repeats many times on a page.

    On account registration and subscription plans — I wouldn’t categorize these under UI patterns. Account registration is a site function and subscription plan tables are really part of the content.

    0
  42. 45

    I just love smashing magazine ;)

    0
  43. 46

    Once again a good one! Very nicely interpreted.

    0
  44. 47

    Usefull article, but your facebook details are clearly readable.

    0
  45. 48

    @Janko – Thanks very much for your clarifications; I agree on all counts, except for #2 Progressive Disclosure in user-contribution heavy forums or sites with lots of written content. Considering the ubiquity of the iPhone, laptops, and other touch-based web devices, I think Progressive Disclosure is more of a hindrance than a desirable UI design pattern. Imo, “Expand All” should be the default behavior and “Collapse All” the secondary choice ;)

    0
  46. 49

    @Madeline: Thanks for the suggestions! Since Amazon lets you browse/search products and manage them in shopping cart before you register, you can actually try their website before opening an account. Once you are satisfied with their offer/products and want to buy you can create an account. This is why it can be considered lazy registration. It might be confusing because e-commerce sites usually work this way, but it is still lazy registration.

    Regarding account registration and subscription plans, they represent a solutions to a common problems: Why and when to force users register and: when and how to offer/show subscription plans.

    @Dr. Girlfriend: Good points, although expand/collapse can be considered as a another pattern :) Personally, I like progressive disclosure, although what you said really make sense. Thanks!

    @Mantiuxa: Those are really not important details. Those are just not mine and that’s why I blurred them :)

    0
  47. 50

    Text inputs with rounded corners only using jQuery (no images necessary) http://www.tonyamoyal.com/blog/2009/06/23/text-inputs-with-rounded-corners-using-jquery-without-image/

    0
  48. 51

    Carl - Web Courses Bangkok

    June 24, 2009 9:19 am

    Yup, really good!

    0
  49. 52

    The StatementStacker example shows two of the worse design mistakes for me, when it comes to forms.

    First the login fields are pre filled with the words username and password, and the user has to select and delete the words before typing. Also Tabbing through the registery page fields sometimes takes you to the row below and sometimes to the other column, a lack of consistancy.

    0
  50. 53

    Once again this is a clear, informative and useful article. I am reminded of the specifications of the Xerox Star system that was the granddaddy of ui

    0
  51. 54

    Good article. I also disagree with point #10. Hover buttons don’t help those with visual difficulties – ie those that use screen readers. Unless their mouse happens to “run over” that exact spot, they won’t be able to navigate through your site. Depends on how accessible you want your site to be.

    0
  52. 55

    Good overall. Will definitely bookmark it.
    #3 – I want to choke the web developers who won’t let you enter, for instance, dashes in your credit card number. Who cares! Let the user use any reasonable formatting during entry and then take everything but numbers out on the back end. These developers are just lazy beyond belief or incompetent. Other examples abound.
    #10 – rename it to hidden controls, hidden functionality, frustrated users, design being placed before functionality and ease of use, BAD IDEA!!

    0
  53. 56

    @ Janko #37: that’s because you changed the article afterwards instead of publicly correcting it, and now you’re pretending it was like that the whole time… Laaaame… What I previously mentioned was copy+pasted right from the original article. Please don’t lie. Thanks.

    And a subscription comparison table is not a “UI design pattern” because the pattern here is “comparison chart/table” and wether it’s for a subscription or not is irrelevant. It’s like if you specified “steps left to subscribe” in your example #8. The actual context/content is not part of the pattern. And If you leave this out in you subscription example, all that’s left is… a table. Not exactly a ground breaking “UI pattern”… That’s why I call that “pattern” obvious fluff for a catchier post’s title.

    0
  54. 57

    @Yann: I haven’t changed anything, that is how it was written originally – “path to the current page location in the site’s hierarchy”. It could have been changed on review but I have no access nor rights to modify anything.

    Before you accuse someone to be a liar try to get relevant information.

    0
  55. 58

    Thank you for a very good article. Forgiving format (#3) is one of my pet peeves, especially when it comes to entering phone and credit card numbers. Do not post a lame message telling me not use spaces or dashes or force me to enter other symbols to make my entry acceptable to your system.

    If web developers or designers are not capable of programatically removing spaces, dashes or other fluff from user data, they should not be permitted to collect the information in the first place.

    0
  56. 59

    Very nice collection! For me, the new ideas are the primary actions (I’ve seen them, but they looked so natural, that I didn’t pay attention) – especially using text links for secondary actions, and displaying UI elements on hover – this is an excellent idea.

    Will think of using these in my next UI designs, thanks for providing so much food for thought!

    0
  57. 60

    Very nice article.

    0
  58. 61

    This is a good summary of a lot of things more designers need to think about. I am continually frustrated by sites that offer what claims to be the newest, greatest thing on the web, and there are exactly two things I can do: 1) Read their front page of hype including a few quotes “mentioned in the New York Times”, etc.; 2) Sign up for an account. They don’t offer option 3) Try things out; or even 4) Read any kind of details about what the heck this thing is, how it works, what I can do with it, whether it is worth my effort to sign up and create yet another password to have to remember.

    However, pattern #10 is a danger zone. Hovers are a good way to convey extra information. They aren’t a good way to convey that there is anything there at all. This is a sort of web behavior that is abused all the time. One of the most fundamental UI expectations in web applications, or any computer applications for that matter, is that the screen somehow shows you what options are available to you. If you have to move your mouse over every inch of the screen just to see what you can do, this is a frustrating interface and people will never use half of what you offer. They simply won’t know it is there. This also goes for people who make links or buttons that are undifferentiated from other text on the screen until you hover over them, then they become button-like or link-like in appearance. It requires the user to know how to use the application before ever using it, which is the exact opposite of an intuitive interface, or to spend inordinate amounts of time trying to figure out what to do (which, for web users hitting a new site, could be 10 seconds before they give up and go away). Hover actions of this sort might be useful for context-menu-like offerings (the sort of thing you would right-click on), but not for basic functionality and page navigation.

    They also should never, ever impede use of the site itself. An example that annoys me all the time is slate.com, where if you happen to run your mouse in the wrong direction over the page to get to the scroll bar or something, it starts opening up menus all over the place and covering up the articles you are trying to look at. Much worse examples are the typical “user reviews” sites or blogs that are full of hover-based popup ads. If I can’t read your page without accidentally activating half a dozen hover-based things that I have to either close or that cover up or distract from what I’m doing, I’m probably not going to come back to your site.

    0
    • 62

      I totally agree with your assessment of pattern #10. Hover-only controls are extremely popular right now, but just because Twitter is doing it doesn’t mean that it’s a good idea.

      IMHO hover-only controls are just the latest incarnation of “mystery meat” navigation. Bad UI then, bad UI now.

      0
    • 63

      Doing some research in to the UI rationale behind hidden UI controls which seem to have become all-pervasive now, described here as Hover controls, #10.
      I have to say I totally agree with @TMs 2009 assessment. Unless you are already an “expert” user on a site (usually its designer) they are quite simply the work of the devil.
      I’ve both witnessed and experienced first-hand the frustrations of the “how do I…” issues that they cause. And that’s just with a traditional mouse.

      0
  59. 64

    I’m surprised that the recommendation on #7 is to flag all “required” fields on a form. The alternate situation (flagging the optional fields as such) seems like it would reduce the clutter of having nearly every field tagged as “required” and provide a smoother experience for the user by clearly identifying fields he/she could skip.

    0
  60. 65

    I disagree with the tip on marking required fields. According to Steve Krug’s “Don’t Make Me Think”, you should only show users the required form fields so that nobody gets intimidated by the sight of all those hungry little boxes. If a user would like to enter optional information, he should be able to find an personal info page to fill out. A web form is complete not when there is nothing left to add, but when there is nothing left to take away, IMHO.

    0
  61. 66

    @TM: Of course, any pattern can be misused, and I agree with some of the things you said (especially that hover-based popup ads are evil). However I do like the way it is implemented on twitter.com.

    @Brian G: Good point, if you have just a few optional fields you might consider marking only them.

    @Evan: I agree with you partially. For registration pages that makes sense. But personal info page might have both required and optional fields and there has to be clear distinction between those. Some web forms have optional fields and no markers at all, and that is really frustrating.

    0
  62. 67

    This was a really great read because it stimulated a lot of interesting discussion in the comments. Thank you, Janko for indulging us — you’ve been a good sport!

    0
  63. 69

    Scott Kilmartin

    July 3, 2009 9:39 pm

    Janko,
    Really good and timely post.
    I”m in the midst of reviewing the functionality of the haul website.
    I’ve learnt a lot.
    Much appreciated, especially the ‘further reading’ links.

    0
  64. 70

    Matthew Freeman

    July 7, 2009 8:33 am

    Yet another reason why I am quickly falling in love with UI. Great article, nice image examples. Definitely following you on Twitter.

    0
  65. 71

    Articles like this on Smashing Mag are usually bullshit (sorry), but this is fantastic. This explains the most helpful things to happen to web design in the past 5 years. And in a way my mom would understand. Ssend [sic] this article back in a time machine to hotwired/webmonkey circa 1999. Shit would be tight. Haha.

    EDIT: I just realized that I almost exactly copied the Smashing Magazine top menu for a intranet project I’m designing. I didn’t even know I was doing it. I just consciously looked at this menu for the first time right now. And here I am calling you guys bullshit. Stupid. Sorry. Beautiful UI on the site.

    0
  66. 72

    Excellent article, i found almost all patterns very useful and i will consider them in any future projects. Many thanks :)

    0
  67. 73

    Great article. Knez Mihajlova :)

    0
  68. 74

    Nice article…

    0
  69. 75

    I’m a fan of lazy registration, but it’s still a source of annoyance in shopping cart systems. I get really frustrated when I’ve navigated a site, filled a shopping card, am about to check out, and suddenly I need to come up with a username, password, and other registration cruft. Just take my credit card and shipping info and/or redirect me through PayPal, and then use that information to build a provisional “soft profile” that you can use to prefill my shipping form next time.

    Your shopping site does not need “registration”.

    0
    • 76

      Agreed. All good carts allow shopping as a guest. However, to eliminate registration altogether would also eliminate marketing opportunities for the shop. It should be optional without getting in the way.

      0
  70. 77

    http://www.pearbudget.com is another very good example of this ‘lazy registration’ approach, one of the first I noticed using it well. Check that one out if you are researching your own implementation.

    0
  71. 78

    Oui, vraiment bon!

    0
  72. 79

    I really like this article. Looking forward to using some of these concepts in my next UI mockups. Keep it up!

    0
  73. 80

    Definitively a nice article man. Sometimes this types of things if done correctly make a site much more user friendly.

    Thanks for sharing it.

    0
  74. 81

    Nice article by Smashingmagazine like always.

    0
  75. 82

    Great thoughts on design patterns what do you guys think?

    0
  76. 83

    I disagree with you on one out of 10 (which ain’t bad!). “Hover Controls” to me is just another way of saying “Grope Navigation”. The interface doesn’t tell me what it can do until I hover over parts of it. Awful. Fine, raise the prominence of the control when I hover, but don’t hide it altogether when I don’t! I’m not playing Monkey Island, I’m using a website.

    2
  77. 84

    i liked the way they include the information. through this article we will come to know what are all the problems have to face while registering and how to make easy way of registration. totally a nice article i liked it.

    0
  78. 85

    bernard schokman

    March 19, 2011 6:05 am

    Great post. I love the ‘progessive disclosure’ i’ve found as a designer than having terms to combat bad design is the best thing you can have. it’s a keeper.

    cheers
    bernard schokman

    0
  79. 86

    This is a great help.

    I think just naming the 10 things make them easier to talk about and easier to look for.

    thanks,

    Jared
    rhyous.com

    0
  80. 87

    really cool collection of design patterns and interactive flows — very helpful to see examples from a few different current sources out there, too

    thanks for sharing this information

    0
  81. 88

    Simply Gr8 ! All the doubts related to patterns are cleared.

    thanks for such a useful and informative article.

    0
  82. 89

    Jason TEPOORTEN

    August 8, 2012 6:58 pm

    Hi,
    Thanks for this article.

    I’m looking for a really good UI Design Pattern that focuses on defining a schedule for a job to be run. The job can be run *now/asap* or set to start at particular date&time. If the job is set to start at particular date&time, recurrence options will also be available. Does anyone have any good suggestions?

    Cheers,
    Jason.

    1
  83. 90

    Hover controls should be used extremely situationally, since they don’t work for a touch-screen or up-and-coming Kinnect interactions.

    If you have a desktop experience only – fine. But if you plan on accommodating multiple devices it’s better to just abandon them altogether for anything relating to functionality.

    Use hover to make the desktop experience easier, (saves the step of clicking), if you have money to burn and not enough for your developer to do.

    0
  84. 91

    Awesome examples of the form designs thank you very much….. :)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top