[TBD: add intro]
The most important rule is to make things as consistent as possible. Limit the number of (unwelcome) surprises in your interface.
Links and Buttons
- Links: navigate to a new location
- Buttons: perform an action
- Buttons with ellipsis: perform an action that needs input (often in a dialog)
External links from web applications should look different from internal links, and, in most cases, open in a new tab/window using
Tooltips should only be used when information is obscured in some manner. If there is an ellipsis, use a tooltip. If an icon lacks a label, use a tooltip.
Confirmation versus Undo
Whenever possible, skip a confirmation step and allow for an undo afterward.
An exception: If there is possible or probable data loss and no way to undo, show a confirmation.
Primary and secondary actions
Make the default (primary) action clear, and make it visibly different from the secondary action.
By default, target the latest and the previous versions of popular browsers, which include: Firefox, Chrome, and Internet Explorer. (Some projects have additional requirements.)
Whenever possible, try to take advantage of a browser's built in accessibility.
Do not break typical keyboard presses, such as "/" for search or "control-p" for print.
Widgets should have a "tab" order and should have a visible state when focused. (See the tabindex HTML property.)
Color is to be used as an additional indicator of state. Ensure your interface works without color (or varying types of color) for colorblind people. Use different shades, different types of widgets, and text to convey meaning.
- Mozilla Developer Network: https://developer.mozilla.org/