Why

• Especially with forms, hiding irrelevant options/content until users need them makes the form more clear and simple, making completing it quicker and easier.
• Structuring the content into meaningful chunks makes the content faster to understand.
• Tabs are familiar to users, they know how tabs work.
• Usability tests has shown that compared to horizontal tabs, stacked tabs perform better.
  

How it works

• Stack tabs vertically
• Clearly indicate which tab is currenly selected, and visually connect the follow-up questions/content to the tab it is associated.
  
• Make the first tab selected by default.
• If questions are mutually exclusive, include radio buttons in front of the tabs to make it more obvious that they are mutually exclusive options.
• Don’t refresh the entire page when the user moves between tabs, just the stacked tabs-module.
  

History

The first version (1.0) was created on August 8, 2008 by Janne Lammi. It is inspired by Luke Wroblewski’s article “Selection-Dependent Inputs” and Yahoo’s Module Tabs-pattern.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with stacked-tabs

What

Give the user an option to easily undo an action.

Example image

Remember the milk gives users the option to undo their actions.

Use when

• Whenever there is an opportunity to lose work, the program should allow undo actions.
• The more costly it is to lose data, the more important it is to provide undo.

Why

• Software that allows you to undo is software you can trust.
• We all make mistakes, for example, end up clicking “OK” on the “Are you sure you want to quit” dialog. We don’t pay attention to what we click because we have clicked “OK” for so many times.
  • Therefore, instead of warnings/confirmations popups, provide undo function.
  • Never use a warning when you mean undo.

How it works

• Start by deciding which operations need to be undoable, and creating an undo stack.
• After an undoable action, show and highlight info text for undo at the top of the page (tell the user what he just did) and provide an undo link/button with it.

History

The first version (1.0) was created on April 15, 2008 by Janne Lammi. It is inspired by Aza Raskin’s article “Never Use a Warning When you Mean Undo”.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with undo

Why

• Radial menu, which is a context menu, is an effective way to provide available command choices to users. It offers only relevant commands that apply to the current selection
• Minimizes hand movement needed to access commands
  • Thus radial menu is fast to select from
• Saves screen space
• Allows the user to focus on what is important in each step of the process
  • Towards task oriented UI
• Because the menu is hidden until needed, the design is more simple and clean than when using a menu bar which would be always visible.

How it works

• Show a radial menu on click
• Display commands as slices in a full circle or in an incomplete circle
• Add sub menus to parent menus if needed
  • Sub menus don’t need to be in circular
• Menu can be closed by clicking the center

History

The first version (1.0) was created on April 8, 2008 by Janne Lammi.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with radialmenu

What

Clearly provide feedback message in context after successful action / form completion, or if something went wrong.

Example image

Tickspot.com - A styled error message is shown at the top of the page.

Use when

• After successful action or form completion.
• If there were errors that happened during form submission.

Why

• The system should always tell the user how it is interpreting user’s input.
  • Same-page, visually distinct feedback messages makes users aware of what is happening
• The feedback should be given in context, not out of the context. Same-page feedback messages tell users what they need to know where they need to know it.

How it works

• Show the original page again with a feedback message at the top of the page/view
• Style the message to be sure the user notices the message and understands its significance immediately. We suggest using the following styling:
  • Success messages: Green background/border color and a success icon
  • Warning messages: Yellow background/border color and a warning icon
  • Error messages: Yellow background/border color and an error icon.
• If errors, flag each field that is in error with a clear visual indication that it needs to be corrected along with information about what the problem is and how recover.
  • For example, change the background color of the fields with errors, or add thickened borders around those fields.
• Provide short and easy to understand feedback messages.
• If possible, provide undo button/link with the message.

History

The first version (1.0) was created on March 11, 2008 by Janne Lammi.

Where Used

More photos in Flickr group “UIPatternFactory.com” tagged with messages

Why

• User needs to know which fields are required and which are optional to see what needs to be filled in.

How it works

• First of all, keep the form simple - Don’t ask users to provide useless information.

If most of the form fields are optional

• Use text or asterisk (*) next to each field to indicate required fields.
• If you choose asterisk, provide a legend which tells the meaning of it.

If most the form fields are required

• Use text to indicate optional fields.

An alternative way is to group required and optional fields in different groups.

History

The first version (1.0) was created on January 30, 2008 by Janne Lammi.

Pattern Gallery

More photos in Flickr Group “UIPatternFactory.com” tagged with requiredformfields

Why

• It is simple and a great time-saver. The user doesn’t need to go to an edit page. Instead, he can just click on an element he wants to edit and start typing.

How it works

• Invite the user to click the text providing a tooltip when the mouse is over the text the user wants to edit.
  • For example, use phrase “Click to edit”, “Double-click to edit”, or just word “Edit”.
• …and also on mouse over, highlight the item to indicate it is editable.
  • Add borders or change the background color.
• On click, load the text into an edit box, precisely in the same location as the original text.
• Finish editing when user presses tab or clicks outside the edit area
  • OR provide “Save” and “Cancel” buttons instead.

History

The first version (1.0) was created on 14.01.2008 by Janne Lammi. It is inspired by several existing design patterns on the topic.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with editinplace

Why

• The shopping cart is the most common metaphor in eCommerce on the Web. People know the basic idea of how it works.

How it works

• Keep the cart visible (if possible) and up-to-date throughout the shopping process.
• Show only the most important details of the items in the cart
• Allow users to see more details about the products in his cart
• Allow users to remove and edit cart items
• Allow users to see the entire contents of the shopping cart with details in a separate view.
• Always allow an easy access to the cart
• Show the entire list of items in the shopping cart when the user goes to an order view to place an order.
• Provide feedback so that when the user puts a product into the cart, he should notice that it is there.
• Suggest related products the user might need after he has added an item to the cart
  • OR show related products when he is about to place an order.

History

The first version (1.0) was created on 28.12.2007 by Janne Lammi.

Pattern Gallery

More photos in Flickr Group “UIPatternFactory.com” tagged with shoppingcart

What

Match the visual presentation of actions to their importance to get users through a form as quickly as possible.

Example image

Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Continue”. They enable form completion, the most important action on the form.

Secondary actions are actions such as “Cancel”, “Go back”, or “Reset”. They are less important, alternative actions, which often have negative consequences, particularly when used accidentally. For example, hitting “Reset” erases all the data a user has entered.

Use when

• A form enables “final” action, or several “final” actions, to complete the form.
• Secondary actions are present.

Why

• All form actions are not equal, and therefore the visual presentation of actions should match their importance to make it easier to complete a form.
• Visual distinction helps users make “good” choices.
  • For example, “Cancel” is secondary action which is rarely used compated to primary actions. Therefore, the visual wieight of it should be reduced in some way to minimize the risk of selecting it unintentionally.

How it works

• First of all, avoid secondary actions whenever possible
• Ensure a clear visual distinction between primary & secondary actions
  • Reduce the visual weight of secondary action; Use a link instead of a button, or use light colors.

History

The first version (1.0) was created on January 07, 2008 by Janne Lammi. He got the idea for this pattern from reading Luke Wroblewski’s article Primary & Secondary Actions in Web Forms.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with primaryandsecondaryactions

Why

• It should be clear to the user that progress is being made, and the system hasn’t just “hung”.
• The user wants to know how long he needs to wait.
• Progress indicator makes the application feel more responsive making the user much more patient.
  • If the UI does not give any feedback that something is going on, the user gets impatient and might not wait the operation to complete.

How it works

Always

• Provide continuous feedback.
  • Use an animation to tell the user the system is doing something.
• Let the users continue with their work when progress is being made.
  • Don’t lock up the UI.

For shorter delays (0-3 seconds)

• Display an animated progress spinner so the users know the system hasn’t died.
  • Replace the button/component that triggered the action with a spinner so that the user can’t duplicate action.

For longer delays (more than 3 seconds)

• Rule #1: Make it faster! Don’t let the user wait.
• If possible, visually show how much time there is left for the user to wait.
  • Don’t lie to the user. The time left should be realistic, and it shouldn’t “get stuck”.
• Allow user to cancel the operation.
  • Provide a cancel link/button near the progress indicator
• If the user needs to wait for a long time, provide messages to entertain the user and/or to tell the user what is going on.

History

The first version (1.0) was written on April 5, 2008 by Janne Lammi.

Pattern Gallery

More photos in Flickr group “UIPatternFactory.com” tagged with progressindicator

Why

• Helps the user to provide the right answer quicker and without typographical errors. He needs to remember only part of the answer.
• Additional information in the list of valid answers can help users to give the correct answer (like the airport code and city in the example above).

How it works

• As the user types, show a list of valid answers below the text box that match what he has typed.
• Always highlight the closest match and show it as first in the list.
• Allow the user to pick the answer he wants using the keyboard (up&down arrows for moving between items and enter or tab button for selecting the answer) or mouse.
• Don’t irritate the user - Give him an option not to use inline suggestions.
  • Allow the user to close the list by hitting Esc-key.

History

This pattern is inspired by Auto Complete pattern in Yahoo! Design Pattern Library. The first version (1.0) was created on 10.01.2008 by Janne Lammi.

Pattern Gallery

More photos in Flickr Group “UIPatternFactory.com” tagged with inlinesuggestions