Smashing Magazine - we smash you with the information that will make your life easier. really.

great article. some really interesting points. thanks

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.

This was an especially good post. Loved it.

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

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

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.

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.

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.

Another great article.

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

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

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.

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

Thais really great post about UI design patterns.

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

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

Tim

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.

I just love smashing magazine ;)

Usefull article, but your facebook details are clearly readable.

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

Yup, really good!

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

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

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

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!

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.

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.

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!

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

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

Nice article…