DocuWare Design

Guidelines to empower the DocuWare products' inclusivity and accessibility

Docy

States

Estimated reading: 2 minutes 169 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:

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.

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.

CONTENTS

Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...

Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify u...

Banners

How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon