UI Patterns

Links

• Blue links are to be used for links that take you to a new page.

• Green links are to be used when the link will do an action on the current page.

• Links that open in a new window (or tab) should be blue with the "new-window" sprite.

Hiding and disabling

A control should be disabled if:

• There is a way to enable the control (usually from the current page). E.g. the zoom in button on a map becomes disabled when the user has zoomed in fully. To enable the button the user first has to zoom out.
• The control is temporarily unavailable (e.g. an action is being completed).

A control should be hidden if:

• It is never available to the user in this context (the user can not do anything to enable it).

If the control is hidden it should be clear why things might be different in the current context (e.g. a forum thread is in "locked" mode). This can sometimes be supplemented with in-place messages where the hidden controls were, explaining their disappearance (e.g. on a blog post and comment form might be replaced with a message that says "Comments are disabled after 30 days"). These messages should be used sparingly and only if their disappearance is ambiguous (e.g. if a user can't edit items in a list there probably shouldn't be a notice where every edit button was).

Forms

Create (add) Forms

• First field should have cursor focus