The Psychology of UX Design
Providing a positive user experience is inherently psychological, and the number of theories related to UX design reflects this. Choosing the right approach is far easier when understanding the behaviors that drive each idea. A strong background in the psychology of UX design makes balancing functional and attractive design second nature.
The Relationship between Cognitive Psychology and UX Design
Cognitive Psychology is the branch of psychology that thinks of the brain as a biological computer. It focuses primarily on motivation, problem-solving, decision-making, memory, and learning, all of which are important for UX design.
When navigating software, users are constantly running cognitive processes in their subconscious, and the outcome of these processes dictates whether they feel positive about the product. If they have difficulties with accessibility, navigation, or comprehension, they will have a less positive user experience. A basic understanding of cognitive psychology can prevent this and have a huge impact on the outcome of a service or product.
How Considering Cognitive Load can Enhance UX Design
The mental stamina needed to process and retain information when using a digital product is called ‘Cognitive Load.’ Each person only has a fixed amount of processing power, and demanding too much of the system can have unpleasant consequences.
Giving a computer too much to do at once will overburden the processing system and cause a dreaded computer crash. The same thing happens to the human brain if we try to make it do too much at once. This biological system failure is called Cognitive Overload, and if it occurs during the use of a digital product, it is unlikely to encourage the user to keep using it.
There are three types of cognitive load
- Intrinsic Cognitive Load is how difficult a task is to complete. Designers consider Intrinsic cognitive load when developing registration buttons, like ‘Sign Up, by removing all additional options and stimuli.
- Extraneous Cognitive Load is how non-essential issues affect the brain. Difficult typefaces or faulty micro-interactions all increase extraneous cognitive load.
- Germane's Cognitive Load is the organization, construction, and implementation of learned behaviors, called ‘schemas.’ When learning a new process, the brain instinctively compares it to its already-known processes.
If users are faced with a complicated feature early on, they will likely feel overwhelmed or unequipped to deal with the product. Cognitive overload can be avoided by presenting users with small chunks of information. This process of breaking up news is called progressive disclosure and will improve the user experience.
Five Common Psychological Laws, Theories, and Principles in Design
1. The Schema Theory
As mentioned above, a schema is how our brains register and organize processes, preferences, and experiences. As we grow, we choose the methods of organization that we prefer and dislike things that vastly differ from our own experience.
If we apply this to design, we have to consider if the cognitive cost of learning a new schema will outweigh the benefits of having a distinctive or unique product. We don’t want to drive users away by trying to reinvent the wheel, or in this case, the hamburger menu. To avoid this, some companies decide that a safe, familiar layout is more worthwhile than investing in a unique feature that takes a long time to adjust.
2. Von Restorff effect
The Von Restorff effect suggests that users are more likely to remember an item if it differs from those around it.
It’s used to guide users to a function the designer wants to stick out, like notification bubbles, sale banners, and ‘Last One!’ warnings. Even a subtle change will attract a user’s attention, making this a valuable effect for designers aiming for a minimalist design.
3. The Gestalt Principles
The Gestalt Principles are a collection of theories about human processing. Some of the most useful for UX Design include
- Continuation, or what guides the eye from one object to another. This principle can help UX designers direct a user through a digital product.
- Similarity and Proximity, or how our brains group similar objects. In design, this can highlight a preferred option using color, size, distance, and shape.
- Figure and Ground, or the fact that objects in the foreground of an image will be seen before anything in the background. Designers use this when they want to draw attention to a focal point, like an action button.
4. Hick’s Law
Would you instead scroll through a list of a hundred items or five? If users are looking for a single option, they’ll find having to search through myriad options frustrating.
Hicks Law states that the time it takes for people to make decisions depends on the number of options available. The time it takes to make a choice increases with the number and complexity of the possibilities. Here, simple is best.
5. Serial Position effect
When displaying items in a sequence, the serial position effect dictates that the position of the item on the list affects recall memory. Ebbinghaus, the father of the theory, found that users best remember the first and last items in a sequence.
By placing the most critical information first and last, with the least important information in the middle, UX designers can decide which information the user remembers.
In Summary
The limit to the application of these principles is dictated by the designer, but that’s not to say that every project needs to apply as many principles as possible to be successful. Instead, these theories should serve as useful tools for designers when considering how to approach a problem.
Get in touch if you’re interested in learning more about the psychology of UX design; our experts are always happy to talk!
Empathy Mapping - The First Step to Understanding the Problem
How do you understand your user? What role does empathy play in the world of design? And once you know more about your users, how do you use that data to inform your designs?
All of these questions are at the heart of the practice of empathy mapping. In this blog, we’ll be exploring what empathy mapping is and how it can help to improve UX design.
What is an Empathy Map?
An empathy map is a tool used by designers to understand and visualize user behavior. It is a simple tool capable of encompassing complex ideas, workflows, and patterns. Empathy maps can be used to work through concepts and to communicate findings to colleagues and other departments.
With an empathy map, you can unite a team under a shared understanding of a user base and start creating products and services that connect with people on a deep level. Dave Gray, the founder of the strategic design consultancy XPLANE, was the person that first had the idea to make empathy maps part of the design process, and this idea has caught on throughout the design world.
Gray envisioned that the empathy map would limit miscommunication and misunderstanding concerning users and target audiences. An empathy map should be the tool to visualize all the findings you receive from user research. It will allow designers to present data in an easily digestible format.
Ideally, it should take a designer no more than 20 minutes to create an empathy map on a whiteboard or a piece of paper. It’s a simple exercise that allows designers to gain a greater perspective on their user base, discover gaps in user research, and highlight the work that still needs to be done to understand the user entirely.
Best Practice Tips:
- Fill out the Empathy Map
- Review your research and fill out the four quadrants while asking yourself:
- What did the user say?
- What did the user do?
- What did the user think
- How did the user feel?
- As you work your way around the map, you will get deeper and deeper into the psyche of your user. First, you recognize how they behave; then, you will dig into why they behave that way.
- Review your research and fill out the four quadrants while asking yourself:
- Synthesize Needs
- What are your users’ needs? Remember, needs, in this context, should be verbs, not nouns. If you need help, use Maslow’s Hierarchy of Needs to help you understand and define the needs of your users. Then write these all down.
- Synthesize Insights
- By exploring user actions and motivations and translating this information into a set of ‘needs,’ y’ will be able to draw various insights.
- Often, insights can arise when you notice surprising or novel behavior.
- Write down your insights.
Why Should You Use Empathy Maps?
There are two key reasons why you should make empathy maps a regular part of your design process:
1. They help you to understand a user or persona:
The purpose of an empathy map is to understand the user. By understanding your users, you can make better designs and build more authentic relationships. An empathy map can help you categorize and appreciate qualitative research. Moreover, the mapping process will help you discover gaps in your knowledge and allow you to uncover hidden insights about your users.
2. They help you to communicate:
Once you have all this data about your user, what should you do with it? An empathy map is a concise and coherent way to communicate user attitudes and behaviors to people in your team and beyond. Designing anything complex, you will probably be working with various departments. An empathy map is a convenient shorthand to help you spread the message about who your users are and what they want.
Key Points to Remember
Empathy mapping is a practice that works best within a team environment. It will help you to understand the user and the thoughts of the designers within your team. You can look through the eyes of the user, empathize with their story and start creating.
Some of the key points to remember as you go on to create your empathy maps include:
- Know your subject and decide on the scope of the empathy map.
- Collect and simplify all relevant data.
- Fill out your map logically.
- Complete the outer sections of the map before moving on to the center sections.
- Reflect on the content of the empathy map; what have you discovered?
- Draw precise conclusions and use them to inform your designs.
Please get in touch with our UX experts to understand empathy mapping and its role in the design.
What is Journey Mapping?
Customer journey maps can be used to understand the relationship between a customer and a business over time. You can visualize the customer journey through the maps and track their interactions across all channels. Design teams can use customer journey maps to understand their customers’ experience, find out their customer expectations and identify areas where they can improve.
In this blog, we want to take a brief look at journey mapping to understand what it is, how it functions, and how it can be used to improve the experience you provide.
Tell customer stories
Journey mapping is about telling customer stories. They are research-based tools that provide designers with a clear narrative about their users that can improve the overall experience of all of their customers. With journey mapping, team members have the opportunity to examine tasks and interactions to determine whether their design fails to meet the needs of their customers. These maps should be rich with detail and indicate the most important tasks and events.
In general, a journey map should include:
- A timescale - a set journey period (e.g., one week or one month) that allows in-depth and sustained evaluation of the customer journey.
- Scenarios - the context and sequence of events, from first to last.
- Touchpoints - how the user interacts with your design.
- Channels - where the user interacts with your design and performs actions.
- Thoughts that arise from interactions - what the user thinks and feels throughout their journey.
The step-by-step process of user journey mapping
To ensure you get the most out of your user journey mapping, it’s essential to know the goals of your business, the intention behind your product, and your hopes for the future of the product. This will help you to align your aspirations with those of your users.
- Choose a scope - Do you want a user journey map that shows the end-to-end experience, or do you want a more detailed map that’s focused on a single interaction? that shows the end-to-end expertise or a more detailed map
- Create a user persona - Who is your user? Interview prospective users, understand the context around your users and analyze the results.
- Define the scenario and the user expectations - What is the situation you want to address? Is it actual or anticipated? What kind of expectations does the user have when interacting with your product?
- Understand your touchpoints - Create a list of touchpoints (user actions and interactions with the product)
- Understand user intention - What motivates your users to interact with your product?
- Formulate the journey - Make a sketch of the entire user journey and understand each step and interaction
- Understand the user during interactions - What does your user feel when interacting with your product? Considering their emotional state and their decisions will help you connect with them on an authentic, human level.
- Refine user journey - Ensure that your journey is realistic and relatable. Creating validated and refined user journeys is essential if the mapping process is valid.
Journey map variations
Several concepts are closely related to journey mapping. Let’s take a look at what makes them both similar and different.
Experience map
An experience map is far broader than a journey map. An experience map aims to understand general behavior, whereas journey mapping focuses on a specific product and a specific set of users. For example, an experience map can be used to know how you can solve a problem and isolate pain points.
On the other hand, a journey map can be used later on to take these pain points, assign them to a specific product and understand whether or not that product is meeting the customer needs. Therefore, to gain a complete understanding, you could use an experience map for the early stages and then a journey map later on.
User story map
User story mapping is a UX-mapping technique often used by Agile teams that helps plan features and functionalities. With user stories, mapping teams will sketch or use sticky notes to outline the interactions they want their users to go through to complete their goals with a digital product.
It is a helpful, visual way of condensing information and seeing everything from the user’s point of view. In general, the user story map is more about planning and implementation, whereas journey mapping is about discovery and understanding. With user story mapping, you could be more focused, specific, and detailed, whereas; journey mapping prioritizes the big picture and the whole customer journey.
Service blueprint
Service blueprints can function as extensions of journey maps. Suppose experience maps are the broad version of journey maps. In that case, service blueprints are the complete opposite: a focused method of visualizing specific components at touchpoints in a specific user journey.
A service blueprint can help you address what you do internally to support the customer journey. In every business, the nature of the service blueprint will differ, but, in general, it should provide a framework to understand each touchpoint and help you thoroughly examine specific customer journeys.
Success through journey mapping
With journey mapping, product managers, designers, and developers can gain a holistic view of the customer experience. They can uncover points of frustration, illuminate moments of ecstasy and really dig into why some interactions work and others fail. It is not a fool-proof system, but it simplifies the whole customer process. If done successfully, journey mapping reveals opportunities to address customer pain points and create an improved experience for your users.
Are you ready to start improving your users’ journey? If you’re curious about the next steps you should take, feel free to get in contact with our experts here at Radiant digital.
Occam's Razor: The Simplest Solution for Designers
Most product and UI/UX designers will tell you that they've caught themselves getting carried away with introducing design elements they assume will enhance a product's user experience. But, on the other hand, the effect was that these only caused distraction or confusion no matter how aesthetically appealing. In these moments, designers can remind themselves of a guiding principle to simplify the complicated — the Occam's Razor. The Occam's Razor is a mental model that states that the simplest explanation is preferable to those that are more complex. Among designers, this has meant that when confronted with competing designs that have the same function, select the simplest one. In evaluating your designs, remove as many elements as possible without compromising the intended functions.
Origin of the Occam's Razor Principle
Occam's Razor, also known as the principle of parsimony, is attributed to William of Ockham (c. 1287–1347), an English Franciscan friar, scholastic philosopher, logician, and theologian during the medieval period. While this principle didn't originate from Ockham, it's heavily associated with him due to his frequent and effective use of the philosophical Razor in axioms in his written body of work such as, "Plurality must never be posited without necessity".
The philosophical Razor refers to shaving away unnecessary assumptions or cutting apart two similar conclusions. Occam's Razor is essentially a problem-solving principle that, when presented with competing hypothetical answers to a problem, one should select the one that makes the fewest assumptions. This is further reinforced in his writings on the principle of economy wherein he says, "It is futile to do with more things that which can be done with fewer." Occam's Razor has since been applied in many scientific fields, including biology, medicine, probability theory, and statistics.
How To Use Occam's Razor in Design
Businesses and organizations often feel the urge to put every bit of information online to cover every need that every user may require. However, design and product teams can filter out the noise and focus on what matters most for a significant share of their users with sufficient user research. At the same time, with the capabilities that web and design tools now offer, designers and managers can get carried away into showing off how forward-thinking or design-savvy their companies are. At the heart of applying Occam's Razor is being ruthless about removing the unnecessary for being effective. Here are the key points in how to use Occam's Razor in UI, UX, and product design.
Design Only What's Necessary
In applying Occam's Razor, designers must evaluate each design element based on necessity. Following this principle requires a minimal user interface (UI) that still allows users to meet their objectives. By introducing animations, additional menu options, or certain navigation tricks, designers must pause and assess whether these are necessary to the user experience or unnecessarily complicate the user journey. For instance, designers can deploy heuristic evaluation, a detailed assessment of a product's UI to surface usability issues, and identify ways to resolve them based on severity.
While the application of Occam Razor in the design process is more associated with the refinement phase — the shaving away of unnecessary clutter — the best approach is avoiding it in the first place. Instead, begin designing for the simplest version of a digital product and introduce additional elements only if it enhances the user experience.
Refine by Trimming the Excess
Designers or their managers need to be ruthless in trimming down their work. Design elements that don't provide value should be removed altogether. Every aspect of the work should be evaluated based on purpose, importance, or necessity. If a more straightforward solution exists, then that version should prevail. Design critique sessions are an effective way to generate feedback from your colleagues. These will force you to articulate your design choices and surface design elements that might not be as effective you initially thought. As the French author, Antoine de Saint-Exupéry, said, "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
Guide Questions
Here are some questions that designers can ask themselves as they create and refine their work.
- Is it easy for users to find the information they want?
- Does the product, app, or website present too many choices?
- Is every piece of information at the top (e.g., menu options, headers, search, log-in) necessary?
- Are the copies or texts in plain language?
- Is there any unnecessarily distracting design element?
- Can seniors or older users meet their objectives?
- Can I remove anything else but still keep its functions without sacrificing user experience?
Popular Examples of Simple UX
Let's take a look at some widely known examples of how Occam's Razor principles of simplicity, necessity, or economy have been applied in digital products.
Google Search
The most widely used search engine, Google, directs user attention to its primary function: search.
PayPal
Paypal redesigned its website in 2014, which was overly complex before that. Since then, Paypal has continuously simplified its website and mobile app experience.
Zara
Compared to most online stores of fashion retailers, Zara plays it simple with one photo on a white background and texts and icons in black.
Shaving off the clutter
Designers can sometimes be drawn into a fantastic idea without stepping back and asking if it's essential to what users want to achieve. Occam's Razor is a compelling reminder for designers when they create and refine their work. When inspired by several excellent ideas, choose the simplest one. Think of the simplicity that Steve Jobs embraced for Apple products at the onset. The earliest designs of the Macintosh and iPod still have a presence in today's iPhone, iPad, and Mac. For instance, the single button on the front of their mobile devices remains integral to the simplicity of their design and the Apple brand as a whole.
Will you be working on a project that requires simplifying user interfaces and experiences? Reach out to our experts at Radiant Digital to learn more about our product design and development processes.
Understanding and Implementing Heuristic Evaluation in UX Design
The first thought that comes to one's mind about product design is its look and feel. However, an appealing design has to be functional as well. So, how do designers go that extra mile in achieving this for an exceptional user experience? More excellent usability is a significant determinant of a design's quality. In addition, the better the usability, the more users will engage with the product. Today, companies perform a variety of usability tests to evaluate their products. Heuristic Evaluation is an effective and proven method backed by engineering concepts to test for user-centricity and compliance with established usability principles (the "heuristics"). Read on to understand Heuristic Evaluation and how to perform it better.
What is Heuristic Evaluation?
Heuristic evaluation is a detailed assessment of a product's UI, where it helps perceive usability issues and identify ways to resolve them based on severity. This approach to problem-solving or self-discovery is practical to reach an immediate design goal. Evaluators use proven heuristics (e.g., Nielsen-Molich's) to reveal actionable insights to design teams who want to enhance product usability sooner than later.
The Ten Guiding Principles of Heuristic Evaluation:
A "Heuristic" is a generic design guideline that applies to a wide range of designs. However, many experts follow Jacob Nielsen's 10 Usability Heuristics for UI Design for the direction that can be summarized as follows.
- Visibility of System Status: Keep users informed appropriately and promptly with appropriate feedback.
- Match between system and the natural world: Show information logically and organically related to the real world and the users' language.
- User control and freedom: Provide users control and undo errors by using "emergency exits" without navigating an extended process.
- Consistency and Standards: Maintain design consistency and reduce ambiguity over what different words, icons, and actions mean. Follow industry and platform conventions.
- Prevent Errors: A system should let users bypass error-prone conditions or notify them with a message for consequences/further actions (example, "Are you sure you want to do this?").
- Recognition over Recall: Add information visibility elements like instructions or menu labeling/positioning to indicate options, actions, etc., and minimize the user's memory recall.
- Flexibility and Efficiency of use: Experienced and even inexperienced users find faster and efficient ways to achieve goals.
- Aesthetic and Minimalist Design: Avoid clutter and irrelevant information to improve user visibility towards designated tasks.
- Help users identify, diagnose, and resolve errors: Easily using content and information in plain language (no codes).
- Help Documentation: Document the straightforward steps in a lean and searchable format to overcome problems and execute tasks.
When to Conduct Heuristic Evaluation? You can do it at any stage during the design process in an iterative manner. This means you'll get more feedback when you conduct earlier.
How to Effectively Conduct a Heuristic Evaluation? An accurate heuristic evaluation calls for careful preparation and requires you to follow a predefined sequence. Any errors may deem your test results invalid.
You can conduct a Heuristic Evaluation by following these steps.
- Know what to evaluate and how – Clearly define the tasks, testing goals, and the usability parameters for the entire product, a feature, or procedure. Wireframes, mock-ups, or prototypes can be used along with usability parameters like:
- Registration
- Login/out
- Navigation
- Checkout
- Know your users to clearly define their behaviors, expectations, contexts, motivations, etc. User personas help look at functionalities, features, and results from the users' perspective based on demographics, personal preferences, skillsets, etc.
- Select 3–5 usability experts from different domains for design review. This will give a holistic picture of your design based on different perspectives and experiences based on the defined principles.
- Select a set of standard heuristics (around 5–10) that evaluators will use depending on the system/product/design's nature. Consider adopting/adapting the Nielsen-Molich heuristics or define your own for reliability and consistency.
- Set up an evaluation system, identify issues, and brief evaluators on what testing system you're following. Use severity ratings like critical, regular, minor, and good practice to flag (using color codes), track, and address issues.
- First Walk-through – Have evaluators use the product flexibly to discover the elements to analyze.
- Second Walk-through – Evaluators delve deeper to test individual elements based on the heuristics against the overall design while recording all the issues encountered.
- Debrief the evaluators to gather, compare, and summarize results for analysis and suggestions based on the severity rating of each issue. Then, they can remove duplicates and prioritize workflows.
Determining Severity Ratings:
Three main factors determine the usability severity:
- Frequency: Is it common or not?
- Impact: Will it affect the end-users, and to what extent?
- Persistence: Is it a one-time or recurring problem?
Usability experts will map a Severity Rating to each usability issue and rate the issues from '0 to 4' where '4' will be resolved using the most resources and efforts, '1' the least, and '0' will need no resolution.
Nielsen's ratings are as follows:
- This is not a usability problem.
- The problem need not be fixed unless additional time is available.
- Minor usability problem, fixing which should be a low priority.
- Major usability problem that is important to fix with high priority.
- Usability catastrophe that is imperative to fix before releasing the product.
Sample Severity Evaluation Template.
You can find more samples here, or you can contact us for customized templates.
Getting an Expert to Perform Heuristic Evaluation
Many companies can't decide if they should pay for a heuristic analysis or use their in-house UX designers since Heuristic Evaluation is expensive. They are willing to pay so their product will benefit from expert analysis in the long run, and designer bias is avoided. However, the overall heuristic evaluation process can be overwhelming and needs additional eyes and a fresh perspective to identify the weak spots. If you're launching your product sooner, undergoing a heuristic analysis from a UX design professional is a brilliant idea.
Performing Heuristic Evaluation by Yourself
In her book The User Experience Team of One, Leah Buley details an informal and handy Heuristics Evaluation method called Heuristic Markup. Here, you do a product walk-through from beginning to end for hours. Leah also suggests capturing a screenshot of each step in the journey, pasting it into a presentation, and noting your observations from your user's perspective. Finally, share your findings with your team.
Heuristic Evaluation and User Testing – The Difference
Heuristic Evaluation
Performer: System Expert.
Action: Comparing usability to predefined heuristics.
Purpose:
- To check the compatibility of the digital product with the user's needs.
- Detect errors and correct complex problems.
- Check alignment to heuristic principles.
User Testing
- Performer: The end-user.
- Action: Uses the digital product in real situations.
- Purpose: To understand how end-users will complete typical tasks in real-life situations in both successful and erroneous scenarios.
Here are some tips to ensure your Heuristic Evaluation is practical and beneficial.
- Collect accurate info on user behavior, needs, and demographics before the evaluation.
- Define the user tasks and use cases.
- Include more than one evaluator for a broader perspective on product usage.
- Once the evaluators test the product and collect the results, present it to your designers and stakeholders for feedback.
The Bottom Line
Performing a heuristics analysis with user testing is enough to identify and fix significant UX design issues. As soon as you fix these issues, you'll notice the difference in user engagement, retention, and sales.
Radiant Digital's evaluation experts have a sharp eye to detect and fix design flaws. So call us today to engage the best design brains in your project.