Design Patterns I

• GETTING INPUT
  • Forms
    • Forgiving Format
    • Structured Format
    • Fill In The Blanks
    • Input Prompt
    • Good Defaults
    • Captcha
    • Inplace Editor
    • WYSIWYG
    • Live Preview
    • Password Strength Meter
    • Input Feedback
    • Calendar Picker
  • Explaining the process
    • Steps Left
    • Blank Slate
    • Inline Help Box
    • Wizard
    • Tour
  • Community driven
    • Wiki
    • Lazy Registration
    • Vote To Promote
    • Account Registration
    • Rate Content
• NAVIGATION
  • Tabs
    • Module Tabs
    • Navigation Tabs
  • Jumping in hierarchy
    • Breadcrumbs
    • Shortcut Dropdown
    • Home Link
    • Fat Footer
  • Menus
    • Vertical Dropdown Menu
    • Horizontal Dropdown Menu
    • Accordion Menu
  • Content
    • Thumbnail
    • Carousel
    • Continuous Scrolling
    • Pagination
    • Archive
    • Tag
    • Tag Cloud
    • Article list
    • Event calendar

Forms 

Forgiving FormatDesign pattern

Problem summary

The user needs to quickly enter data into the system, which then in turn interprets the user's input.

Example

Usage

• Use when the more explicit select boxes, radio buttons, and checkboxes make entering data a too complicated process for the user to engage with the system.
• Use when filling out forms takes too much time for the user compared to what he or she wants to accomplish.
• Use when the the input you want to collect is regarding one topic. For instance a physical location or an event with a given start time.
• Use when expected input can be somewhat easily interpreted by a computer program.
• Do not use when the user can possibly ask anything. Only use for a narrowly defined purpose.

Solution

An input text form field is presented with a accompanying label describing what input is expected in the field. Possibly, examples of working inputs is also presented to easy the user’s formulation.

The whole idea with the forgiving format pattern is to transfer input from a user interface problem to a programming problem. Behind the scenes, an interpreter checks for different word patterns, and converts them into a formatted value.

Rationale

Using the forgiving format pattern saves space, and decreases the barrier for the user to interact with the system.
Depending on how widely defined the input topic is, it can be increasingly hard for the backend program to interpret the input field. The success of this pattern has much to do with how information is asked for – how the user is prompted.

Structured FormatDesign pattern

Problem summary

The user needs to quickly enter data into the system, without being forced choose data from combo-boxes or other selection mechanism.

Example

Usage

• Use when the more explicit select boxes, radio buttons, and checkboxes make entering data a too complicated process to fill out for an every day task.
• Use when filling out forms takes too much time for the user compared to what he or she wants to accomplish.
• Use when the the input you want to collect is a specific data type. For instance a zip code, a date or time, a phone number.
• Use when the expected input follows a specific given format which can readily be interpreted by a computer program.
• Do not use for inputs that can possibly be interpreted in many ways. For this purpose, see the Forgiving Format pattern.

Solution

An input text form field is presented with a accompanying label describing what input is expected in the field. The label describes a specific structure the user must follow to input a valid value.

It is often seen that the user is also presented with the possibility to use helping mechanisms such as a date selection calendar to fill out the input box in the correct way. When the user has done this multiple times, he or she slowly learns how the input is formatted correctly by the helping mechanism, so that they can copy the same format on their own.

Rationale

Using a structured format in an input field saves time for the user, who fills out the same input field repeatedly as a part of a frequent task. Instead of having to go through half a dozen of select and checkboxes, the same input can be typed much faster if a specific input text structure is followed.

Fill In The BlanksDesign pattern

Problem summary

The user needs to enter data into the system

Example

Usage

• Use when you find yourself creating labels for input fields that does not really explain what the input field is all about.
• Use when you find yourself creating long and complicated labels for input fields, which in turn makes it hard for users to understand.
• Use when you can possibly express the context of the input field by placing it in a sentence.
• Use when filling out the input field is mandatory or strongly appreciated. Leaving parts of a sentence unfilled creates annoyance in the user.
• Use when you have a relatively small set of input fields to place as part of the sentence. If you have many input fields, placing them all in a sentence can seem tiresome for the user, as the sentence structure forces the user to read all sentences through and place all input fields in context of those sentences.
• Do not use if you have many fields that are not required to be filled out.

Solution

Order your input fields (be it a text box, radio buttons, checkboxes, combo-boxes) as if they are part of a sentence. Write a sentence and let the user fill in the blanks of the sentence by selecting or filling out input fields that are in place of words.

When the input field is not inserted at the end or the beginning of the sentence, it is important for the general readability and understandability of the interface, that the input fields does not take up more space than the height of one text-line. Input text boxes, and drop-down lists therefore work the best for this sort of usage.

The pattern is often seen in applications that filter large lists out by conditions. In Apple’s iTunes, the pattern is used to create conditions for smart playlists (See examples at bottom of page).

The biggest drawback of the pattern is its poor ability to be localized into different languages as the placement of each input will possibly have to be rearranged to match the grammar of each language. Using “Fill in the blanks” in this way hinders immediate conversion of a user interface to other languages.

Rationale

By inserting the input fields into a sentence of words, the input is put into a specific context of the system. Sometimes, it can be hard to find a describing label for an input that does not alienate the user to the system. Consider the example in the bottom of the page from the Ruby On Rails wiki.

Here, both the submit button (“Save”), the input field for the author name, as well as a back in history link are presented all in the same sentence. These three options could have easily been represented on separate lines with a separate label for each option. Instead, the three options are presented as a sentence, and thus put in context of each other.

Furthermore, the example above uses the Input Prompt pattern to encourage users to fill out the text field.

The “Fill in the blanks” makes the interface somewhat self-explanatory. Our semantic capabilities as human beings allow us to fill in the missing parts of a sentence.

Input PromptDesign pattern

Problem summary

The user needs to enter data into the system

Example

Usage

• Use when the label of an input field does not fully explain what should be filled into it or when using such a label feels like over-explaining the interface.
• Use when an example text or question answers what should be filled into an input field just as well as a label.
• Use when you want to save the space that a label otherwise takes up.
• Use in combination with a label, to further explain what kind of input is needed.

Solution

An input field is pre-filled with an example text or question that prompts the user what to do or type.

The Input Prompt pattern is most successfully used with dropdown lists and text fields. As thedropdown list has a fixed set of choices the user can choose from, it is often words like Select orChoose the prompt text begins with. For text fields, the prompting string often begins with a call to action: Enter, Type, Search. End the string with the noun the input is describing, for instance Enter city or Enter an address.

For text fields, the Input Prompt pattern is often combined with scripting that removes the prompting text once the user’s focus is on that box. Once the user enters the input field to type in content, the prompting text is removed and replaced with nothing so that the input field is free for the user to fill out.

Rationale

When a user fills out a form it is most often with the purpose of filling it out as quickly as possible to get on with the service the website is offering. This is why the user often just scans through form fields and labels without giving the labels much of a glance. By using input prompts, immediate attention is drawn to what the user needs to fill in. The user can’t miss it. Although you must beware of removing labels entirely, as the input prompt is removed once focus has been set to the text field.

Input prompt is often used for small forms that are key to the core functionality of a site as inserting the label inside the text field itself helps save space. For more elaborate forms, there are often more than enough room available to explain each input field.

CaptchaDesign pattern

Problem summary

The application needs to verify that the data submitted originates from an actual human and not a robot.

Example

Usage

Websites featuring the ability for visitors to comment, register as a user, or otherwise actively post content on the website are often exposed to attacks from spam-robots. The content posted by such spam-robots can be compared to spam sent by e-mail. The main purpose for the spam-robot on the web is however often to just create links to a specific website, so that website will rise in search results on for instance google.com. These spam-posts rarely have anything to do with the subject of the website, hence the spam categorization.

To avoid such spam, captchas are introduced. The whole idea is to create a way to distinguish real human beings from automated robots.

• Use when your web application experiences attacks from malicious web-robots trying to post spam-content on your site
• Use to protect your website from automated robots
• Use when the capability to post content to your website is not blocked by the need to be logged in. Registration processes are included.

Solution

The most popular form of Captchas are images with letters and numbers inside. The user is then to write in a separate form field what the image reads. To prevent spammers from using OCRsoftware to read the image, the image is manipulated in different ways, that makes it hard to interpret for computers while maintaining readability for humans.

If the user succeeds in typing what the image says, his content is posted to the website. If not, the action will be refused. It is common to allow a number of tries to enter the captcha text, as some captcha images are even unreadable to humans due to the strong image manipulation is has been exposed to.

Rationale

Captchas are short for ‘Completely Automated Public Turing test to tell Computers and Humans Apart’. The whole idea behind Captchas is to distinguish humans from computers letting the user perform an action a computer can’t. A captcha is a simple Turing test.

There is a fine line between making a captcha unrecognizable for OCR scanners and still readable for human beings. Readability for the human has to come first. Other problems with implementing captchas to protect your website include a lock-out from visually impaired users as they can’t use voice software to speak what the captcha reads.

Other forms of protection from malicious spammers are asking questions like “what is 2 + 3” or “what is two plus three” or using voice captchas,