The Perception of Control

Every day, at the street by my house, I press the “walk” button, and I wait. Each time, as soon as the traffic cycle is complete, I get the walk signal. On a whim, one day I didn’t press the button… but at the end of the traffic cycle, I got the walk signal. The button I press every day has absolutely no impact on when the light will change. Is it still worth having the button?

Buttons that do nothing are known as placebo buttons, and they exist everywhere: at crosswalks, in subway stations, and on thermostats. They serve no function, other than to provide the user with the perception that he or she has some control over an automated system.

It sounds crazy: why would it ever be better to pretend a user can impact something he or she actually can’t? Why lie to the user in these situations? Interestingly enough, it turns out users want to feel in control. Consider the following three scenarios, all three involving an online application form to perform in a local talent show.

In Scenario A, the user opens the form, and the cursor automatically moves to the first field: Name. When he has finished typing his name, the cursor moves on to Date of Birth, and then Address. Farther down the form, the questions get more difficult, asking for long-form explanations. The user isn’t sure how he wants to phrase his response to “Reason for Applying,” so he tries to skip down to the next field. Unfortunately, the form has been hard-coded to prevent him from skipping fields, and he is unable to leave “Reason for Applying” until he has typed something into the field.

In Scenario B, the user opens the form, and the cursor again begins at the first field: Name. However, in this situation the user has full control, can fill out as many forms as he wants, and can submit the form at any time – with or without completing the fields. Incomplete fields will make the user less likely to be selected for the talent show, but it’s entirely up to him whether or not to complete the fields.

In Scenario C, the user opens the form, and is greeted by the perception of complete control: he can skip between fields at will. However, when he clicks “submit,” he will be greeted with an error message, reminding him that all fields must be filled in, in order to complete his application.

Most of us prefer Scenario C, which provides us the flexibility to move at our own pace and in the order we choose, while also ensuring we fill out all the fields that will impact our acceptance into the proverbial talent show. In other words, we want both the safety of automation and the sense of control. In this article, we’ll discuss why we feel the need for control, how to create that feeling, and whether the creation of placebo buttons is an ethical UX choice.

The need for control

The human need for control can be traced back to our earliest roots. In psychologist Abraham Maslow’s well known hierarchy of needs, he identifies our most basic needs as the physiological ones: health, food, and sleep. All of these require a significant amount of control—control over our environment in order to gather food, and control over our own choices to avoid disease.

It’s therefore unsurprising that we seek out control in everything from our relationships—everyone has “put their foot down” at some point or another—to the color of our living room walls—even though the old color was fine, it wasn’t perfect. It’s ingrained in us, and it gives us a sense of comfort and well being.

This sense of control is very closely linked to what psychologists call an “internal locus of control,” or the belief that our actions have the power to impact and change a given situation. (Conversely, an “external locus of control” is the belief that we are at the mercy of external sources.) People with an internal locus of control are more likely to be confident, take better care of themselves, and have lower levels of stress.

As UX designers, we try to ensure users will have positive experiences when using our products or accessing our services. This often translates into empowering users, thus giving them the tools to find their internal locus of control. In other words, we manipulate them into thinking they have been empowered. Consider this example from Nadine Kintscher, a UX consultant at Sitback Solutions:

"Today, you can adjust your screens brightness, disable notifications (without having to turn the phone on silent), and decide whether your phone should connect to both the data and phone network or not… Even if all these adjustments may only extend your phone’s battery by a few minutes, it gives you that satisfying warm and fuzzy feeling of accomplishment. YOU are in charge and can change these settings."

-Nadine Kintscher, User control and cognitive overload, how UX methods can help

From Kintscher’s perspective, the perception of control is more important than the user’s actual ability to control the phone’s battery life.

Perception and Deception

UX designers have long made the case for deceiving the user. Everyone from Instagram to Microsoft has used deception as a tool in improving the user experience. Don’t believe me? See if either of these examples feel familiar.

Instagram “always pretends to work”

When Instagram is deprived of a data or wifi connection, of course it can’t connect and pull down fresh images or transmit up the latest “like.” That doesn’t stop the program from appearing to be fully connected. The Instagram app is designed to function even without a connection, storing every action locally until the data or wifi connection is reestablished.

For the user, this is technically a lie—no, when she pressed “like,” the system did not upload it and her friend did not get to see it. But it’s only a little white lie; as soon as the app is back online it will dutifully pass along the “like.”

Progress bars mean nothing

Whether downloading content on a Mac or a PC, we’ve all experienced a progress bar at some point. This handy little liar keeps us informed with a “one minute left” notification that lasts a solid three minutes. Obviously, anyone who stops to think about it can recognize the discrepancy between the amount of time stated and the amount of time we wait, but the lying progress bar continues unabated.

A few years ago, Popular Mechanics wrote an article explaining why it is that the progress bar lies. Essentially, author John Herrman said, download speeds are inconsistent, and as a result there is no way to know how long a download might take. Thus, the purpose of the progress bar is merely to make the time feel shorter.

"Using principles from the nascent field of psychology called time design, [Chris Harrison, a Ph.D. candidate at Carnegie Mellon] has figured out a way to make a progress bar feel like it’s moving faster than it actually is. After testing different movement patterns… Harrison arrived at the fastest-feeling, albeit fundamentally dishonest, progress bar: one that speeds up as it progresses, and contains a backward-moving ripple animation."

-John Herrman, Popular Mechanics

Levels and methods of deception

Obviously “but everyone does it” is not an effective rationale for lying, deceiving, or manipulating users. We live in the Information Age, and knowledge is power. Anyone seeking proof of our collective desire for knowledge need look no further than the daily articles that lambast Facebook, Google, Android, and Amazon for hiding (or not actively sharing) information we feel that the public deserves to know. The information they “hide” ranges from obscure details about our privacy settings, to potentially critical explanations of who owns our data and who might be able to track our locations. We want to know the truth, so that we can make our own decisions.

Yet, to paraphrase “A Few Good Men,” can we handle the truth? When users are faced with all possible information and infinite options, decision paralysis sets in, and they find themselves unable to make a decision or focus on the task at hand. Information without context is therefore not particularly valuable, and returning to our more mild initial example, waiting for the light to turn with no control over the situation can cause frustration and a poor experience. Imagine if the people working in the office with a “placebo” thermostat one day found out they had been lied to. It would certainly upset their locus of control, and significantly increase stress!

It’s a very difficult balance. Still, without outright lying to users, we may choose to control their experience in a variety of ways. Whether or not this deception is ethically proper is for each individual designer to consider, for each individual scenario. Let’s review a few ways we might control experiences without blatantly misconstruing facts.

Encouraging flexibility

In our first example, we looked at three variations of a form. In the third variation, users enjoyed the flexibility and control of filling out the form fields at will. The functionality never forced the user to be aware that all fields were required, and yet users were also never lied to. This flexibility can exist in other situations as well. Allowing online learners to choose their own path to course completion, for example, or providing more than one way to accomplish a goal (such as incorporating a call-to-action button as well as a link elsewhere on the page) adds flexibility while maintaining control.

Control over the inconsequential

Any older sibling will well remember these words: “just let your little sister/brother make a decision you don’t care about!” The same holds true for users. It’s the reason banks allow us to choose profile pictures, and credit cards ask us to customize our card photos (for free!). Far from feeling trivial, these small decisions give us ownership and control over things which ultimately distract us from the fact that we have no say in the decisions that matter.

Skeuomorphism

This may seem an odd inclusion, but skeuomorphism, or the use of “real world” images to represent things in the digital world, is another way of impacting user perception. Skype, for example, uses a fake “static” noise at times, because users associate silence with a call being dropped. Ultimately, it might be useful for people to learn that digital phone calls do have silence between sentences, a thing that analog phones never did because the technology was not sufficient to avoid the static. But the unnecessary “static”—a mild deception—makes the users happy, and stops them from worrying that their call was lost.

Ethics in UX

The ethics around placebo UX are complex. Placebos are hotly contested in the medical realm; New York Times opinionator Olivia Judson once pointed out that “since deception of patients is unethical, some argue that the placebo has no place in the actual practice of medicine.” In the UX realm, they have nearly no chance of doing actual physical harm, and at times they are barely even a deception. The “refresh” button on many sites does nothing, as the site is automatically-updating anyhow, but it does (technically) also provide a refreshed view of the site. Uber, a taxi-alternative institution is based on the premise that users would prefer to track (and thus feel some measure of control over) where their ride is coming from, though the phone app does nothing to actually reduce wait times.

All we can do is continue to ask questions. For every potentially deceptive interaction, test with real users to see how they react. Ask the actual users how they feel about having, or not having, the information at hand. In addition, consider three basic questions:

• How does this information help the user?

• How does this “deception” help the user?

• How would the user feel if he/she knew all of the information I have?

As designers we have taken on the responsibility of determining when users need control, when they need safety, and when they need the illusion of control. So long as we keep the goal of helping users at the heart of every decision, we are likely to maintain our ethics and make decisions with confidence.

Photo by Dina Lydia on Unsplash

Animation Principles for UX Designers

Animation is a powerful tool in a designer’s toolkit. Animated effects can help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce the hierarchy of UI elements. Consequently, they are an essential element of interaction design.

When it comes to digital product design, animation is often an afterthought for many product teams. Teams often introduce motion language when the work is almost over. What makes things worse is that many designers have no UX animation experience, and they animate based on their gut feeling, which can lead to bad user experience.

In this article, I want to describe the concept of motion design and share a few fundamental animation principles that are worth keeping in mind when working on animation.

What is motion design?

Motion design is a discipline that applies graphic design principles to digital products through the use of animation and visual effects. Motion designers are responsible for creating animated effects. To create decent animated effects, motion designers should have skills in graphic design, digital choreography, and storytelling. They should be able to use tools like Adobe After Effects.

Principles of UX animation

Motion design UX drives the entire user interface. It creates a more natural experience by adding a new level of depth to the interaction design. All this happens when you implement the motion language properly.

Make animation meaningful

Adding animation to digital products without much thought is one of the common mistakes among product teams. What looks nice doesn’t necessarily add value to user interactions.

Don’t animate just for the sake of animation. Both functional and delightful animations should be meaningful for users. Animations should always serve a purpose. When an animation doesn’t fit a purpose, it can feel awkward or annoying, especially when it is slowing down a process that could be faster without any animation. Good animation aligns with users’ goals; it allows users to understand what to expect from the interface.

Here are a few common cases when the animation is especially helpful.

State transitions (animation can prevent change blindness)

State changes in UI often involve hard cuts (the change from one screen to another without any transition effects in between) by default, which can make them difficult to follow. In the real world, most things don’t just appear or disappear immediately. When you drive a car and want to stop at a red light, you go slower and slower, and only after that, you stop. The same rules apply to digital products. When something has two or more states, the changes between states will be much easier for users to understand and follow if the transitions are animated instead of being instantaneous.

Good motion design UX gives the viewer a clue as to what’s about to happen. Let’s look at the example below where the user taps on the small card, and the item is zoom-in into its detailed view. Animation makes it’s crystal clear to users how they got the new state.

UX Animation can fill the gap between states by creating an in-between state that gradually turns the initial state into the final state. Image by Dribbble.

Visual cues (animation helps us understand how to deal with UI)

When the user starts using a product, it might be unclear to them where to look and what to do (especially if your product has a lot of different features). The role of animation is to create the visual cues necessary for letting the user know where they are and what they’re doing. A well-designed, animated transition guides your user’s attention—it helps direct user’s focus to the right spot at the right time. It emphasizes the right elements depending on what the objective is. That’s why animation is especially good at onboarding new users.

UX animation drives the user’s attention and hints at what will happen if a user makes this gesture. Image by Material Design.

Visual feedback (action and reaction)

The interaction between humans and computers is an essential part of human-computer interaction. Graphical user interfaces are reactive by nature. When users interact with digital products, something constantly changes on their screen. As one of Jakob Nielsen’s 10 original heuristics for usability, visibility of system status remains among the most important principles in user-interface design. Users want to know their current context in a system at any given time, and products shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback.

Animation is an excellent tool for providing visual feedback for user actions. Visual feedback makes you feel like you’re interacting with real elements on the screen and demonstrates the result of this interaction (whether it was successful or not). Almost any user interaction can benefit from using animation. For instance, when you press a button, you expect a reaction, and animation can make this reaction more memorable.

Visual feedback on like reaction. Image by Li Junfei.

Visual feedback is also helpful when you need to inform users about the results of an operation. Cases in which operations aren’t done successfully, animation can provide information about the problem in a fast and easy way

Users see this animation and immediately understand the problem. Image by thekineticui.

Animate as minimum objects as possible at one time

Less is more concerning animation and transitions in particular. Every motion on the screen attracts attention, so too much animation at the same time creates chaos. It becomes hard for the user to track the movement if they see more than one moving object. Therefore, if you have several elements that you want to animate, you need to clearly define the sequence of their motion and animate as few objects as possible at one time.

Select an optimal duration and speed for the animation

Timing is arguably one of the most important considerations when designing transitions. It plays a huge role in creating realistic animations. When it comes to selecting the duration of the functional animation, you need to have a balance. Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that they keep the user waiting. The animation should be slow enough to give users the option to notice the change but quick enough not to cause waiting.

The animation should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. The animation on the top example makes the user wait for the content is this causes bad UX. Image by Material Design.

Researchers have discovered that optimal speed for interface animation is between 200 and 500 ms. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. On the other hand, an animation longer than 1 second would convey a sense of delay and thus will make the user wait.

At the same time, don’t rely on those rules when you are working on a decorative animation. For decorative animation, you can select the time based on your needs.

Make sure the easing of your UX animation is right

All live objects that we have in the physical world move with some acceleration or deceleration. When it comes to animating UI objects, you should follow the same rules. Avoid using linear movement (when objects move with a constant speed); otherwise, the movement will look mechanical. Linear animation is only applicable for decorative animated effects when the object doesn’t change position.

Ensure the motion language fits the nature of your product

The motion language that you choose to use should resemble the nature of your product. Imagine you design a banking app and want to introduce a bouncing animation on the money transfer confirmation screen. By its nature, bouncing animation creates a sense of something not serious, so it’s probably not a good choice for business products.

For financial operations it’s better to use subtle animated effects such as sliding. Image by Olga Tsebro.

Keep longevity in mind

Even good animation can be annoying when it’s overused. When designing an animation, ask yourself a question: “Will the animation get annoying on the 100th use, or is it universally clear and unobtrusive?”

Delight your users with animation

Focusing on user emotions plays a huge role in UI interactions. As Aarron Walter said in his book Designing for Emotion: “Personality is the mysterious force that attracts us to certain people and repels us from others.” It’s possible to reward the user with an animation when they accomplish personal goals. For example, when a user reaches inbox zero in the email app or completes certain tasks in the task management tool, it’s possible to create deeper engagement with a product using animation.

Asana shows an animated unicorn when the user completes certain tasks.

Design accessible UI

Animated interactions will need some additional consideration to make them accessible. The Web Content Accessibility Guidelines provide a number of recommendations for animated content and interactions. These include guidelines for on when to provide pause and play controls, limits for blinking or flashing the screen, and advice on when to provide reduced motion options for users with motion sensitivities.

Both the web and native platforms also provide a way for users to indicate they require reduced motion effects (the prefers-reduction-motion query on the web), and it’s a good practice to provide a reduced version of highly animated content when that preference is present.

Prototype and test your UX animation

Prototyping is the absolute best way to convey how you intend to use animation in your design. If you use interactive prototypes, you will get a clear picture as to what works and where the flaws in your app are hiding. Very often, this leads to a complete rework because the look of your animation differs from how it feels. Thus, don’t think that you will create a perfect animation effect right from the first attempt. Instead, iterate often and iterate fast! Iterating numerous times on even the tiniest detail will make your animation great.

Conclusion

UX animation is an essential ingredient of modern digital products because it brings the user interface to life. It not only makes products more usable but also makes them more visually appealing for end-users. However, it happens only when designers use proper motion language.

Good animation is invisible. Users shouldn’t notice that they are looking at animation. But they should notice the great user experience that you provide.

Photo by Fakurian Design on Unsplash

Behavior Science Has a Place in UX

On any successful product or design team, it’s likely that its members come from a variety of professional backgrounds. “User experience” has proven to be a large umbrella that encircles researchers, visual and interaction designers, developers, and product professionals. Now another group is carving out a home in the UX world: Applied behavior scientists.

There have been some behavior science-centric research and design organizations for the past decade or so, although not all of them would consider themselves part of the UX world. For example, ideas42 was founded in 2008 and applies behavior science to “complex social problems” in ways that overlap with UX skillsets. Similarly, the Behavioral Insights Team (BIT) was founded in the UK in 2010; its projects using nudges and other psychology-based techniques often lead to the redesign of service processes or artifacts such as bills and alerts. Mad*Pow founded a behavior change design team in 2009 in order to bring an evidence-based lens to projects where the goals include changing complex user behaviors in health and finance. Despite these and other early entrants, behavior science has remained a bonus, not a core skill, that UXers are expected to bring to their work.

Until now.

Behavior science as a UX discipline had been gaining momentum for a while, but COVID-19 and the shift to remote collaboration has accelerated that. In the next five or so years, we will see more organizations carving out a specific role for people with behavior science training. At the same time, more UX professionals will add behavior science tools to their repertoires. Between the top-down and bottom-up dynamics, we will see the growth of the applied behavior scientist as a UX discipline. These changes are happening for a few reasons:

Applied behavior science training is easier to access

Prior to the COVID-19 pandemic, whether a UX professional was exposed to applied behavior science was often a function of circumstance. People who lived in cities with more behavioral UXers might encounter them and their work at local events. Targeted behavior science training for UX professionals was available but often required travel to attend. Now that remote events are the norm, the only geographical limitation people face in accessing cool behavior science UX content is time zone-related. In the past year, I’ve attended meetups in Vienna, Dublin, and Sydney, to name just a few. It’s much easier now to connect with relevant applied behavior science content and forge a network of like-minded professionals.

Formal education for applied behavior scientists now exists

In the past, there were two main ways applied behavior scientists were made. One was getting a degree in a social science like psychology and then working in an applied setting to gain industry experience. The other was to get trained as a designer or researcher and to acquire behavior science training on the job through reading, events, bootcamps, or mentorship. In the last few years, more schools have begun to offer blended training that prepares people specifically to do applied behavior science. University of Pennsylvania’s Master of Behavioral and Decision Sciences and the University of Michigan’s Design Science MS are two examples.

The first generation of applied behavior scientists is coming of age

In 2015, Vox declared the rise of the Chief Behavioral Officer. Despite similar headlines every year or so, there are still very few companies that have actually installed a CBO. We may finally be at a turning point, especially in healthcare and finance, as more companies realize that a tightly interwoven behavior science perspective can make them more effective at winning customers and market share. Critically, this is happening just as the people who began working in applied behavior science in its earlier forms are reaching the point in their careers where they want leadership roles. When people who believe in the value of applied behavior science sit at the top of organizations that do UX work, they will hire more applied behavior scientists in UX roles.

The availability of more behaviorally trained UXers can’t come soon enough, as many of the key challenges on the horizon are tailor-made for people who understand how to design for human behavior. Some of the specific problems that the UX applied behavior scientist will tackle are:

Behavior change for COVID-19 and its aftermath

It has become clear that vaccination is not a panacea. The COVID-19 vaccination rollout is fraught with difficulties and will take months to complete. And even then, there will remain a need to design for vigilance in case of an outbreak and the ability to quickly respond and contain it. From creating compelling communications that address vaccine hesitancy to nurturing the conditions that prompt successful completion of a two-shot vaccination sequence, to refining the service delivery of vaccinations, to coaching other behaviors that mitigate contagion before population-wide inoculation is achieved, there will continue to be a need for individual- and small-group level interventions to achieve public health goals. Many of these interventions need the one-two punch of brilliant UX and solid behavior science to succeed.

Virtual experiences require an understanding of context

As long as the world is still dealing with COVID, virtual technology will influence how people work, interact with services (including health care), and socialize. Chances are, virtual will also play a larger role in the post-COVID world than it did before, as people realize that it can be more convenient and lowers barriers to participation. An interesting complexity to designing and delivering virtual experiences is that people interact with them in their own environment. It’s impossible to orchestrate the details of an experience remotely the same way as in-person. This opens a world of opportunity to rethink basic concepts like waiting rooms, work meetings, and creative collaboration, but also requires people who deeply understand how context influences behavior. Guess whom that is? Applied behavior scientists.

Algorithms and machine learning are based in behavior science

Scroll through Twitter or your favorite news site, and you’ll almost certainly see a mention of algorithms, machine learning, or artificial intelligence within a few minutes. These tools enable companies to deliver content and experiences in a more targeted way and are scalable, so there’s great potential value. But it’s easy to find horror stories about algorithms gone wild. To really harness the potential of algorithm-driven design, UX teams need to include applied behavior scientists. Many of them have specialized training to evaluate the quality and meaning of data that are used to determine how people experience a product or service. An applied behavior scientist can detect confounds or biases in historical data that should guide whether and how it’s used in design (which is the source of many of the missteps that make the news). Behavior scientists also understand motivation and cognition, which helps them to determine how an experience should be delivered by an algorithm to produce the best results. Algorithms and machine learning aren’t just math; they’re design tools that are shaped by and can in turn shape, human behavior.

Personalization done well is psychology

More companies want to offer personalized experiences to their customers, whether it’s recommendations within an app that drives continued engagement (hello, Netflix and Spotify) or curating the actual product for an individual’s needs (like StitchFix or Kiehl’s Apothecary Preparations). The increase in personalization is, of course, related to the availability of data for algorithms that drive recommendations, but the focus here is on the experience that gets delivered. Again, applied behavior science plays a critical role on the UX team that creates a personalized product. Training in behavioral theories helps designers understand what prompts or tools to offer to get people to answer the call to action. Understanding motivation allows designers to fine-tune the experience to meet what people find easiest, most enjoyable, and most rewarding. The psychology of motivation explains why personalization is such an effective approach when done well, and strategic use of digital elements in a product or experience enables it to happen at scale.

The future is bright

I expect that UX teams five or ten years from now will boast members whose primary label is applied behavior scientist, and many others who have added behavior science skills to their crafts as researchers, visual designers, and so forth. Behavior science itself is a field in motion, so there may be new sub-specialties or approaches that bridge into the UX world. There will be no one model for what an applied behavior scientist looks like.

For UXers who want to be a part of the applied behavior science revolution, this is a great time to be in the field. A growing community stands ready to welcome you.

Photo by Bret Kavanaugh on Unsplash