Design DocuWare

Guidelines and resources to create DocuWare digital interfaces

leafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

Focus

Estimated reading: 5 minutes 29 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.

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.

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.

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:

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:

Focus Animation

Leave a Comment

CONTENTS