Did you know there are over 1 billion websites on the Internet right now? But not all of these websites are well designed. This is where the importance of UX in website design comes in. UX design focuses on understanding your users’ needs and pain points to deliver positive experiences that help them achieve their goals.
A strategic way of approaching your website’s design is by following the UX honeycomb framework. The UX honeycomb was developed by Peter Morville, president of Semantic Studios, a firm that specializes in information architecture (IA) and UX.
Morville discovered that clients were struggling to think beyond usability, so he created the framework to better explain the multidimensional facets of user experience. The UX honeycomb framework consists of seven main components that should be factored into modern website designs. Designers can refer to these components as guiding principles to deliver a positive user experience.
But the UX honeycomb also surfaces the conversation of priorities. Depending on the context, business objectives, and user needs, designers should identify which components of the framework are the highest priority and make necessary tradeoffs.
Now, let’s talk about what each of these components means in terms of UX design and some practical ways to apply each of them to your website.
When designing your website, ask yourself if it successfully meets the needs of your users. Your website should be able to be used practically or purposefully.
People go to websites for a specific reason, whether they are looking for information, entertainment, or to book a reservation. By addressing your users’ needs, solving their problems, or helping them achieve their goals, your website becomes useful to many people.
For example, Wikipedia’s website offers a digital library of knowledge for people that want to learn about a specific topic. Their purpose is to provide accurate and accessible information on all branches of knowledge, and this is evident because Wikipedia is a popular website for learning, researching, and accessing information about any topic.
Your website should be easy to use. Users demand simple but effective interfaces that they don’t have to spend hours adjusting to. Imagine trying out a new mobile app where you have to jump through hoops to figure out how to use it — you’d probably delete that app within minutes. The same goes for websites.
Focus on optimizing the UX of your website through user research and usability testing to give your users a positive experience. Gather user feedback and track performance metrics, such as click-through rates or bounce rates, to gain a holistic view of your website’s user experience.
By continuously iterating on your designs based on the feedback gathered, you can replace frustrating experiences with usable ones, leaving a positive impact on your users.
Facebook’s website has continuously iterated on its design throughout the years, making noticeable improvements to its profile page. By decluttering the interface and incorporating visual hierarchy into the design, the usability of the website has improved significantly by making it easier to locate content and navigate the website.
Desirability comes down to understanding your users’ emotions. What makes a website desirable or attractive to users? It’s not enough to just design for your users’ needs, but to learn how your users feel and respond in different scenarios when using your website.
People are emotional by nature and will judge your website based on first impressions, then while using it, and finally reflecting on it afterward. Don Norman describes these emotional responses as the three levels of design: visceral, behavioral, and reflective.
Creating a customer journey map can help understand your users’ emotions throughout each stage of their journey while using your website. This can be used to identify user frustrations and gaps in your website’s current experience that can be improved. Designers can reference journey maps to help make design decisions that cater to their users’ emotional responses.
For instance, Nike’s website uses the power of storytelling to reach its users’ emotions. From its striking images to its captivating stories, Nike knows how to hook its users to inspire them, regardless of their athletic abilities.
Your website’s content should be easy to navigate. Users shouldn’t have to bend over backward to find the content that they’re looking for.
This means creating your website with an IA that aligns with your user’s mental models. A good method to understand this is by conducting a card sorting activity that reveals how users categorize groups of content.
This component also covers implementing a navigation system that allows for discoverability, such as having a prominent search function and menus that match your users’ expectations. These systems make it easy for users to find what they’re looking for and prevent them from getting lost, frustrated, and abandoning your website.
For example, Costco’s navigation system breaks down its website’s content into several main categories, which are laid out in a primary navigation menu across the top. Each category menu opens up into a secondary menu, further breaking down into subcategories, which helps narrow down its users’ search into more specific pages.
If users cannot decide which category to select, the website features a prominent search bar across the top of each page. This allows users to quickly search and find what they’re looking for.
Everyone should be able to use your website, regardless of their abilities or disabilities. Accessibility is about creating fair and equal access to the same experiences for everyone. Disabilities can be:
Ensure that your website is accessible by conducting an audit and following Web Content Accessibility Guidelines (WCAG), which is an international standard for web accessibility. It offers a complete checklist and success criteria to make your web content fully accessible, such as including image alt text, implementing keyboard navigation, or providing text alternatives for non-text content.
Taking the step to make your website accessible not only expands the size of your potential user group but improves the experience for existing users as well.
HubSpot’s website includes a High Contrast toggle switch in its header to accommodate people with low vision or visual impairments. When switched on, the orange color used for its primary and secondary buttons turns into a vibrant blue, increasing the color contrast for these important calls to action and making it easier for users to notice them.
How can you make your website seem trusted? Users are more likely to bounce from your website if it doesn’t seem reliable or secure. Trust builds loyalty, which is helpful in building up a large user base.
Visual aesthetics tend to lend themselves to credibility, as users inherently believe that attractive interfaces are more usable. This is known as the Aesthetic-Usability Effect and can help a website seem more trusted.
Users also tend to use products or services that have been vetted by others. This can be shown in the form of testimonials or reviews. Hearing positive opinions from others or being endorsed by a celebrity can boost the credibility of your website to otherwise skeptical users.
Field service management app Jobber boasts its credentials on their website, including the number of home service professionals and industries that are using and trust its services.
They also feature testimonials from existing customers, which makes Jobber seem more reliable, as other people are satisfied with the service. This gives Jobber credibility and increases the chances of prospective customers signing up for their services.
Your website should ultimately create value for your users and your business. Think about what your value proposition is. What makes your website unique and why should users use it? Perhaps it helps users find specific information about a topic or saves them time completing a task.
Focus on the benefits that you can provide instead of the features you can develop. This way, your website will create value in the form of addressing a user need or solving a problem. The bigger the problem you aim to solve, the higher your chances are of attracting more users.
Shopify’s website communicates the benefits that users would have by using their solutions, such as reaching new leads, engaging with customers, and exploring customer insights. The focus of the copy is less on the features themselves and more on what value the user can get from using the features.
While the UX honeycomb aims to achieve balance across the seven components, you should consider the relationships that each of them plays in your website’s design.
In theory, it would be great to optimize your website in all facets, but in reality, progress takes time. Stakeholders will have different opinions on what can be done and what should be done to improve the website.
So, it’s important to work together to establish priorities and make tradeoffs according to your business objectives and user needs. Using a prioritization technique, such as the Eisenhower Matrix, your team can prioritize roadmap items based on urgency and importance.
For example, a banking website might prioritize being credible over desirable, as trust could be a more significant factor to their business than visual appeal. If their users care more about having their personal data secure than the aesthetic of the website, then it makes sense to make that tradeoff.
Another example could be the relationship between accessible and usable. These two components are closely related, as one could argue that an inaccessible website is also unusable for many people. However, depending on the context, either component could be prioritized over the other.
A government website might put more emphasis on accessibility to avoid potential fines or lawsuits. On the other hand, an ecommerce website might value usability in order to create a seamless checkout experience and optimize its conversion rate.
When it comes to designing a holistic experience for your website, each component of the UX honeycomb is important to consider. But, it’s the relationships between them that elevate the user experience, as they influence and impact each other.
Design is an iterative process by nature, and you won’t get it perfect the first time. As you understand how your users receive the website’s design and uncover deeper insights about their needs, continue to make incremental changes to improve the experience over time.
Both qualitative and quantitative research can lead to insights about components of your website’s experience that are lacking. By setting a research goal, you can target specific components, like desirability or findability, in order to understand how they can be improved.
For example, conducting user interviews can lead to a deeper conversation about a user’s thoughts or feelings while using your website, which then reveals that they often get lost or confused when navigating.
Or using a digital analytics tool to track performance metrics can help you identify trends and patterns in your website usage, such as a large number of users abandoning their cart when checking out.
Grounding your design decisions in research and data ensures that you are focusing on the right problems. This will help your website move closer towards providing a holistic experience that your users will enjoy.
The UX honeycomb framework is a great way to communicate the different components that contribute to a holistic user experience. Each component plays a role in ensuring that users are satisfied with a website. But they must not be thought of separately, as they are closely influenced and impacted by each other.
Using this framework, designers should work with their cross-functional team members to prioritize user experience in their website design. By understanding our users’ needs, goals, and frustrations, we can create usable, engaging, and accessible website experiences that build strong connections with our audience.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Design thinking doesn’t have to be all serious and structured. These 16 fun and easy exercises will help you and your team get creative, stay focused, and solve problems with a fresh perspective.
Nostalgia-driven aesthetics is a real thing. In this blog, I talk all about 90s website designs — from grunge-inspired typography to quirky GIFs and clashing colors — and what you can learn from them.
You’ll need to read this blog through and through to know what’s working and what’s not in your design. In this one, I break down key performance metrics like task error rates and system performance.
Users see a product; designers see layers. The 5 UX design layers — strategy, scope, structure, skeleton, and surface — help build UIs step by step.
Learn more →
