In a previous entry, I introduced you to “10 UI design patterns” to keep in mind when designing your web site. Here’s a deeper discussion of those patterns as shared by Janko Javonovic’s in Smashing Magazine:
1. Lazy Registration
To fully appreciate the problem of registration, we should consider the somewhat limited perspective behind the recommendation that sign-up forms must die. This certainly doesn’t mean they should be completely omitted. Rather, they should be only one part in the process of introducing users to a system, and they should occur later 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 as though 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 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 simply will see 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.
Moo is another good example of lazy registration. Users can use all of the service’s functions to edit their cards online. They are asked to register, only before buying them.
- Sign-up forms must die: here’s how we killed ours!
- An interesting article on how 90percentofeverything implemented lazy registration.
- Web Form Design Patterns: Sign-Up Forms, Part 1 and Part 2
- Interesting and useful research that Smashing Magazine conducted last year
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 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.
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 edit your business cards on Moo (which we mentioned in the lazy registration pattern) to see how progressive disclosure can be used at a more complex level.
YouTube uses progressive disclosure when users customize the look of the video player. When a user clicks the icon, customization features open up below.
- Progressive disclosure
- Excellent insight from Jakob Nielsen.
- Read more… about progressive disclosure
- Good explanation of progressive disclosure, with several examples.
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 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 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 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 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.
- Web Form Design: Filling in the Blanks
Probably one of the best resources for designing Web forms.
Breadcrumbs show the path from the front page of the site to the current location of the 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’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.
- Breadcrumb Navigation Increasingly Useful
- Jakob Nielsen explains breadcrumbs in depth.
- Simple scalable CSS-based breadcrumbs
- A very good simple tutorial on how to create breadcrumbs.
This is it for the first five patterns. The next entry will review in depth the remaining design patterns.
See you there!
Source: 10 UI Design Patterns You Should Be Paying Attention To By Janko Jovanovic, Smashing Magazine