VISION
The core concept behind Actions Ring is to establish a seamless and efficient digital interaction layer that serves as the interface for an expanding network of integrations between Logitech's hardware and software.
This project aims to enhance the user experience for Logitech’s diverse audience by fostering more personalized, productive, and creative interactions. It acts as a connective bridge between users, their devices, and the applications and services they rely on, enabling a use-case oriented approach rather than focusing on individual apps. The goal is to offer mainstream users intuitive, simple experiences, avoiding complex configurations, while providing advanced users with deep functionality and customization options tailored to their needs.
The primary challenges that Actions Ring seeks to address include reducing contextual cognitive load and eliminating interface inconsistencies. Currently, physical devices struggle to clearly communicate the purpose of contextual buttons in varying scenarios, creating confusion for users. In addition, inconsistencies in interfaces and shortcuts across different applications within a workflow further increase cognitive burden, requiring users to repeatedly adapt. The reliance on keyboard shortcuts also adds to the mental load, as memorizing them can be difficult, ultimately hindering overall efficiency.
LAUNCH / TRIGGER
Launch Actions Ring — To activate the Actions Ring, users can click on any trigger assigned to it. Repeating this action while the menu is open will close it. Alternatively, clicking the dismissal center button will also close the Actions Ring.
Trigger an action — There’s two methods to trigger a simple action. The most straightforward one is to left click on an action. This will result in triggering the action and close the overlay. The other method is when the user opens the radial menu, they must hold the Actions Ring trigger down and release it while hovering over the desired action. This result in a smoother and more optimized experience since it only requires one click.
Folders — To open a folder and have access to an extension of set of action, the user can simply hover over a parent element, the secondary layer will then appear. As they encompass a set of actions and provide users with enhanced customization options, they offer additional space, allowing users to assign and organize a greater number of actions according to their preferences.
SCROLL / DRAG
Scroll — To adjust an analog value, such as adjusting volume, users must simply scroll up or down with a scroll wheel. This interaction provides a fast and efficient way to achieve adjustments.
Drag — For greater precision, users can hold the left mouse button and drag left or right, simulating the familiar slider bar interaction commonly found in software applications. To enhance usability, the analog element dynamically transforms into a pill-shaped form, which we refer to as the adjustment module, ensuring a more intuitive and responsive experience.
GUIDELINES
The radial menu needs to fit in with the user’s interface ecosystem while still maintaining its own visual identity across contexts, establishing a consistent visual identity for Logitech software tools. To enhance usability, we designed the interactions within the radial menu to minimise cognitive load by leveraging human cognitive abilities such as spatial and chromatic memory.
In its chore, Actions Ring is a circular menu composed of a set of eight bubbles which are individually dedicated to an action, a shortcut or a macro. Actions Ring can be triggered by any key of any Logitech device.
The metaphor of metaballs—organic, fluid-like shapes that merge when in close proximity to form a single, continuous object—underpins the entire design system of Actions Ring. This concept is reflected in the representation of an outgrowth extending from the main shape, enabling the display of additional useful information to the user. The idea is further embodied in the motion design, which reinforces the fluidity and cohesiveness of the system. Let’s breakdown it’s design system
LAYERS
The first layer consists of a group of eight persistent elements, uniformly distributed around the central point of the radial menu, with each element positioned at a 45-degree angle from the next.
Some actions in the first layer function as parent elements. Hovering over any of these will reveal a new set of actions, referred to as nested elements. Each group can contain between one and nine nested elements.
ACTIONS
Basic elements — They serve as simple digital actions that function as input triggers, enabling users to initiate specific commands or operations with ease.
Analog elements — Given that the interaction scheme differs between basic and analog elements, it is essential to visually communicate this distinction. The circle indicator provides users with this information, complemented by a value readout that displays the parameter's current value. Hovering over an analog element will reveal the value in numerical form.
As outlined in the interaction scheme, the adjustment module adopts a pill shape, enabling the display of additional information, such as the action name and the current value.
Parent elements — They can be considered analogous to folders, as they encompass a set of actions and provide users with enhanced customization options. They offer additional space, allowing users to assign and organize a greater number of actions according to their preferences.
Tooltips — They provide users with the name of each action upon hovering over any bubble, ensuring clarity and ease of use. As Actions Ring relies solely on icons to represent actions, it is crucial to offer users immediate access to action names to support intuitive interaction and prevent ambiguity.
OPTIONS+
DRAG & DROP
