Skip to content

User Interface Guidelines

Jan Miksovsky edited this page Feb 11, 2016 · 3 revisions

This page summarizes some of the user interface guidelines adopted by the project. Designing UI guidelines for a web project like this is somewhat challenging. We are trying to create a broad set of general-purpose components with good usability, but the web as a platform only defines behavior for the standard HTML elements. We do the best we can to infer how those conventions might be extended to new custom elements, while respecting UI conventions and user expectations that may be evolving faster than the consensus-driven web platform can.

Many of this project's elements are our best attempt to identify a canonical representation of a UI idea that may have taken many forms across a variety of operating systems, browsers, and application environments. That requires a certain degree of judgment. It's impossible to come up with a set of UI guidelines or solutions that will please everyone and can be applied unequivocally across any design situation. Please keep that in mind.

Cursor and hover affordances

  • Generally speaking, elements that respond to mouse clicks should respond to mouseover, e.g., with :hover.
  • Use cursor: pointer for interactive elements that perform navigation, or navigation-like actions that replace a substantial portion of the visible page. Other small-scale interactive elements (e.g., a dropdown button in a combo box) can leave the cursor as the browser default (typically the arrow cursor). The question of when to use the pointer (hand) cursor requires judgment. See this issue for more discussion.

Clone this wiki locally