Web applications are different from web documents.
Web documents exist to share information in an article-like manner. This consists of articles, blogs, wiki pages, and so on. Some web documents have a few app-like elements to enhance their designs, but all web documents should fall back to working in every browser, even when JavaScript is turned off.
A web application, however, relies on JavaScript to function. Web applications need enhanced interaction.
These guidelines are primarily focused on a web application, but several of these points may also apply to web documents — especially documents that have a few widgets around their content.
The most important rule is to make things as consistent as possible. Limit the number of (unwelcome) surprises in your interface.
- 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 target="_blank".
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.
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.
Make the default (primary) action clear, and make it visibly different from the secondary action.
Use HTML5.
By default, target the latest and the previous versions of popular browsers, which include: Firefox, Chrome, and Internet Explorer. (Some projects have additional requirements.)
Try to rely on native proprities of CSS and HTML instead of doing things through pure JavaScript. In most cases, the pure CSS way of doing things (like some animations & transitions, opacity) is optimized and hardware accelerated. Reimplmenting the same thing
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/