What Makes a Website Engaging? An introduction to creating a positive user experience (UX)
Web designers are frequently asked, "what makes a website engaging?" This is a broad question with many answers. One way we can begin to answer it is by reframing it into a question that is heavily researched:
How do I achieve good user experience (UX)?
Definition of UX: The overall experience of a person using a product such as a website or a computer application, especially in terms of how easy or pleasing it is to use. -Oxford Dictionary
The field of UX has evolved to include many bodies of research, practices, processes, and methods. We can take research from these fields to understand key themes:
- Usability
- User Interface Design
- User-Centered Design
Each of these topics contains more depth than we can describe in one article, but let’s look at some basic concepts.
1. Usability
What is usability, and why is it important?
As site visitors, we expect that at a minimum, we will be able to reliably navigate a website and its features without major functionality issues. However, presuming a product is free from these bugs, there still are many other factors that contribute to it being user-friendly.
In the field of design, we evaluate usability to examine how easy a product is to use.
In application and web design, usability is critical; if an app or site is difficult to use or too overwhelming, people will leave. Often quickly.
In 2021, with countless distractions surrounding us at all times, a product has very little time to prove its worthiness of our attention; thus if a site is to engage its visitors, it must clear the hurdle of basic usability.
What are some principles of usability?
In 1994, Dr. Jakob Nielsen, co-founder of Nielsen Norman Group and esteemed usability expert, established 10 Usability Heuristics- broad yet crucial guidelines for usability. They consist of:
1. Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
2. Match between system and the real world
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
5. Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
6. Recognition rather than recall
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
7. Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
The Value of Usability Heuristics
Nielsen Norman Group has regularly revisited these heuristics, finding that they remain true even 26+ years after being written. They are thus highly regarded and referenced for their credibility and value.
It is important to note that while positive user experience includes strong usability, the two terms are not interchangeable; usability is crucial to a positive experience, but it is not sufficient alone.
2. User Interface (UI)
What is the user interface?
Usability is something that is achieved. How it is done may be in part due to UI- the User Interface- the place where humans interact with a digital product.
As opposed to a website’s code, the UI elements are those that users perceive or engage with. It can include buttons, color, typography, icons, or branding. UI design is often what we think of as the “look and feel”, and unsurprisingly, it can make a big difference in how usable a product is.
For example:
Take Usability Heuristic #8- Aesthetic and Minimalist design: “Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
In other words- keep content to the essentials, and remove unnecessary pieces of information that may distract users from finding what they really want. Although there are many non-visual ways that this concept may be expressed, folks are likely to be most familiar with minimalism as a value of visual design.
Consider these two homepages from Macy’s:
Macy’s homepage in 2014
Macy’s homepage in 2022
In the 2014 version of the homepage, the interface is cluttered; there are many pieces of information. A user has to read or look through each element to find what they want. And ultimately, they may have difficulty, risking lower engagement or even the user leaving the site.
Whereas on the more recent homepage, the amount of breathing room (known as “whitespace”) helps the user scan the interface and digest information more quickly. They will have an easier time finding what they are looking for, and have a higher chance of staying engaged with the content.
This is just one of many principles of visual design- as expressed through the UI- that contributes to usability and an end-positive user experience.
To read about other principles, such as- consistency, visual hierarchy, relationships between content, alignment, and contrast- view more from Nielsen Norman Group.
3. User-Centered Design
What does it mean for a design to be "user-centered," and why does it matter?
That said, usability principles and interface design primarily serve one main purpose- to help people find what they want and need. Functionality or visual aesthetic alone can only go so far; designers and researchers have learned that a product’s success depends on how well the design meets the needs of the person using it.
Thus, since the late 1970s, the field of User-Centered Design has been asking questions such as:
- “Who are the people using your product?”
- “What tasks or goals are they trying to accomplish?”
- “What level of experience do these users have with your website or other websites?”
- “In what environments will users be accessing your site?”
By asking these questions and truly understanding the answers, designers have learned what site visitors come to expect when they are landing on a site, sometimes for the first time. In anticipation of their needs, designers can prioritize certain information or functions, address areas where people may get lost or make mistakes, and mold the structure of a site to users’ expectations.
And ultimately, people will stay engaged when they find what they are looking for.
Summary
There has been significant research in the fields of usability, UI design, and user-centered design. To an extent, we can take these findings, and apply them generally; researchers have established principles that can be generalized to the majority of web users. However, overall user engagement still depends on their specific tasks, goals, and needs.
In the end, an engaging website incorporates usability and UI design wisdom, and will ultimately anticipate and deliver what a site visitor wants.