User Experience News

Here’s a collection of user interface news, as aggregated by AllTop. I take no responsibility for the content, but it’s usually very good.

Recognize the messenger

The way we treat the bearer of bad news, criticism, and new ideas matters. Here’s how to do it well.

Employee recognition” is all the rage lately.

The idea is that you should positively reinforce the behaviors you want to see in your team. Want employees to hit their sales goals? Recognize those who do. Want employees to be more creative in the work they deliver? Recognize those who do.

However, when it comes to cultivating and open and honest culture, what we often forget (or conveniently avoid) as leaders is to positively reinforce one particular behavior: We rarely encourage our team to tell the truth.

How often do we publicly and graciously recognize employees for being a voice of dissent? For asking tough questions? For calling out mistakes? For being flat-out honest in our organizations?

And, how often do we do it well?

A few years ago, I was inspired by a fellow CEO in Chicago who shared with me something she does at every all-hands meeting…

Prior to the meeting, she reflects on the feedback she’s gotten (through Know Your Company, no less — she’s a happy customer 😊). Then, at every all-hands meeting, she will publicly thank a specific person who offered a critical opinion, or asked a tough question, or brought up a new idea. She’ll recognize that one person by name, and with genuine sincerity. She’ll thank them for speaking up and being honest… even if she doesn’t necessarily agree with his or her viewpoint.

This CEO immediately noticed the difference her actions made after the first time she did this. At the next all-hands meeting, there were more hands raised, more questions asked, more ideas offered.

Her simple, earnest “thank you” went a long way when it comes to acting on feedback. She didn’t implement the person’s idea. Nor did she even agree sometimes with the person’s perspective. But she did truly listen, and appreciate what the person had to say.

This isn’t to say you should never act on feedback or implement someone’s suggestion. This is just to say that cultivating a more open, honest work environment starts by recognizing the messenger.

Most of the time, when an employee gives feedback, they are merely looking for this recognition: Acknowledgement that they have been heard. Validation that you are listening. Gratitude for weighing in. Sometimes that recognition is all they are looking for.

This CEO’s practice of intentionally recognizing a person publicly for giving honest feedback is powerful also in how she does it. Notice two things:

  1. The recognition is specific. She didn’t say “Big thanks to my leadership team” or “Great job, support team”. It wasn’t vague, it wasn’t generalized. She specifically recognizes the person by name, giving them respect and individualized attention for doing something that she believes is important to the company. Other employees who are watching and observing this won’t easily forget that.
  2. The recognition is heartfelt. She never faked the “thank you.” She never recognized someone just for show. People will see right through you when you’re doing something to just check the box and appear to be “doing all the correct things as a leader.” There are few things are worse as a saying something and not meaning it. Going through the motions of a “thank you” is one of the worst actions of insincerity.

Personally, I’ve taken a page out of this CEO’s book. I try to make my recognition toward my team specific and heartfelt. And, I do this not only in all-company meetings, but in the moment — during a one-on-one conversation, in an email or a group chat.

Give it a shot. Who do you need to thank in your company for telling the truth?

I wrote this piece as the latest chapter in our Knowledge Center. Each week, we release a new chapter on how to create an open, honest company culture. To get each chapter sent straight to your inbox, sign up below…

https://medium.com/media/d44dd2a6a03c83b35a6dd9495abb813b/href

P.S.: Please feel free to share + give this piece ❤️ so others can find it too. Thanks 😊 (And you can always say hi at @cjlew23.)


Recognize the messenger was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Teaching UX Designers to Always Be Learning

This week’s article examines the ways UX designers develop their craft and the importance of self-learning. Here’s an excerpt from the article: Conventional educational programs use a Sage on the Stage approach, where a smart person stands in front of a classroom pouring facts and raw knowledge into students’ brains. Despite considerable evidence that this […]

Cafe Racer

Cafe Racer

Perfect shapes and great use of color.

via Alexey Kuvaldin

Men’s Health - Realty Check

Men’s Health - Realty Check

On point! Part of the head makes me think about Magnum P.I. played by Tom Selleck.

via Marco Goran Romano

o r i g i n s

o r i g i n s

Latest project from Maria Svarbova. Again playing with symmetry and color.

via Maria Svarbova

Heavy Eyes

Heavy Eyes

All those lovely eyes!

via Pavlov Visuals

Inventing the Future of Space

Inventing the Future of Space

Dig the retro-futuristic-exciting style.

via JLéonard Dupond

Comics Have Lost the Plot

Batman LEGO CoverHave a look at this adorable comic book cover featuring the version of The Joker that appeared in this year’s…

Integrating Animation into a Design System

Keeping animation choreography cohesive from the outset of a project can be challenging, especially for small companies. Without a dedicated motion specialist on the team, it can be difficult to prioritize guidelines and patterns early in the design process. What’s more likely to happen is that animations will be added as the product develops.

Unsurprisingly, the ad-hoc approach can lead to inconsistencies, duplications, and rework in the long run. But it also provides space for creative explorations and discoveries of what works and what doesn’t. As useful as it is to be able to establish system foundations early, it is also ok to let the patterns emerge organically as your team experiments and finds their own voice in motion.

Once there are enough animations, you might start thinking about how to ensure some consistency, and how to reuse existing patterns rather than recreate them from scratch every time. How do you transition a few odd animations to a cohesive system? I find it helpful to start by thinking about the purpose of animations and the feel they’re designed to evoke.

Start with purpose and feel

Purpose

Like any other element in a design system, animations must have a purpose. To integrate animation, start by looking through your interface and noting how and why you use animations in your particular product and brand.

For example, at FutureLearn we noticed that we primarily use animation in three ways—to indicate a state change, to add an emphasis, or to reveal extra information:

  • A state change shows that an object has changed state due to user interaction. For example, a state can change on hover or on click. Animation here is used to soften the transition between states.
  • Emphasis animations are used to draw attention to specific information or an action, for example a nudge to encourage users to progress to the next step in the course.
  • Reveal animations are used to hide and reveal extra information, such as a menu being hidden to the side, a drop down, or a popover.

There are no “standard” categories for the purposes of animations. Some products use a lot of standalone animations, such as animated tutorials. Some use screen transitions, others don’t. Some make personality and brand part of every animation, others group them into their own category, like in the Salesforce Lightning Design System.

Animation types in Salesforce Lightning Design System are categorized in a different way to FutureLearn
Animation types in Salesforce Lightning Design System are categorized in a different way to FutureLearn.

The categories are specific to your interface and brand, and to how you use animation. They shouldn’t be prescriptive. Their main value is to articulate why your team should use animation, in your specific project.

Feel

As well as having a purpose in helping the user understand how the product works, animation also helps to express brand personality. So another aspect to consider is how animation should feel. In “Designing Interface Animation,” Val Head explains how adjectives describing brand qualities can be used for defining motion. For example, a quick soft bouncy motion can be perceived as lively and energetic, whereas steady ease-in-outs feel certain and decisive.

Brand qualities translated to motion
Brand feel Animation feel Effect examples
Lively and energetic Quick and soft Soft bounce
Anticipation
Soft overshoot
Playful and friendly Elastic or springy Squash and stretch
Bouncy easing
Wiggle
Decisive and certain Balanced and stable Ease-in, Ease-out Ease-in-out
Calm and soft Small soft movements or no movement at all Opacity, color or blur changes, scale changes

As you look through the animation examples in your interface, list how the animation should feel, and note particularly effective examples. For example, take a look at the two animations below. While they’re both animating the entrance and exit of a popover, the animations feel different. The Marvel example on the left feels brisk through the use of bouncy easing, whereas the small movement combined with opacity and blur changes in the FutureLearn example on the right make it feel calm and subtle.

Popover animation comparison
Popover animation on Marvel (left) and FutureLearn (right).

There’s probably no right and wrong way to animate a popover. As far as I know it all depends on your brand and how you choose to communicate through motion. In your interface you might begin to notice animations that have the same purpose but have entirely different feels. Take note of the ones that feel right for your brand, so that you can align the other animations to them later on.

Audit existing animations

Once you have a rough idea of the role animation plays in your interface and how it should feel, the next step is to standardize existing animations. Like an interface inventory, you can conduct an inventory focused specifically on animations. Start by collecting all the existing animations. They can be captured with QuickTime or another screen recording application. At the same time, keep a record of them in a Google Doc, Keynote, or an Excel file—whatever suits you.

Based on the purpose you defined earlier, enter categories, and then add the animations to the categories as you go. As you go through the audit, you might adjust those categories or add new ones, but it can be helpful not having to start with a blank page.

Example of initial categories for collecting animations in Google Doc
Example of initial categories for collecting animations in Google Doc.

For each animation add:

  • Effect: The effect might be difficult to describe at first (Should it be “grow” or “scale,” “wiggle” or “jiggle”?). Don’t worry about the right words yet, just describe what you see–you can refine that later.
  • Example: This could be a screenshot of the animated element with a link to a video clip, or an embedded gif.
  • Timing and easing: Write down the values for each example, such as 2 seconds ease.
  • Properties: Write down the exact values that change, such as color or size.
  • Feel: Finally, add the feel of the animation—is it calm or energetic, sophisticated and balanced, or surprising and playful?

After the inventory of animations at FutureLearn, we ended up with a document with about 22 animations, grouped into four categories. Here’s the state change category.

The 'State Change' page from FutureLearn’s animation audit, conducted in a Google Doc
The “State Change” page from FutureLearn’s animation audit, conducted in a Google Doc.

Define patterns of usage

Once you’ve collected all the animations, you can define patterns of usage, based on the purpose and feel. For example, you might notice that your emphasis animations typically feel energetic and playful, and that your state change transitions are more subtle and calm.

If these are the tones you want to strike throughout the system, try aligning all the animations to them. To do that, take the examples that work well (i.e. achieve the purpose effectively and have the right feel) and try out their properties with other animations from the same category. You’ll end with a handful of patterns.

Animation patterns on FutureLearn, grouped by purpose and feel
Purpose Animation effects Feel
Interactive state change Color, 2s ease
Opacity, in – 0.3s, out – 1.1s ease
Scale, 0.4 ease
Calm, soft
Emphasis Energetic pulse, 0.3s ease-in
Subtle pulse
Wiggle, 0.5s ease-in-out
Energetic, playful
Info reveal Slide down, 0.4 swing
Slide up, 0.7s ease
FadeInUp, 0.3 ease
Rotate, 0.3 ease
Certain, decisive, balanced

Develop vocabulary to describe effects

Animation effects can be hard to capture in words. As Rachel Nabors noted in “Communicating Animations,” sometimes people would start with “friendly onomatopoeias: swoosh, zoom, plonk, boom,” which can be used as a starting point to construct shared animation vocabularies.

Some effects are common and can be named after the classic animation principles (squash and stretch, anticipation, follow through, slow in and out1) or can even be borrowed from Keynote (fade in, flip, slide down, etc.), others will be specific to your product.

Vocabulary of animations in Salesforce Lightning Design System.
Movement types in IBM Design Language.
Movement types in IBM Design Language.

There might also be animation effects unique to your brand that would require a distinctive name. For example, TED’s “ripple” animation in the play button is named after the ripple effect of their intro videos.

The ripple effect in the intro video on TED (left) mirrored in the play button interaction (right).
The ripple effect in the intro video on TED (left) mirrored in the play button interaction (right).

Specify building blocks

For designers and developers, it is useful to specify the precise building blocks that they can mix and match to create the new animations. Once you have the patterns and effects, you can extract precise values—timing, easing, and properties—and turn them into palettes. The animation palettes are similar to color swatches or a typographic scale.

Timing

Timing is crucial in animation. Getting the timing right is not so much about perfect technical consistency as making sure that the timing feels consistent. Two elements animated with the same speed can feel completely different if they are different sizes or travel different distances.

The idea of “dynamic duration” in Material Design focuses on how fast something needs to move versus how long it should take to get there:

Rather than using a single duration for all animations, adjust each duration to accommodate the distance travelled, an element’s velocity, and surface changes.

Sarah Drasner, the author of SVG Animations, suggested that we should deal with timing in animation like we deal with headings in typography. Instead of having a single value, you’d start with a “base” and provide several incremental steps. So instead of h1, h2 and h3, you’d have t1, t2, t3.

Depending on the scale of the project, the timing palette might be simple, or it might be more elaborate. Most of the animations on FutureLearn use a base timing of 0.4. If this timing doesn’t feel right, most likely your object is traveling a shorter distance (in which case use “Shorter time”) or a longer distance (in which case use “Longer time”).

  • Shorter time: 0.3s: Shorter travel distance
  • Base: 0.4s: Base timing
  • Longer time: 0.6s: Longer distance traveled

Similar ideas used in the duration guidelines for the Carbon Design System are related to the “magnitude of change”:

Duration guidelines in Carbon Design System
Duration guidelines in Carbon Design System.

Easing

Different easing values can give an animation a distinctive feel. It’s important to specify when to use each value. The easing palettes in the Marvel Styleguide provide a handy guide for when to use each value, e.g. “Springy feel. Good for drawing focus.”

Easing palette in the Marvel Styleguide
Easing palette in the Marvel Styleguide.

An easing palette can also be more generic and be written as a set of guidelines, as done in the Salesforce Lightning Design System, for example:

For FutureLearn, we kept it even more simple and just limited it to two types of easing: Ease out “for things that move” (such as scale changes and slide up/down) and Linear “for things that don’t move” (such as color or opacity change).

Properties

In addition to timing and easing values, it is useful to specify the properties that typically change in your animations, such as:

  • Opacity
  • Color
  • Scale
  • Distance
  • Rotation
  • Blur
  • Elevation

Again, you can specify those properties as palettes with a base number, and the incremental steps to support various use cases. For example, when specifying scaling animations at FutureLearn, we noticed that the smaller an object is, the more it needs to scale in proportion to its size, for the change to be visible. A palette for scaling objects reflects that:

Small: ×0.025
Large objects
e.g. an image thumbnail

Base: ×0.1
Medium objects
e.g. button

Large: ×0.25
Small objects
e.g. icon

Although there’s no perfect precision to how these properties are set up, they provide a starting point for the team and help us reduce inconsistencies in our motion language.

Agree on the guiding principles

If you have guiding principles, it’s easier to point to them when something doesn’t fit. Some of the principles may be specific to how your team approaches animation. For example,

Guiding principles for motion in Salesforce Lightning Design System are kept short and simple
Guiding principles for motion in Salesforce Lightning Design System are kept short and simple.

If your team is not yet confident with animation, it may be worth including some of the more general principles, such as “reserve it for the most important moments of the interaction” and “don’t let it get in the way of completing a task.”

The guiding principles section can also include rationale for using animation in your product, and the general feel of your animation and how it connects with your brand. For example, IBM Design Language uses the physical movement of machines to extract the qualities they want to convey through animations, such as precision and accuracy.

From the powerful strike of a printing arm to the smooth slide of a typewriter carriage, each machine movement serves a purpose and every function responded to a need.
IBM Design Language
IBM Design Language

In IBM’s Design Language, the rhythmic oscillation of tape reels in motion is used in a metaphorical way to support user’s waiting experience.

Guiding principles can also include spatial metaphors, which can provide a helpful mental model to people trying to create animations. Google’s Material Design is a great example of how thinking of interface as physical “materials” can provide a common reference for designers and developers when thinking about motion in their applications.

In Material Design, 'Material can push other material out of the way.'
In Material Design, “Material can push other material out of the way.”

To sum up

When integrating animation in design systems, try viewing it in relation to three things: guiding principles, patterns of usage, and building blocks. Guiding principles provide general direction, patterns of usage specify when and how to apply the effects, and building blocks aid the creation of new animations. Even if your animations were initially created without a plan, bringing them together in a cohesive, documented system can help you update and build on what you have in an intentional and brand-supporting way.

Further reading:
Creating Usability with Motion: The UX in Motion Manifesto
Web Animation Past, Present, and Future
Designing Interface Animation
Animation in Responsive Design

Footnotes

Upgrading to an Older MacBook Pro

2015 MacBook ProIn spite of the fact that I’ve publicly doubted whether I’ll personally buy another laptop again, my employer does mandate…