PrincipleOfDistinction

The Principle of Distinction says that UI elements with different behaviors or roles should look different. The visual language should not contain "homomorphs"—i.e. distinct lexemes with indistinguishable forms.

Negative Examples

Here is an example where the principle of distinction was not adequately followed: I mistook this purple rectangle next to a list item for a scrollbar thumb. It actually marks the selected tab.

Any one of several small changes could have prevented the mistake:

• the tabs could have been given top and bottom borders, which would make it clear that the purple bar coincides with a tab.
• the active tab could have been given a distinct background color instead of or in addition to the purple bar
• a different shape could have been used to mark the active tab—e.g. a dot or an arrow
• UI designers all over the world could have avoided habituating users to tiny, rectangular, non-platform-standard scrollbar thumbs and invisible scrollbar tracks.