CareerFoundry UI Design Short Course - Day 05

UI Design Short Course Header

Welcome to day 5 of your UI Design Short Course. Today we're going to look at a field which is very closely related to UI: UX design.

What is User Experience (UX) Design?

The line between UI and UX is rather blurred, and for anyone unfamiliar with the disciplines, understanding the differences can be a bit of a headache. At a very high level, many have summed up the difference between UI and UX in one sentence: UI is what you use to interact with a product and UX is how you feel when you use the product.

UX design is all about understanding the psychological patterns which cause a user to behave in a certain way. Are they more likely to click a red “buy” button or a blue “buy” button? How does the number of choices in an interface affect a user’s decisions? How are users rewarded for their actions?

These are the questions that UX designers must answer. Today we’re going to dig a bit deeper into understanding this user psychology.

User Psychology

Psychology is the study of our minds. It seeks to understand and explain human thought, emotion, and behavior. Through research, psychologists have established general principles that detail how individuals behave and how to predict behavior. They are not absolute, but are solid enough to serve as guides.

As a designer, you’ll be aiming to produce work that causes the majority of users to respond in very similar ways. In a sense, you will standardize how users feel, think, and act in response to your work—and you’ll do so using psychology and design.

Hick's Law

In today’s world of options, it’s easy to think that more is always better. Cheaper by the dozen, 2 for 1, and buy one get one free are all marketing and sales techniques that seem to reinforce this notion. But more isn’t always better, especially when it comes to making a choice.

Numerous options tend to confuse us

Hick’s Law states it takes us longer to make a choice when we have numerous options. It describes the feeling you get when you are trying to pick a new pair of Converse sneakers and have millions of colors to choose from, all right before your eyes. It’s not that you can’t choose, you just feel compelled to explore all the choices and end up feeling overwhelmed.

In the image below, is it easy to pick out your favorite purple hue?

Email5-Img1.png

Generally speaking, on the web and in apps, users will feel confused and disoriented when they have too many options to choose from. Large drop down menus, endless streams of navigation links, and a giant rainbow to choose background colors from, will all increase the time it takes for users to make a choice. The truth is, too many different pathways will end up overwhelming the user and leaving them unsure which way to turn. It may give the illusion of freedom, but will ultimately end up getting in the way as users try to accomplish their goals or complete certain tasks.

Always provide users with a reasonable number of options. What ‘reasonable’ is will vary from problem to problem and will depend on what you are designing. Evaluate the problem and determine what is a good number of options. You might want to give users 10 background colors to choose from, but not 10 payment options when they’re buying your product.

Designing With Psychology

Ultimately, you want to motivate people to do X or Y as they interact with your design, guiding them to accomplish their goals. Below, you’ll learn about a few basic techniques and principles rooted in psychology which can be applied when designing user interfaces.

Reward And Punishment

You’ve experienced reward and punishment all your life. Remember being a little kid and being offered sweets if you stopped yelling on the airplane or a time-out if you didn’t? This is reward and punishment. A reward makes users feel good, while punishment makes them feel bad.

Rewarding a desired behavior is more effective than punishing an undesirable one. If you choose to use punishment, users will associate negative feelings with your product. Today, with so many options on the market, they won’t change their behavior; they’ll simply find an alternative product or service that makes them feel good.

Conditioning And Addiction

Conditioning is the process of modifying behavior to bring it into the desired state. There are 2 types of conditioning: classical and operant.

In classical conditioning, a neutral signal precedes an involuntary behavior and becomes associated with it. By doing so, you’ll connect a signal to a behavior. Think of Pavlov’s salivating dog. Pavlov wanted to condition his dog to salivate not only when he saw his food but as he rang a bell. To accomplish this, he would ring the bell right before he fed him. After a while, the sound of the bell alone was enough to cause the dog to salivate. Note that the signal or stimulus precedes the desired behavior.

Email5-Img2.gif

Operant conditioning uses reward or punishment to strengthen or weaken voluntary behaviors. In the case of the sweets and behavior, a child receives sweets when they behave, strengthening good behavior. If a child misbehaves, they receive a time-out, weakening the bad behavior. Note that the reward comes after the desired behavior.

We’ve been talking about using either reward or punishment. But what happens when you combine them? When you reward an individual for an action and punish them for not doing that action, you create addiction. Games, like Candy Crush or Flappy Bird, are a great example. The reward is given to the user in the form of positive feelings they get when they play the game. You complete another level, you beat your friend, you topped your highest score. You feel accomplished. The punishment? Failing to accomplish your goal. In this example, humankind’s desire to compete is also a powerful driver.

Feedback Loops

Feedback loops have 3 stages: motivation, action, and feedback. Users must first be motivated to do something, then they must do it, and finally, receive feedback on how they did. Instagram is a great example of how feedback loops can be applied in design to engage users and shape behaviors.

Think about any regular Instagram user. Something outside Instagram, like a scrumptious donut, motivates the user to take a picture and share it on Instagram. The user then receives feedback in the form of likes, comments, reposts or new followers. Feedback, in this case, also acts as a reward that strengthens the desired behavior: sharing photos via Instagram. In this example, the feedback loop is very straightforward and easy to understand. Users know, and expect, to receive Y if they perform X.

Email5-Img3.gif

Judging A Book By Its Cover

It is human nature to judge books by their cover. We are naturally inclined to trust things we find beautiful. And it only takes a few seconds for individuals to decide whether something is to their liking or not.

Ugly ducklings in design pay a high price. Users will leave the second they decide they don’t dig a product's looks. It might seem tough to design a screen everyone deems beautiful. But, generally speaking, beautiful websites and apps are characterized by 2 factors:

Prototypical

In 2012, Google found that users are more inclined to find websites beautiful if they are prototypical. In other words, if they look the way they think they should, they’ll agree with it visually.

KISS

In the same study, Google also found that users favor simple websites. This does not necessarily mean that complexity is ugly. Anyone who finds the Sistine Chapel an eye-sore is probably out of their mind. This has to do with our innate desire to do less work: less clicking, less searching, less learning.

You made it to the end of the lesson – give yourself a pat on the back! Hopefully you now feel a little more confident about the role of UX design and how it differs from UI design. In fact, it’s a science all of its own!

Further Reading

If you're keen to learn more about user experience (UX) design and how it relates to UI design, check out the following articles:

What Is User Experience Design? A Comprehensive Guide

What Does A UX Designer Actually Do?

The Difference Between Interaction Design And UX Design, And Which One To Learn


This page was last updated: 11-6-2019