Focus

Estimated reading: 6 minutes 109 views

Focus visually identifies the elements that will respond to interactions like a mouse click, a keyboard command, or a tap and enable a simplified, element-based navigation experience.

When a user moves through the digital products by jumping between the page’s links, buttons, or form fields, it needs to be apparent to the user which elements are interactable and which part of the screen they’re on.
Components and patterns in the Design System should provide styles to clarify these things.
Guiding user attention and supporting the user while navigating the product is one of the primary tasks of designers.

Principles

Designers should ensure that the user can always tell where their focus is on the page.
The Focus state of the user interface elements should include external and internal changes in the elements - this should be a combination of the Hover state with the Focus indication.
The focus should never rely solely on color change and always include other visual indicators.
The UI focus should never move without users' actions triggering a change.
Every focusable element should have a focus style that is visually distinct from its other states.
Users should be able to control Focus movement as much as possible.
Designers should keep in mind that focusing on a UI item is not always the same as selecting them and evidently communicate this in their concepts.

Focus Types

Browser/System Focus

To meet the accessibility requirement, designers and developers should avoid removing the focus indicator provided by the browser or operating system unless they are replacing it with their own focus indicator, which is recommended.

Designers need to remember that a default-focused state may not be enough because a focus indicator needs to be distinctly visible to be accessible.

Keyboard Focus

Keyboard users typically navigate through the product by pressing the Tab key. It allows them to jump from one interactive element on the page to another. But, just like mouse users, they need to be able to see where they are on a page.

The user interface must provide a focus indicator that highlights the currently focused element and allows keyboard users to notice precisely where they are at any given moment of use.

Mouse Focus

Mouse focus is shown through the Hover state of interactive components. While the user moves the pointer above the UI elements Hover state alongside interactivity signifies the current focus.

Usage

A single color technic should be used to signify Focus (same color for shape, outline, and other visual elements and same color for background).
If users dismiss the focused element, the Focus should be moved to the next logical place in the UI.
When a user interacts with popover/overlaying components, the Focus should return to the element that triggered the display of that component after the user dismissed it.
To ensure users understand where is interface attention point is and what element is interacting at the given moment system should provide a combination of focused and hovered states.

Focus technics

When a user’s action causes a UI change, such as an element appearing or disappearing from the screen, different focus management techniques can be used to prevent the user from getting lost.

When focus management is done right, it helps all kinds of users navigate the product without causing a cognitive load. Additionally, it supports keyboard and screen reader users in discovering UI changes and helps them easily reach the next logical step in the flow.

How to express the focus:

Component focus state

Every component and UI interactive element should be able to communicate a focused state. The more significant the structure change and contrast between the unfocused and focused states, the easier it is for users to see it. Focus states can include the usage of additional shapes, changes in the color shades, the invention of the color, underlines, and other UI tricks to signify state change.

Examples:

Focus on links and buttons

Links are given a darker shade of color and a visible rectangular outlined shape around them when they have focus. This combination ensures good contrast and visibility. Likewise, buttons are given darker background color and rectangular shape around the component similarly. This focused style should be applied to all types of buttons.

Focus Indication Area

Focus Indication Area is a shape around the component, pattern, or block with a filled background of neutral color. Usage of this additional area helps show the focus element and bring attention to the part of the product page under focus. This technique should be used alongside the component focus state and should not be considered a standalone tool.

Focus Symbols

To communicate Focus elements in the user interface designers may use special symbols appearing close to the element under focus:

Symbols should meet contrast requirements and be distinguishable from the element, background, and other UI parts.
Symbols should be used consistently in the product to ensure their recognition and association with the UI focus.
Symbols should differ from any other icons used in the User Interface and should not be reused for other than focus needs.

Focus Animation

Animation in the product should not bear a fun purpose but have functional goals. Animation influences a user’s eyes, and it can control where they focus. This is great as long as the user’s eyes are on the right thing. Designers should animate components based on where the user should focus.

How to test Focus

To verify proper focus management, it is important to try using the product only with a keyboard by utilizing the Tab key to navigate forward and Shift + Tab to move backward.

Some elements (such as Combo box and dropdowns) may be reached by the usage of the arrow keys.

The User Interface should allow:

Navigation to every interactive element
Visual focus indicators for every element should be clearly visible and distinctive
The tabbing order is logically based on the page structure and content
There are no traps anywhere, and focus is never lost
When a new element is triggered (for example, a modal), the focus is moved to that element when opened and returned to the page when closed

DocuWare Design

Focus

Principles

Focus Types

Browser/System Focus

Keyboard Focus

Mouse Focus

Usage

Focus technics

How to express the focus:

Component focus state

Focus Indication Area

Focus Symbols

Focus Animation

How to test Focus

The User Interface should allow:

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input