Patterns

Icons

Icons symbolize common actions, features, and themes throughout our app.

Interactivity

Basic states

Off states

In the Sprout paradigm, an “off” state occurs before an action has been taken on an icon.

DefaultOff: — 4.49:1
HoverOff: — 10.56:1
ActiveOff: — 16.65:1
FocusDefault browser focus on 32x32 hit box (desktop).

The off state of inline icon actions

On states

In contrast to the “off” state, an “on” state occurs after an action has been taken. It can represent a simple binary action or that data has been changed in some way.

DefaultOff: — 4.58:1
HoverOff: — 7.75:1
ActiveOff: — 11.88:1
FocusDefault browser focus on 32x32 hit box (desktop).

The on states of inline action icons

Symbolic icon education

Tooltips provide new and existing users with text labeling to aid in immediately understanding the meaning of an icon. As Sprout uses primarily symbolic iconography to create conventions, Sprout users are never left guessing the meaning or state of an icon because they, or their computer, can read it.

Meaning

Tooltip displays what the icon means and what it will do when clicked.

Hover reveals the meaning of an icon
Hover reveals the meaning of an icon

State

Tooltip is reflective of the state of the icon. I.E. “Like” vs “Unlike”

Hover reveals the state of an icon
Hover reflects the state of an icon

Accessibility

Labels are screen readable.

Accessibility

Solid icons are accessible much the same as solid buttons are. We have accounted for low vision, colorblindness, and blindness with contrast improvements, color differentiation, and screen reading.

Accessible colors and their contrast ratios
Accessible colors and their contrast ratios.

Overview

AccessibilitySource, Source
DefaultOff: — 4.49:1
On: — 4.58:1
HoverOff: — 10.56:1
On: — 7.75:1
ActiveOff: — 16.65:1
On: — 11.88:1
FocusDefault browser focus on 32x32 hit box (desktop).
Scannability7/8 color blindness coverage - Monochromacy fail

User delight and clarity

Animation provides delight for users taking monotonous actions as well as clarity and confirmation on binary actions.

Animation

  • Provides clarity and confirmation on binary actions when the icon is the sole source of feedback.
  • Provides delight for monotonous actions.
  • Does not interfere with bulk processes.
  • Provides affordances for required action.

Timing and conversion

Animations for icon interactions should have a 1 second duration. Adobe Premier prototypes will often reference specific keyframes, while CSS animations are defined as percentage values. To convert from keyframe to percentage, divide the keyframe number by 30, e.g., frame 15 / 30 frames per second would translate to 50% in CSS. Round to the closest whole number i.e., 33% rather than 33.3333%.

Pacing and Timing Functions

In Premier, interpolation can be set and adjusted on frame-by-frame and animation-by-animation basis. CSS Keyframe animations use a property called animation-timing-function which accepts standard pre-built functions like linear , ease-in or custom values via CSS’ cubic-bezier() function. The base curve used for our icon interactions is .33, 0, .67, 1.

The CSS keyframe animation API does not provide a way to alter an animation’s curve once it has been set via the animation-timing-function. Fortunately, it is possible to change this value via JavaScript by altering the icon’s animationTimingFunction function e.g., el.style.animationTimingFunction = "1, 0, .95, .6";. This JavaScript override can be implemented via setTimeout(), see this CodePen demo for an example.

Parameters

We can animate with the following parameters via CSS Keyframe Animations, Position (e.g., translateY, translateX ), Scale, Rotation and Opacity.

Accessibility

Uses a combination of motion and scale to provide futher affordances to people with disabilities.

Reactions

An icon swap takes place to reflect the state of the reaction…
An icon swap takes place to reflect the state of the reaction…

Required actions

A brief, subtle animation plays when a disabled trigger is validated.
A brief, subtle animation plays when a disabled trigger is validated.