DocuWare Design

Guidelines to empower the DocuWare products' inclusivity and accessibility

Feedback
Updated on November 16, 2022

Docy

States

Estimated reading: 2 minutes 132 views

States are visual representations used to communicate the status of a component or interactive element. States communicate the status of UI elements to the user.

Principles

Distinct

States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.

Additive

When multiple states occur at once, such as selection and hover, both state indicators should be displayed.

Consistent

States should be applied consistently across components in order to increase usability.

State Types

Default

The default state communicates an interactive component or element.

Hover

A hover state communicates when a user has placed a cursor above an interactive element.

Focused

A focused state communicates when a user has highlighted an element using an input method such as a keyboard or voice.

The focus state requirements:

  • Focus Indication Area

The Focus Indication Area should be at least as large as the area of a 4px bigger perimeter of the unfocused component. The area can include a shape, background color, stroke, or any symbol used to signify focus.

  • Outline wrapper

The outlines wrapped around the entire elements should be at least 2 pixels thick to be noticeable.

Active

A selected state communicates a user choice.

Dragged

A dragged state communicates when a user presses and moves an element.

Toggle state

A Toggled state communicates a toggle between two options.

Disabled

A disabled state communicates a noninteractive component or element.

Error

An error state communicates a user or system mistake.

Interactions - Previous Focus Next - Interactions Loading
CONTENTS
Design System Contact Us
Chat Icon Close Icon