Web Usability and Visualizing the User’s Needs

In order to improve your website for the user, there are certain steps that need to be taken. These steps include: usability testing, UX (user experience) mapping, and user interviews.

Web Usability

Without successful usability, a site will not be valuable to its users. Usability refers to how simple and effective interacting with the website. Career Foundry says:

“Usability is the ease with which a person can accomplish a given task with your product.”

-Emerson Schroter

A design that has good usability will be more successful in continuing the user’s conversation. Therefore, the user will be more likely to continue looking at and returning to your website.

Understanding the components that work to create good usability will give the designers a clearer mindset of what to focus on. According to The Nielsen Norman Group, Usability is defined by 5 quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from these errors?
  • Satisfaction: How pleasant is it to use the design?

Web designers need to keep these factors in mind and actively work to ensure that their the users of their site answer these questions positively. The way to determine if they are successful in these efforts, is usability testing.

Usability Testing

According to Hotjar, usability testing is a method of testing the functionality by observing real users as they try to complete tasks on it. In doing these tests, the designer will gain a new perspective of what is and isn’t working with the web design. According to The Nielsen Norman Group, there are three components to user testing:

  • Representative users: people to interact with the site, such as customers.
  • Representative tasks: specific things the users need to accomplish with the site
  • Observation: observe what the users do, where they succeed, and where they have difficulties with the user interface.

Usability testing should be utilized to make sure a new site, or one that has been being used, works the best it can, based off of the people interacting with it. It isn’t a one time evaluation either. Your website should change as the world around changes, in order to accommodate the changing expectations of users.

User Interviews

Interviews with users about the website design can be conducted in a variety of situations according to The Nielsen Norman Group:

  • Before you have a design, to inform personas, journey maps, feature ideas, and workflow ideas.
  • To enrich a contextual inquiry study by supplementing descriptions of tools, processes, bottlenecks, and how users perceive them.
  • At the end of a usability test, to collect verbal responses related to observed behavior

This is a way of connecting observational data to spoken data which would give the designer multiple perspectives from the same user. They would be able to view and hear what worked and didn’t work for them.

UX Mapping Methods

In addition to analyzing the user’s interaction with the site, knowing your user’s needs in connection to their experiences is crucial to determining how to make improvements. Due to this, each of the different mapping methods focus on a different aspect of the user, leading to what they expect from the site, and the outcome of that interaction.

Career Foundry defines UX as any interaction a user has with a product or service. It considers each and every element that shapes this experience, how it makes the user feel, and how easy it is for the user to accomplish their desired tasks.

Empathy Mapping

According to The Nielsen Norman Group, an empathy map is a collaborative visualization used to articulate what we know about a specific type of user. It externalizes knowledge in order to 1) create a shared understanding of user needs, and 2) aid in decision making.

This figure shows the four quadrants in a traditional empathy map: says, thinks, does, and feels.

The information in the says section is what the user says out loud regarding the site.

The information in the thinks section is what the user is thinking during user testing or a user interview. This is what a user may think about themselves or the website, but wouldn’t want to vocalize.

The information in the does section is the actions that the user does while physically interacting with the site.

The information in the feels section is the emotions that the user feels and/or expresses while interacting with the website.

Customer/User Journey Mapping

According to The Nielsen Norman Group, a customer journey map is a visualization of the process that a person goes through in order to accomplish a goal.

This figure shows the user along with their scenario and goals, journey phases, actions/mindsets/emotions, and opportunities/ internal ownership.

  1. User: This is who experiences the journey. Their point of view usually aligns with personas and their actions are rooted in data.
  2. Scenario and goals: the situation that the user is in for the journey map as well as the user’s goal and expectations with the website.
  3. Journey Phases: the stages for the journey. They provide a layout for the rest of the information in the categories of the journey.
  4. Actions, Mindsets, and Emotions: the behaviors, thoughts, and feelings that the user has throughout the journey. They are organized within the journey phases.
  5. Opportunities: the insights gained from mapping. They show how user experience can be optimized.

Experience Mapping

According to The Nielsen Norman Group, an experience map is a visualization of an entire end-to-end experience that a “generic” person goes through in order to accomplish a goal.

This figure is split into three columns of phases, with a line influenced by each of them.

This map is split into different behaviors for each phase. These behaviors include actions, thoughts, mindsets, and emotions. There can be more than one line and it can rise and fall when the frequency/intensity of the behaviors increase or decrease. It also depicts the events in a chronological order to record what behaviors correspond to what events.

Service Blueprinting

According to The Nielsen Norman Group, a service blueprint is a diagram that visualizes the relationships between service components (people and evidence), and processes, that are directly tied to touchpoints in a specific customer journey.

This figure shows a row for evidence, customer (user) actions, frontstage, backstage, and support processes.

  • Customer (User) Actions: steps, choices, activities, and interactions that the user performs while interacting with the website to reach a particular goal.
  • Frontstage Actions: actions that occur directly in view of the user.
  • Backstage Actions: actions that occur behind the scenes to support the onstage happenings.
  • Support Processes: internal steps and interactions that support the website in continuing the conversation with the user.

This blueprint shows the process in which occurs when the user interacts with the website. Mapping it out is helpful to show where things went positively or negatively.

The purpose of the designer putting so much effort into usability testing, UX (user experience) mapping, and user interviews behind the scenes, is to optimize user experience. By doing this, changes that will make it easier to have and continue online conversations with the site will be made.

The more you pay attention to the user, the more the user will interact with you website. Keep their needs in mind, and design a site that will have the best outcome for everyone!

This Post Has 12 Comments

  1. Anna, I enjoyed reading your blog post! I think it is a great extension from this week’s reading and discussion topics. Formatting-wise, I liked that you used the quote feature to make Schroter’s definition of “usability” stand out. You’ve also effectively used lists and bullets to provide definitions or further descriptions, which is useful for your audience who may not fully understand them yet. Personally, I don’t have much experience with the mapping processes you discussed, so those definitions were helpful in learning something new.
    I am particularly glad that you pointed out that usability testing should not just be a one-time evaluation. Websites should be edited and maintained as the company/the industry/society changes, and usability testing should always play a role in that maintenance. I looked more into this on usability.gov, which had some interesting breakdowns for budgeting for ongoing usability testing. The site says to allocate money for the following factors: time, participant recruiting costs, participant compensation, and equipment rental costs. I thought this was interesting because it outlines how much of a process usability testing should be, and how important it is to do it well. Effective usability testing can help site designers see places for improvement, which in turn makes users more likely to visit, be satisfied with their visit, and visit again.
    Here is the full URL to the article I read: https://www.usability.gov/how-to-and-tools/methods/usability-testing.html

  2. Hi Anna! The visuals that you included throughout your blog post this week were really interesting to learn about. I especially appreciated your accompanying descriptions. When I first saw the images, I wasn’t sure what to make of them or how to understand them, but your following descriptions defining key words from each image helped each map to make sense. You did a great job summarizing the purpose of each UX map! I found it interesting to see how these maps, especially the Empathy Map, relate back to the idea of personas and adding a layer of humanity to UX research. I liked seeing how the different maps related to one another, such as the phases from the Customer/User Journey Map being a key element of the Experience Map, or the feelings/actions of the user from the Empathy Map being applied to the Experience Map. I did some further research on usability testing and how long the process generally takes and found an interesting article that discusses some interesting ideas surrounding the process (https://www.awa-digital.com/blog/how-much-time-does-usability-testing-take/). The author of the article, Lynne Wright, discussed that while most businesses agree that usability testing is highly beneficial, many of these businesses avoid usability testing for a variety of factors, one of them being time consumption. She estimated that the usability testing process could take anywhere from several days to several weeks, depending on how much time/effort a business is willing/able to put in.

  3. Anna,
    The concept I found most valuable from your blog post was the idea of user testing and user interviews. Specifically, the use testing. During our readings, I doubted the instructions to put this content here or there or to include content that people want to see. I am having trouble understanding how to know what people want and why. I was so interested in this concept; I found an article that details a five-step plan for user testing. First, the creator must decide on tasks to ask of participants. Next, they will identify what type of test to administer, their first choice is card sorting, which we had read and learned about. Then, they find participants and schedule the tests. Once testing is over, they review the material, revise, and test again. User testing is interesting because it is an integral part in creating web pages while relying on external help and opinions, like a web design focus group. Usability testing was my most valuable takeaway from this blog post because it answered a specific question I had from the readings.


  4. Hi Anna!
    Great job on your blog post, I really enjoyed reading it, especially learning all these new maps. The visuals that went along with these maps, including the empathy map, customer journey map, and experience map, were very helpful. They helped me visualize what was specifically being “mapped” out. I also really enjoyed how under each map, you gave an explanation about each part of the map. This really helped me understand the different aspects being measure and/or looked at in each map.

    I really enjoyed how you set up the blog post in the first sentence by stating the three steps that need to be taken in order to improve a website, and then using these three steps at the main headings throughout the blog post. This kept all the information organized and helped me to easily read through it without getting confused.

    The thing that interested me the most about your blog post was the idea of usability testing. I think this aspect in developing a truly usable website is very important because you get real feedback from users on how easy it is for them to accomplish a task and how they feel as they accomplish it whether they were frustrated because they found it hard or happy because they found it to be easy. One of the sources you mentioned in your blog post was Hotjar, and I found another resource from their website that describes how to set up a usability test in five steps. I think this resource can be extremely helpful when starting to plan a usability text for a website. It also includes do’s and don’ts of usability testing, which can be beneficial to those who are conducting their first test. You can check it out here: https://www.hotjar.com/usability-testing/process-examples/.

  5. Hello Anna!

    This is an excellent blog in terms of not only content, but also format! I really appreciated the quote about usability to start us off. It gave me the correct mindset and tone about usability to be prepared to broaden my knowledge and understand the importance of this topic. The way you introduced vocabulary terms or specification information with bold lettering was extremely helpful for someone like me (I like to read QUICK). It allowed me to take in information quickly, holding on to the crucial details. The way you explain the importance of variance and repitition in usability testing is spot on. The maps are a great tool for connecting with the user’s emotions, thoughts, feelings about their experiences. I actually got to test this out in a previous course! While it was tedious, I learned that it is truly worth the time. To best use the information you gave me, I found an article that discusses how I can implement consumer mapping into my career! A specific point I’d like to touch on is how experience/journey mapping can be used in advertising to help pick platforms for a better conversion rate. If the usability is more effective on one platform versus another, the consumer will go to the platform that better suits their needs. The entire read aligns perfectly with your blog about getting to know your consumer the best you can! Thank you for this insightful post, Anna!

  6. Hi Anna!
    I think this was a well formatted blog post with excellent content selection. I appreciate your use of different headers to separate information, making it easy to navigate throughout the entire blog post. In Professional Writing, we completed a semester long project surrounding usability testing and, just from your blog post, I would have the necessary information to redo the project without instruction. The images you included really helped explain your claims and, as a visual learner, I really appreciated them! In my opinion, the most interesting part was the Service Blueprinting. This is something I did not focus on with the project I completed, so it was new information and you explained it well. Because I was so interested in this specific topic, I did more research on it and found this article I think you would like. It has similar themes, but goes into a bit more depth than the blog. Check it out at https://www.lucidchart.com/blog/what-is-a-service-blueprint
    Great blog post! Thanks for the insightful information.

  7. Hello Anna,

    Your blog post is great. I love that you included a picture in almost every section. I am a visual learner and it helped me have a better understanding. Also, you gave a description of every picture you included which was a big help. “Your website should change as the world around changes, in order to accommodate the changing expectations of users.” This quote stood out to me because something similar to this was mentioned in a post from last week. Sometimes I forget that a website is not truly finished because it is always changing, it should change constantly. According to Bochi Web’s 10 Reason Why Website Maintenance is Important updating your website helps with SEO. “It is very important that the content on your website is regularly updated through periodic website maintenance so that your site’s visitors can keep coming back.” Not only does it help with SEO it keep users coming back. This plays a big part in web usability because you want users to come back to your site.

    Something else that stood out to me was the fact that you mentioned empathy mapping. How a user feels and thinks plays a big part in creating a website. I remember reading a section from chapter 5 in the Redish book. On page 90 the section stated “People don’t want to read while hunting” this section basically talks about how a user doesn’t want to be stuck on a pathway. They want to move ahead. This can play a huge role in how a user feels. If a person’s website doesn’t have users in mind it can make the site difficult to navigate, which a user may not return back to that site.


  8. Hey Anna, this was very well done! I really enjoyed the visuals you gave us as well as the information to go with it, although I believe it could’ve been a bit more detailed. I found it very impressive that you found a majority of this information at the Nielsen Norman Group. I’m not very familiar with them, but due to the fact that you were able to gain so much information from them is quite a feat! I love to see a detailed example of website usability and when reading this I was able to come up with a few sites that reminded me of this blog post. I also love reading this because I hope to create a website of my own one day and it’s great to see what I need to do and what to stay away from. Overall, a really great post!

  9. Hi Anna, you did a great job with this blog! I loved the visuals you used and especially liked how you used bold fonts to highlight and visualize the main points of each section and connect the words with the visuals. I thought that part was particularly well done and helped me to understand each topic. I particularly thought that empathy mapping was interesting. Empathy mapping is all about the user and their thoughts and feelings, which should be the basis of every usability design. I really liked how the image laid out the connection between each of the four points of empathy mapping and how it includes the user. Although, I was a bit curious as to how to gather and analyze this data, so I did a little research and found this article by the interaction design foundation (https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it). This article basically walks you through how to collect information to fill out the empathy map, then how to analyze the empathy map in order to determine the user’s needs, and finally how to translate the user’s needs into an effective design.

  10. Hey Anna! Your blog post is very well organized and does a good job of exploring these concepts! I especially thought it was a good supplement to my blog post on User Experience and Information Architecture. The articles that I read touched a bit on mapping methods and testing & interviews, but not enough as it was more about the UX and IA of it all. I felt like the articles I summarized dealt with the technical aspect of user experience, and the articles you summarized tied it all together with the usability and user experience side of things, as well as how to actually make these concepts happen! There really is a lot that goes into figuring out what is successful, what could be improved, and exactly what to do going forward. Your use of charts and diagrams as well as the explanation of them was well thought and an effective way to get these ideas across to us readers. Great job!

  11. Hello Anna! I really enjoyed reading your explanation on web usability and the ways to gauge how a website is performing. I especially liked the empathy map which is used to understand specific users and their needs. It includes four components of the user: says, thinks, feels, does. I think this relates really well to the personas we worked on for class. (Hubspot created a good guide to making personas here). To understand how your website should operate, it only makes sense to create personas with motivations and interests to be answered and satisfied by the website’s design and content. I also liked the empathy map because it included “feels”, which Anna defined as “the emotions that the user feels and/or expresses while interacting with the website.” I think a random but interesting example of this would be the website MailChimp, which has the goofiest looking logo of a little mailman chimpanzee. This bit of humor makes the website more inviting and makes the possibly stressed out user more at ease.

Leave a Reply

Close Menu