Author: UXPin

User experience design is a powerful discipline with a fine line between assistance and manipulation. Organizations often use dark patterns to trick users into decisions they otherwise wouldn’t choose. Sometimes these dark patterns don’t have malicious intent, but the result is the same.

Understanding dark patterns and their consequences is crucial for UX design teams. These deceptive design techniques harm users and could have legal consequences resulting in hefty fines from organizations like the FTC (Federal Trade Commission).

Get accurate results during usability testing using fully functional interactive prototypes from UXPin. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What are Dark Patterns?

Dark patterns are design techniques that manipulate and deceive users into taking specific actions–or directing them away from an intended action, like unsubscribing or downgrading. These techniques exploit cognitive biases or misdirect users to benefit the organization at the expense of their customers.

UK-based UX specialist Harry Brignull coined dark patterns when he started darkpatterns.org–an organization founded to educate companies about deceptive design patterns.

Do Dark Patterns Work?

The short answer–Yes! Dark patterns are highly effective. And many organizations, including leading tech businesses and online retailers, use these shady design techniques.

In 2018, the Norwegian tech watchdog Forbrukerrådet published a report showing how tech companies nudge users into sharing personal information. This report leads to changes in legislation, including GDPA and CCPA.

In 2021, the California Consumer Privacy Act made “a range of privacy-related dark patterns illegal – including certain kinds of trick wording, hidden small print, misdirection, and bait and switch.”

Common Types of Dark Patterns

Bait and switch

Bait-and-switch dark patterns lure customers into using a product under attractive terms, then change the conditions once engaged, forcing them to accept the outcome–usually a paid service. Many apps use this bait-and-switch strategy to trick customers.

For example, imagine you download a “free” filter application and spend time adjusting the settings. When you achieve your desired result and go to export the image, the app informs you that you’re using one of the “paid” features and need to pay to save this image or upgrade to a premium plan.

Users will often accept these terms begrudgingly because they’ve already invested the time, and the feature they use is essential for the desired result.

Disguised ads

Disguised ads look like regular content, so users click them. These are common in newsfeeds, where the ads are designed to look like any other article with a headline and image. You’ll also find these in search engines where the top few results are ads, but they look like actual results.

Search engine providers place a small “Ad” tag to differentiate these, but it’s easy for someone not paying full attention to click it thinking it’s a regular search result.

Forced continuity

Forced continuity occurs when someone signs up for a free trial which rolls into a paid subscription. This dark pattern is prevalent in SaaS, and many companies are guilty of deploying this strategy.

The best way to avoid forced continuity is by not taking credit card details for free trials or not automatically continuing the service at the end of the trial without the user explicitly accepting.

Hidden costs

Hidden costs are fees or charges not disclosed until the user is about to confirm payment. Have you ever got to the final step and gone, “Hey! Why is it $28? The price quoted was $19.99.” And then you see a “service fee” or some other ambiguous term. 

Sometimes the hidden costs are more legitimate, like VAT which the company only discloses at checkout. Companies can avoid these hidden costs by notifying customers below pricing–for example, “VAT and taxes calculated at checkout.”

Misdirection

Misdirection uses design patterns commonly used for one action for another that favors the company’s business interests. For example, you’re unsubscribing from a paid service, so you click “Cancel” in your billing account.

The next screen is a confirmation screen, but the company shows the primary CTA as “Keep subscription” and the confirmation to unsubscribe in a smaller text link like this example below.

Companies know that most people function on “autopilot,” thinking that the primary CTA is the requested action, and unconsciously click “Keep subscription.”

Roach motel

Roach motel is another sinister dark pattern designed to keep users from canceling a paid service. Companies intentionally hide the cancel feature using several techniques:

• Placing the cancelation at the bottom of an unsuspecting screen
• Making users contact customer support–and jump through multiple hoops
• Only allowing users to cancel on the desktop app and not mobile

Ironically, these products’ signup and payment features are usually super efficient and helpful, with immediate access to customer support during checkout. The second you’re signed up, the efficiency to leave disappears, and you feel trapped in an irreversible contract.

Confirmshaming

Confirmshaming is another tactic companies commonly use to guilt or shame someone for making a choice contrary to the company’s interest. The most common example is when an eCommerce store offers shoppers a discount for signing up for their newsletter with two options:

1. “Yes, I want to save 20% on my order!”
2. “No, I prefer to pay full price for my items.”

The second option makes people feel foolish, “why would you want to pay more?” Confirmshaming dark patterns are highly manipulative and exploit human emotions, forcing them into actions they otherwise wouldn’t have chosen.

Trick questions

Trick questions use words or phrases that mislead users. Like the misdirection tactic, trick questions prey on people’s unconscious actions to mundane tasks like clicking terms and conditions when signing up.

For example, a user might mistakenly check a box saying, “Would you like to opt out of not receiving exclusive offers and promotions from our partners?”

Read that carefully…

“Would you like to opt out of NOT receiving exclusive offers and promotions from our partners?” Most people will miss the double negative connotation and check the box, thinking they’re opting out when the opposite is true.

These trick questions are especially problematic for users with cognitive disabilities or non-native language speakers who don’t fully understand the sentence.

Privacy Zuckering

Privacy Zuckering is named after Facebook CEO Mark Zuckerberg, infamous for misleading privacy policies and settings. This type of dark pattern is still prevalent across every industry and country because data is so valuable–some call it the new gold.

Companies that make privacy policies difficult to understand with convoluted legal jargon or intentionally hide privacy settings (like turning data sharing on and off) are guilty of Privacy Zuckering.

This dark pattern is so problematic that Apple released a privacy update to iOS 14, allowing users to opt out of tracking and choose which apps they share data with.

Pre-selected options

Pre-selected options used to be more prevalent until the release of GDPR and CCPA, which prohibit this dark pattern–like pre-selecting the checkbox to confirm someone has signed up for a mailing list. New legislation requires users to check these boxes themselves, with instructions to review the terms and conditions. Still, this practice occurs, leading to users signing up for services they don’t want.

UX Designers – The Adults in The Room

UX designers are crucial in advocating for users (their fellow humans) and ensuring user interface design follows the highest ethical standards and intent.

Here are ten ways designers can avoid dark patterns and ensure non-designers understand the ramifications of using them (which may include costly legal issues for an organization):

1. Prioritize user needs: focus on addressing user needs over exploiting them for short-term gains. This focus will build trust and increase the customer life cycle.
2. Clarity and simplicity: make sure content and instructions are easy to understand. Avoid using confusing jargon or hiding important information.
3. Transparency: ensure users fully understand the implications of their choices and the data you collect. Use opt-ins with plain language, so people always know what they’re signing up for.
4. Opt-out by default: never pre-select options, even for mundane tasks and features. Users must always have control over what they want and take explicit action to opt in.
5. Easy opt-outs: conversely, companies must make it easy for users to end paid features or unsubscribe from services. Avoid burying opt-outs or making users jump through hoops to cancel something.
6. Establish ethics: creating internal ethical guidelines signed off by key stakeholders ensures teams follow best practices and avoid dark pattern strategies.
7. Education and awareness: create resources that explain dark patterns and how these negatively impact people.
8. Advocate for users: UX designers must be the voice of users within an organization and call out unethical conduct.
9. Testing and user interviews: design teams must test content and UIs regularly with end-users to determine whether content or features are confusing or misleading.
10. Accessibility and inclusivity: designers must consider the needs of diverse people, including those with disabilities, to ensure everyone understands critical language and features–particularly for decisions with financial and personal data implications.

Prototype and Test With UXPin

Build fully interactive prototypes that accurately replicate the final product experience with UXPin’s code-based design tool. Unlike image-based tools, UXPin allows designers to achieve fidelity and functionality similar to code, increasing testing scope so design teams can solve more usability issues and identify better opportunities during the design process.

Sign up for a free trial to build your first interactive prototype with UXPin and deliver the meaningful user experiences your customers deserve.

Empty states are a pause, not a dead end. Whether a user stumbles across an empty state due to first-use, accomplishment, or error, your product needs to guide them to the next logical step.  

This article explores empty states and their vital importance for UX design. We also offer some tips with real-world examples from leading product developers.

Have you ever tried interactive prototyping? Interactive prototypes enhance testing so designers deliver meaningful product experiences to their users. Design your first interactive prototype with UXPin. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What are Empty States?

An empty state is a UI design pattern telling users the system has no content to display. Some empty states instruct users on how to find, create, or add content to the screen.

Designers also use empty states to communicate a screen/feature’s purpose with tips and instructions. For example, Gmail’s empty state tells users how to customize the inbox’s tabs.

Types of Empty States

Empty states represent a pivotal point in the user journey. Each is an opportunity to build rapport, drive engagement, educate, entertain, or delight users.

There are four primary empty states users encounter in product design:

1. First use: When new users first interact with a digital product.
2. User cleared: The user has just completed a task or cleared all content associated with the app or site.
3. Error state: The user has encountered a roadblock during the interaction.
4. No data: The system has no data to display or no results from a search query.

Many designers overlook the opportunities for empty states to engage users. They tend to focus more on the associated tasks and features rather than optimizing empty states for engagement.

Empty State Examples

Here are four user interface design examples of when and how to use the types of empty states mentioned above.

First use/onboarding

Onboarding or first use empty states, present users with a blank canvas with instructions to get started. These screens must invoke action, typically with a primary call to action button.

Facebook Messenger’s empty state install screen has a lot going on in a small space, but the primary CTA is prominent using plain language.

Let’s explore what users can do on this empty state screen:

• Lets you know that you can take pictures or record videos in-app
• Exerts social pressure by telling you how many of your Facebook friends are using the app
• Allows you to look up additional information about the app before installing
• An adorable graphic to create rapport and encourage engagement

Facebook Messenger’s install screen is a fantastic example of how designers can use empty states to encourage and educate first-time users.

Completing tasks/user cleared

Empty states are an opportunity to prompt users toward new interactions or congratulate them on completing tasks. This feedback acts as a placeholder and reward, helping to develop habit-forming products.

These “user-cleared” empty states are essential for encouraging further engagement. Here are three things to incorporate in task completion empty states:

1. Step 1: First, inform the user they have completed the task
2. Step 2: Reward the user–i.e., congratulate them
3. Step 3: Steer them toward the next step

We’ll use the WritekUpp app for iOS as an example:

1. Step 1: “You’ve got no more tasks”
2. Step 2: “Well done you!”
3. Step 3: “To create another task, simply tap below.” followed by the CTA: “Create New Task”

Error states

Errors are inevitable and can happen on both ends–from the user and the system. What’s important is telling the user what went wrong, why it happened (to avoid future occurrences), and what to do next.

This example from the iOS App Store shows what happens when users follow a link to an app unavailable in their region. The App Store informs the user what went wrong “Item Not Available” and why “The item you’ve requested is not currently available in the UK Store.”

What’s missing from the App Store in this example is what to do next–which likely causes frustration. A good option would be “Search for similar apps available in your region.”

Humor can help people feel better about errors but must not confuse or create added friction. This error screen from Piccsy is an excellent example of subtle humor. Here, Piccsy presents users with an illustration linking to the artist and a CTA to return to the app.

IMDB uses a similar humorous strategy with its 404 page. The page informs the user that the URL “was not found” with a link to return to the homepage. IMDB also includes a 404-altered quote from a movie, linking to the film’s IMDB page.

What’s clever about the IMDB 404 error page is that it educates and entertains. Users might discover a new movie while being amused by a humorous quote.

No data

Empty states must help users find content when the system doesn’t have answers. This example from DuckDuckGo shows what happens when there are no results for a query–rare with the sheer volume of content on search engines.

First, DuckDuckGo displays the user’s query, “No results found for [QUERY].” This prompts the user to check their keyword for errors. Next, the search engine offers suggestions to fix the problem:

• Make sure all words are spelled correctly.
• Try different keywords.
• Try more general keywords.
• Try fewer keywords.

These “no data” empty states can frustrate users because the system doesn’t have an answer. Keeping user interfaces clean with actionable advice can help them solve the problem–as DuckDuckGo does above.

Empty State Design Tips

Use visual cues

Visual cues through empty-state illustrations or GIFs help users understand what to do next. These must be relevant to the action while offering encouragement. Most importantly, the graphics mustn’t distract users.

For example, Google uses a document illustration to accompany the CTA, “Drop files here or use the ‘New’ button.” The simple image is relevant to the task, doesn’t distract the user, and draws attention to the instruction.

Offer suggestions

Suggestions help guide users with directions and ideas to get started. For example, Spotify’s new playlist empty state includes a CTA to add songs but also offers “Recommended songs” based on the playlist’s name–meaning if the user renamed the playlist to something more descriptive, “90s rap playlist,” they might get better recommendations.

Personalize empty states

Personalizing empty states with user data (i.e., their name) or personalized content creates a more meaningful experience, increasing engagement and product satisfaction. For example, Facebook Messager’s install screen shows the user’s friends also using the service.

Make empty-state copy meaningful

Microcopy expert and UX writer Kinneret Yifrah, argues that empty-state copy must be meaningful. She structures copy with three key elements:

• Heading: describes the state
• Motivation: how will it benefit the user or how to do it
• CTA: descriptive call-to-action button

Using this structure, we can create an empty state for an example alert:

• Heading: You haven’t set up any alerts yet.
• Motivation: Alerts will keep you updated, so you won’t have to worry about missing out on something important.
• CTA: Create alert

Following Kinneret’s user-focused strategy will help create meaningful copy that motivates users to take action.

Prototype and Test Empty States With UXPin

With UXPin’s advanced features, designers can create empty-state prototypes that replicate the final product user experience accurately. UXPin prototypes are fully interactive with immersive code-like functionality, giving design teams actionable feedback to test and iterate for higher-quality outcomes.

Interactive prototyping

Interactive prototypes respond to user engagement like clicks/taps, swipes, scrolls, etc. Additionally, UXPin’s prototypes allow designers to capture data from user inputs and use them elsewhere in the application. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics that accurately replicate the final product experience.

For example, our example Auction app allows users to select an item and place a bid.

The confirmation screen tells the user their bid is live and when the auction ends. A prominent CTA takes the user back to the auction’s homepage.

With UXPin, you can make this screen more personalized using Variables, including the user’s name and their bid captured from the previous screen.

While the auction app doesn’t have an empty state, it demonstrates the powerful functionality UXPin offers designers for accurate prototyping and testing.

Actionable feedback

Better prototypes result in meaningful, actionable feedback from usability participants and stakeholders. Designers can solve more problems while identifying valuable business opportunities during the design process.

Smooth design handoffs

These prototypes also streamline design handoffs because front-end developers can visualize exactly what the product must do. UXPin prototypes require less explanation and documentation, allowing product teams to release products faster with less friction between design and development.

Design, prototype, and test at higher fidelity with code-like functionality in UXPin. Sign up for a free trial to build your first interactive prototype with the world’s most advanced UX design tool.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Progressive disclosure is one of the ways of reducing UI complexity and it may come in handy whenever designers want to make products less overwhelming for the end-user.

This article explores progressive disclosure, when to use it, helpful UI components, real-world examples, and a step-by-step process for implementing this design technique.

Design user experiences your customers love with the world’s most advanced design tool. Sign up for a free trial to create your first interactive prototype with UXPin. 

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Progressive Disclosure?

Progressive disclosure is a technique UX designers use to reduce cognitive load by gradually revealing more complex information or features as the user progresses through a user interface of a digital product.

Jakob Nielsen, co-founder of the famous Nielsen Norman Group, introduced progressive disclosure in 1995 as an interaction design pattern to reduce user errors for complex applications.

Designers achieve this by breaking complex tasks into smaller, more manageable steps and presenting these to users one at a time. This step-by-step approach allows users to complete large tasks without being overwhelmed by too much information and instructions at once.

The most common example of progressive disclosure is a multi-step form, typically used for eCommerce checkouts. An example may look like the following:

• Step one: name and delivery address
• Step two: shipping options
• Step three: order confirmation and payment details
• Step four: success/thank you page

What are the three categories of progressive disclosure?

There are three categories for progressive disclosure:

1. Step-by-step: breaking complex tasks into manageable steps
2. Conditional: hiding certain elements and features until the user requests them
3. Contextual: offering additional information and options to provide context based on the user’s current situation

What is progressive enabling?

Progressive enabling is a similar design technique that gives users incremental access to features and functionality as they become more familiar with a product. This technique is especially effective for complex products, allowing users to fully comprehend each feature before moving to the next.

The levels in video games are an excellent example of progressive enabling. Players start with basic features and difficulty, which grow in complexity with each level.

When to Implement Progressive Disclosure

Here are four instances where designers might consider progressive disclosure.

Complex tasks

Breaking complex tasks into manageable chunks makes it easier for users to understand and complete. If you save each step, users don’t have to complete everything at once and can return later.

Contextual help

Designers often use contextual help through tooltips, popups, hotspots, and other UI elements to direct users through tasks. For example, a designer can highlight the form field a user must complete next so they know where to focus.

Onboarding

Progressive disclosure is highly effective for onboarding, where designers provide in-app tutorials and walkthroughs to explain steps in a specific process, including using contextual help.

Content design

Content, especially in product documentation, can be overwhelming to read and digest. Content designers can use progressive disclosure to present users with the most important information first, with the option to explore more content for those who need it.

UI Patterns for Progressive Disclosure

Here are some examples of how designers use UI design patterns for progressive disclosure.

Accordions

Accordions give users control over when and if they need content. These design patterns are particularly helpful when designers have to present a lot of content, like FAQs.

Tabs

Tabs allow designers to organize content into categories so users can choose when they need it. These tabs also reduce scrolling, which is particularly helpful on mobile apps.

Dropdown menus

Dropdown menus help keep UIs uncluttered by hiding long lists. Hiding this content allows users to focus on the current task without being distracted by irrelevant content. For example, imagine trying to complete a form with all the countries, states/provinces, and cities visible. It would be a nightmare to navigate.

Scrolling

Presenting users with the most important content high on the page above the fold can help them find answers or complete tasks without scrolling. Designers can provide supplementary content and features when users scroll. Sales landing pages often use this type of progressive disclosure to make a decision immediately or scroll for more information.

Explore: 4 types of scrolling patterns.

Dialog boxes & popups

Dialog boxes, popups, and tooltips provide users with additional information when they hover or click on a UI element. This progressive disclosure technique lets users find answers without leaving the task while keeping interfaces uncluttered.

Examples of Progressive Disclosure

GOV.UK bank holiday page

The most famous progressive disclosure case study for content design is the UK government’s GOV.UK bank holiday page redesign. The initial web design was busy and overwhelming.

Through user research, the team learned that most people wanted to know the date of the next bank holiday. The redesign presents users with the upcoming bank holiday at the top of the screen using a clear visual hierarchy, with the following days in smaller text below.

Google’s Advanced Search

Google’s primary search is simple: one input field with a few options, including an image search and two buttons. Most users will only use this basic search feature.

Google’s Advanced Search is more complex, with multiple fields and options for users to get more granular, including settings for language, region, exact phrase, last updated, etc.

Dropbox’s File-Sharing Options

When you share a file in Dropbox, the file-sharing options are initially hidden, with only the email field and “Share file” button visible.

Users must click “Settings” to access more advanced settings like “File settings” and “Link for viewing” options.

eCommerce product pages

Designers use progressive disclosure on product pages, so they don’t overwhelm customers. A standard technique is to use accordions or tabs to hide details so shoppers can choose if and when they want to see them.

For example, only the quantity stepper and “Add to Cart” button are visible on this product page from Shopify Themes. The product’s description, shipping and returns, and reviews are hidden behind accordions.

Progressive Disclosure Design Process

Identify user needs

As we saw in the GOV.UK example above, understanding what content and information your users need is vital for progressive disclosure. Designers can use fundamental UX research techniques like user interviews and usability testing to determine these needs.

Prioritize information

Next, designers use card sorting and affinity mapping to prioritize information and features to help users accomplish their goals efficiently. For example, designers may hide the lowest priority items or use the hierarchy to create an efficient multi-step process.

Determine the correct level of detail

Once they have prioritized the information, designers must determine the level of detail for each one. What information must designers present immediately, and what must follow?

For example, with GOV.UK, the most important information what the next bank holiday. The level of detail users required was the date and name of the holiday–for example, December 25, Christmas Day. The other holidays followed sequentially with the same level of detail.

Design for simplicity

Keeping user interfaces simple and easy to use is crucial. Designers must only provide the content and features required to complete a single task or decision–which is why the first three steps above are essential for progressive disclosure.

John Maeda’s 10 Laws provide an excellent framework for achieving design simplicity:

1. Reduce: remove what isn’t needed
2. Organize: makes complex systems easier
3. Time: saving time feels like simplicity
4. Learn: knowledge makes things simple
5. Differences: balancing simplicity and complexity
6. Context: “What lies in the periphery of simplicity is not peripheral”
7. Emotion: more emotion is better than less
8. Trust: simplicity = trust
9. Failure: some things aren’t meant to be simple
10. The one: subtract the obvious and add the meaningful

Prototype and test

The last step is to prototype and test your solution. Designers must also consider usability and ensure the design doesn’t introduce problems. For example, hiding features so users can’t find them.

Create Better Prototypes With UXPin

UXPin’s advanced features allow designers to create immersive prototypes indistinguishable from the final product. With fully functional forms and code-like interactivity, design teams can test ideas to find a solution that best solves user needs while providing maximum business value.

These four UXPin features enable designers to build advanced prototypes: 

• States: create multiple states for a single component and build complex UI patterns like dropdown menus, steppers, carousels, and accordions–essential for progressive disclosure user testing.
• Interactions: use Triggers, Actions, and Animations to design immersive prototype experiences. With Conditional Interactions, designers can create dynamic interactivity according to user actions.
• Variables: collect data from user inputs and use it elsewhere in the application. Designers can use these variables to personalize the prototype experience to feel like the final product.
• Expressions: design form validation, computational components, dynamic error messages, and more. When combined with States, Interactions, and Variables, Expressions enable designers to create Javascript-like functionality.

Build prototypes that allow your team to get meaningful, actionable results from testing. Sign up for a free trial to create your first UXPin prototype today.

Products are built by people for people. To do it right, UX designers must have a genuine interest in human psychology – to understand the emotions and motivations behind users’ actions. Only then you are able to create products, which perfectly resonate with the target audience. Without this knowledge, it’s like shooting in the dark – high chances are, you’ll miss your target. 

In this piece, we’re going to focus on the question – should user experience designers be aware of human psychology? We’ll discuss the psychology principles you should be aware of and how you can apply them to your design process.

Implement all UX psychology principles that we’re about to outline right away. Create advanced prototypes using UXPin, an end-to-end prototyping tool that supports product design and development teams on their journey to build the best apps, websites, and other digital products for their users. Try UXPin for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Is UX design related to psychology?

Psychology and user experience are inseparable. You cannot design products that will appeal to your target audience without diving into human psychology – at least on a basic level. Otherwise, how will you know how to influence their decisions and resolve their problems?

If you’re a designer, then high chances are you’ve heard the term “design psychology”. It’s a combination of the following:

• Neuroscience
• Cognitive psychology
• Social psychology
• And human-computer interaction.

By wrapping your head around these branches of psychology dedicated to human thinking, you’ll be able to view the design process through a more human lens.

In other words, you’ll be capable of implementing mechanisms that will drive specific responses and actions from your users into your products.

4 UX Psychology Factors Designers Need to Know

At UXPin, we’ve noticed that plenty of sources online reduce the role of psychology in design to ‘studying behavior’. However, it’s far beyond that. It’s a complex process, which circles around analyzing the user’s emotions, attention, cognition, and perception levels. Of these four criteria, the last two should be studied particularly well by designers.

In this section, we’re going to discuss all four UX psychology factors and how you can make them play out in your digital product’s favor.

Cognition

Have you ever stepped into a store to buy yogurt, only to stare blankly at the fridge, overwhelmed with the choice? This is a prime example of Miller’s law. In a nutshell, people struggle to compare multiple options against one another due to cognitive limitations.

The average person can simultaneously process anywhere between five to nine options. Anything above this threshold either makes us pause our actions or withdraw from them altogether. The same is likely to happen to your users if you clutter too much information on your website or app.

To tackle this UX psychology challenge, it’s best to distribute information over multiple, progressive screens. For example, if you operate an online store, show no more than nine products per page. If it isn’t possible, then try to group them into categories to ease navigation.

The same rules apply when designing entire user journeys. If you’re creating, say, an in-app onboarding sequence, break it down into smaller chunks, and show a progress bar at the top.

Here’s a great example from WordPress:

Perception

Perception kicks in as soon as a person comes across your brand name or logo for the first time, and stays with them in all interactions with your website and services. It’s a mixture of opinions and emotions that your product triggers in them, and is subject to change over time.

So, what contributes to how users perceive digital products? The Interaction Design Foundation points to several Gestalt principles. While discussing all of them in depth would be beyond the scope of this piece, designers should particularly consider the following: 

• Proximity – users tend to think that elements placed close to one another in an interface are part of a group, i.e., there’s a relation among them.
• Similarity – people believe that similar elements are related to one another, even if they’re dispersed on a screen miscellaneously. What we see as ‘similar’ can be based on shape, color, or size.
• Closure – the human brain tends to imagine lines and links between shapes if it helps us see a pattern. Look at the famous Champions League logo below. Even though the stars aren’t linked on the outer edges, we clearly see a star-shaped football.

To learn more about the role of perception in design, grab our free eBook on Web UI design for the Human eye.

Attention

There is a statistic circling the internet that the average human’s attention span is just 8.25 seconds, which would put us behind goldfish (9 seconds). This number has rung alarm bells among psychology scholars. While the goldfish analogy has luckily been debunked, it’s true that our attention has worsened when compared to the pre-personal tech era.

There are two things that can disrupt your user’s journey. Firstly, they can get distracted by their own thoughts or physical surroundings. Secondly, they can be deliberately interrupted by other apps competing for their time – for example, via push notifications.

Here’s how to tackle this while designing your website or product:

• Refrain from any strong stimuli that could interfere with the user’s goals. For example, if they visited your product page, showing them random pop-up surveys or colorful banners could keep them from converting (i.e., draw their attention away from the “Buy now” button). 
• Inform your users about where they are in the process. Imagine they were setting up your tool, but were interrupted by a phone call. Will they know where they’ve left off once they return to your app or site? A good idea is to create breadcrumbs or even a progress bar, so they can see how many steps are left in the process.
• Finally, try to make your product stand out. People are attracted to and interested in new experiences. That being said, don’t break any UX design conventions. Simple actions like moving between categories or finalizing a purchase need to be easy to complete.

Emotion

The age-old rule says that you become who you surround yourself with. But it’s also strongly about what we surround ourselves with. If we dedicate, say, 80% of our leisure time to watching sad movies, it will be easy for us to pick up the gloomy mood. This is a subconscious reaction, which can luckily also be used to evoke positive feelings.

How does this relate to digital product design? Don Norman, UX design guru and co-founder of the NN Group, says that aesthetics play a key role. One of his research papers circles around the claim that “attractive things work better”.

What Norman has noticed throughout decades of UX design work is that people tend to forgive usability glitches if they like the design. They will also feel that aesthetically pleasing interfaces are more functional. So, when it comes to emotion in UX, it’s not only about your company’s message. It’s also about how you present it through visual and functional design.

Is a Psychology Degree Necessary for UX Designer?

Both psychology and UX revolve around people. So while a user experience designer should be aware of human psychology, they don’t necessarily need to be a psychologist.

Most psychology principles are easy to understand but can have a tremendous impact on your design process if applied correctly. Let’s take a look at what UX design and psychology have in common: 

Research – humans are complicated creatures, and figuring out their motivations and needs can be hard, especially when they can’t verbalize them. Having basic psychological knowledge will help you apply specific techniques to gather information and derive insights from them.

Empathy – a lot of us think that empathy is something we’re born with. However, the truth is that it can be trained, and psychologists spend years trying to become more empathetic. Being able to step into your users’ shoes, which is what empathy is about, will become handy in UX design. 

Emotional design – successful products and services are built around users’ emotional journeys. When you run user interviews and usability testing, you’ll be able to apply your basic psychological knowledge to figure out how people feel while using your product. 

Check out: UX Design Degrees and Courses that Are Worth it

Psychology in Design – How Can it Help You? 

Applying psychology to your designs will help you make better design decisions.

Here is how:

Decision making – giving users more options to choose from isn’t always the right thing to do as it can lead to a paradox of choice. The more choice they have, the harder it is to make a decision. Offering your users guidance, and simplifying their entire journey will improve their experience. 

Motivation – UX designers have to understand their target audience’s pain points and needs. In short, they have to know what motivates them to use a product. Without this knowledge, they won’t be able to retain a user for long. 

Influence – as humans we’re often indecisive; we don’t know what action to take until we actually take it. This is a very important piece of information, as it shows that people need guidance. Psychologists are aware of mechanisms that can be applied to “push” individuals towards a certain action. The same principles can be used while designing products. However, there is a thin line between manipulation and influence. Trust and credibility are the basis for building a lasting relationship with customers. 

Interactions – the more complex the product the harder it is to interact with it. And this is worth taking into consideration as people have different levels of tech savviness. If you want people to use your product or service then you have to adapt it to your users, not the other way around. 

Use Psychology Principles in UX Design 

An understanding of psychology principles is a must-have in any UX designer’s skill set. Humans are complex beings, and our reactions aren’t always the most ‘rational’ ones on the table. Knowing how people create visual connections and what triggers their positive and negative emotions will help you do more than just build more enjoyable experiences. It will also support your business goals and have users return for more. 

The best part is that, since we’re all humans, you can test your concepts well before you put out a design. By using UXPin, you can create interactive prototypes, from start to finish. Have an idea for a functionality or an assumption you’d like to build and test out? Get started with UXPin.