Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Feedback and system status

Users should always know what’s happening. The right message or indicator at the right time keeps them oriented and in control.
Provide timely feedback so users are never left guessing. Examples include loading indicators and validation messages.
Confirm that actions have been received. Examples include Sonner notifications after saving, or a contextual tooltip confirming something has been copied to clipboard.
Use the appropriate loading state for the context:
  • Full-page loaders for page transitions
  • Skeleton placeholders instead of blank screens
  • Spinners and progress bars for smaller transitions
  • Lazy loading for optimal performance

​
Affordance and discoverability

Affordance refers to the visual and interactive cues that signal how an element can be used — so users instinctively know what actions are available.
Small animations and visual cues that indicate an interaction is possible. Example: button hover effects.
Cursors should change to reflect what’s possible — a pointer for clickable elements, an i-beam for editable text.
Use recognizable patterns to surface interactions. Examples: a magnifying glass inside a search input, or a chevron on a button that reveals a dropdown.
Provide tooltips or inline hints where user intent is ambiguous or the action has meaningful consequences.

​
Progressive disclosure

Progressive disclosure hides less important information until it’s needed, reducing cognitive load and preventing overwhelm. Apply affordance principles when using it so users know hidden content exists.
Hide secondary content but keep it accessible and logically placed. Examples: accordions, dropdown menus for file management.
Break complex tasks into focused steps so users aren’t overwhelmed by the full scope of a task upfront.
Less-used settings or inputs can be hidden until relevant. Example: show additional configuration only after a user selects an option that requires it.
Menus that appear adjacent to the element they affect — like right-clicking in a graph or canvas. Surface relevant actions and hide less common ones.

​
Error handling and prevention

Design for error prevention first, recovery second. When users can identify and fix problems on their own, it keeps them moving.
Warn users before irreversible actions. Example: “Are you sure you want to delete this?”
Prevent accidental data loss by autosaving user inputs wherever possible.
Explain what went wrong and how to fix it before the user tries to proceed. Follow established error state patterns.
Let users confirm or cancel an action before it’s finalized, or provide an undo option in the toast notification after completion.

​
Enable super users

Experienced users benefit from shortcuts, bulk actions, and customizable workflows that reduce friction and speed up repetitive tasks — without overwhelming beginners.
Support keyboard shortcuts for common actions. Align them with platform standards or patterns used across other CDF applications.
Support multi-select and bulk operations when users may need to perform the same action across many items.
The interface should support both novice and experienced users, making it easy to learn without getting in the way of efficiency.

​
Layout and hierarchy

Layout and hierarchy directly impact usability, readability, and how efficiently users can navigate a product.
Place frequent actions in consistent, accessible locations across the product. Example: topbar local actions.
Use size, color, contrast, and whitespace to emphasize what matters most.
Structure content based on how users naturally scan — left to right, top to bottom, with the most important content first.
Keep text and elements aligned for a clean, structured layout. Example: left-aligned labels in forms.
Components and page layouts should be optimized for desktop, tablet, and mobile.

​
Accessibility and inclusive design

Accessible design improves usability for everyone, not just users with disabilities.
All interactions must be performable via keyboard. If an action is only available on hover or drag, provide a keyboard-accessible alternative.
Text must meet WCAG AA contrast ratios at a minimum.
Use semantic HTML and proper ARIA attributes to support screen readers.
Clearly show which element is focused during keyboard navigation. Most focus states are handled by Aura components.
Support voice commands, screen readers, and other assistive navigation tools.
Minimum 44px for touch targets, 20px for click targets.
Last modified on May 11, 2026