Source: Midjourney

Understanding User Delights in Web User Experiences

This is Post (2/2)
Post (1/2) — The Duality of Web User Experience: Addressing Frustrations

This is the second post in a two-part series where I go over Vitaly Friedman’s The State Of Usability In 2023 article which showcases a list of user delights and frustrations. In this post, I will go thru the list of delights and the reasoning behind each one of them.

An overview of some of the common delights that users experience on the web in 2023 (source)

In The State Of Usability In 2023, the author Vitaly Friedmandiscusses common frustrations experienced by users in web user experience and ways to improve it. Vitaly suggests that a good user experience should be calm, fast, and accessible. It includes large, legible text, large checkboxes, and radio buttons, input boxes that look like input boxes, clear focus/active states, simple password requirements, large, tappable areas, helpful error messages, and user input that persists. In addition, features such as automatic drop-downs and undo, edits, cancellations, pausing auto-rotating carousels, infinite scroll with a sticky footer, reliable “Refresh” and “Back” buttons, videos with playback speed options, videos with closed captioning, reliable browser auto-fill and password generation, filters applied manually, via the “Apply” button, and magic links for sign-in are important.

Here is an extensive list of user delights that were discussed in the article. Let’s dissect the reason for each of these delights in this blog post.

✅ Calm, fast, accessible experience
✅ Large, legible text
✅ Large checkboxes and radio buttons
✅ Input boxes that look like input boxes
✅ Clear focus/active states
✅ Simple password requirements
✅ Large, tappable areas
✅ Helpful error messages
✅ Error messages not covering text input
✅ Error messages not appearing as toast messages
✅ User input persisted on refresh
✅ Drop-downs opening on tap/click
✅ Easy undos, edits, cancellations
✅ Pausing of auto-rotating carousels
✅ Infinite scroll with a sticky footer
✅ Reliable “Refresh” and “Back” buttons
✅ Videos with playback speed options
✅ Videos with a closed captioning option
✅ Reliable browser’s auto-fill and password generation
✅ Filters applied manually, with the “Apply” button
✅ Magic link sign-in experience

✅ Calm, fast, accessible experience

Providing users with a predictable, reliable, and comfortable experience is the key to creating a calm, fast, and accessible user experience. By providing clear, easy-to-use interfaces, rapid loading times, and intuitive navigation, it minimizes confusion and frustration. Providing the necessary tools and features for users with disabilities is also part of this type of design.

✅ Large, legible text | ✅ Large checkboxes and radio buttons | Large, tappable areas

To make it easier for users to read and interact with the interface, large, legible text, large checkboxes, and radio buttons are essential to product design. It is easier for users to read and navigate website and app content when the text is large, and with large checkboxes and radio buttons, the user will be able to select options and complete tasks much more easily. As a result of incorporating larger, more visible elements into devices, products can improve the user’s ability to read and interact with the interface, resulting in a more efficient and easy-to-use experience.

✅ Input boxes that look like input boxes

Users can easily and quickly understand what to do when they see an input box that looks like an input box rather than another component because they can see what the input box is supposed to do clearly. Input boxes that look like input boxes provide users with clear visual cues that they are supposed to enter information, whereas input boxes that do not look like input boxes can be confusing and cause users to hesitate or make mistakes, as well. Users can better interact with the interface by having input boxes that look like input boxes, resulting in a more efficient and user-friendly product.

✅ Clear focus/active states

Having a clear sense of focus and active states for each UI element is essential in the design of a product because it helps the user understand which element it is that they are interacting with at any given time. For users to understand what actions they can take and how to interact with the interface, it is vital to have a clear focus/active state. Also, this helps users navigate and interact with complex interfaces more easily by letting them know their current location and status.

✅ Simple password requirements

Login designs should include simple password requirements because they make it easy for users to create strong passwords and understand them. Password requirements that are simple help users create strong passwords that are easy to remember and type, without the need for complex rules and requirements that are hard to understand and follow. Additionally, simple password requirements reduce the likelihood of users writing down or sharing their passwords, which can increase account security. By making it easier for users to create and remember their passwords, simple password requirements create an efficient and user-friendly experience.

A sample simple password requirement maybe something like this:

• Passwords must be at least 8 characters long
• Passwords must contain at least 1 uppercase letter, 1 lowercase letter, and 1 number
• Passwords cannot contain your username or email
• Passwords should be changed every 90 days

✅ Helpful error messages

Providing clear, actionable information about what went wrong and how to fix it is a necessary aspect of user experience. Helpful error messages should be clear, concise, and informative. Also, they should explain where the error occurred and how it relates to the task at hand. You should also use language that is easy to understand instead of technical jargon. The user can better understand and correct errors by providing helpful error messages, leading to a more efficient and user-friendly experience.

✅ Error messages not covering text input

Users will have difficulty understanding error messages covering text input. Users should be able to see the error message and correct it without having to re-enter all their information again by displaying error messages in a manner that does not cover their text input.

✅ Error messages not appearing as toast messages

Toast messages are small pop-up notifications that appear for a short period on your screen, usually, at the bottom of the screen, that can disrupt and confuse users. Error messages should not appear as toast messages because they can be disruptive and confusing. They can occur at any time and cover up significant content or buttons, which can be confusing and frustrating for users. They need to be made aware of what the message is referring to or how to resolve it. Error messages should be displayed in the context of the task or action the user was trying to complete. This will allow the user to understand the error and take appropriate action without feeling overwhelmed.

✅ User input persisted on refresh

In case a user accidentally refreshes the page or if a network error results in the page being reloaded, this feature prevents them from losing their work. As a result of persisting user input on refresh, forms can reduce frustration and save users time. This feature is usually implemented by storing the data in the browser’s local storage or cookies. It is a common feature in web forms and is considered a best practice as it improves user experience and speeds up the process of completing forms.

✅ Drop-downs opening on tap/click

This feature allows users to access content from the drop-down menu without leaving the page. Forms, navigation menus, and other interactive elements frequently utilize this feature. The user’s experience is improved by making it easier for them to interact with the interface and access the content of the drop-down menu quickly and easily. Often, javascript or CSS is used to implement this feature by setting the dropdown’s display property to block on tap/click.

✅ Easy undos, edits, cancellations

Having a way to undo, edit, or cancel actions is an imperative part of product design. This feature is especially useful for forms, where users need to modify input or undo a submission without starting over. Users can correct mistakes and make changes to actions without having to start over from scratch. An undo, edit or cancellation function should be clearly labeled and easily accessible, for example through buttons or other clear affordances. A user should also receive clear feedback about the status of their action, such as whether it was successful or if it failed.

✅ Pausing of auto-rotating carousels

To stop an auto-rotating carousel from automatically rotating through its slides, users can pause it. If users need more time to read or interact with a specific slide, or if they want to control the speed of the carousel themselves, this feature is particularly useful. By allowing users to control the content they view, it improves their experience, reducing the possibility of feeling overwhelmed or disoriented. If the user interacts with an auto-rotating carousel, a pause button can be added to stop the rotation. This allows users to stop the auto-rotation of the carousel at their convenience and has more control over the information they are viewing.

✅ Infinite scroll with a sticky footer

Users can scroll through a website’s content indefinitely with a sticky footer, allowing them to still access the footer of the website while scrolling through the content. The footer contains important information such as contact information, links to policies, or other important pages. The sticky footer stays fixed at the bottom of the screen as the user scrolls through the content. In this way, users can access the footer at any time without having to return to the top of the page, improving their experience. In blogs, social media, and e-commerce websites where a lot of content is quickly accessible, infinite scroll is often used. Reducing the number of scrolls to access information, allows for a seamless browsing experience.

✅ Reliable “Refresh” and “Back” buttons

Users can refresh their current page or go back to the previous page with reliable “Refresh” and “Back” buttons. In case of issues with the page or when they want to update the content, the “Refresh” button is useful. By using the “Back” button, users can return to the previous page they were on, which is useful when reviewing previously viewed information. Whenever you press these buttons, they should provide clear feedback and should work as expected. They should also be placed in a consistent location, easy to find, and clearly labeled to indicate their purpose. By providing easy access to information and improving navigation, reliable “Refresh” and “Back” buttons make navigation easier.

✅ Videos with playback speed options | Videos with a closed captioning option

Users can improve their viewing experience by selecting playback speed and closed captioning options. It is possible to control the speed at which the video plays by using playback speed options. This feature is useful for educational videos or when users want to review a portion of a video they just watched.

If you are deaf or have trouble hearing, or if you are in a noisy environment and have trouble hearing the audio, closed captioning is useful for you. Furthermore, non-native speakers can use this feature to improve their language skills.

There should be clear labeling to indicate the function of both playback speed options and closed captioning options. Additionally, they should be compatible with all devices and platforms. It improves the user’s experience by allowing more control over the video, and by making it accessible to all users.

✅ Reliable browser’s auto-fill and password generation

Creating a new account is more convenient and secure with reliable browsers’ auto-fill during signup and password generation when choosing a password. Using auto-fill, users can save their personal information and the fields will be automatically filled in when they sign up for a new account, saving them time and eliminating the need to enter them manually.

Users can use password generation to generate strong and unique passwords that they can save in their browser or password manager. This way, users don’t have to come up with and remember complex passwords, so they’re less likely to use weak passwords.

The browser should enable these features by default, and they should be easy to use and understand. They should also work on all devices and platforms, and provide clear feedback if enabled. In addition to providing more security, these features make it easier for users to create new accounts.

✅ Filters applied manually, with the “Apply” button

By clicking the “Apply” button, users can apply multiple filters at once, rather than having the content filter automatically after each filter selection is made. Users can preview the filtered content before applying changes, giving them more control over the filtering process.

A clear label and easy-to-find “Apply” button should make this feature easy to use. It should provide clear feedback when filters are applied and work as expected. It should group the filter options logically and indicate the selected filters.

By allowing users to preview filtered content before changing it, this feature improves their experience. By doing so, users are less likely to accidentally filter important content out and can find what they’re looking for easily.

✅ Magic link sign-in experience

Using a magic link, users can sign in to a website or app using a unique link sent to their email. By eliminating the need to remember and enter login credentials, users can log in more conveniently and securely. This feature improves the user’s experience by making the login process more convenient and secure. Link validity should be indicated. This feature should work across all devices and platforms.

In Slack, for instance, users receive an email with a unique link to log in to their account when they sign up or reset their password. This link is valid for a limited time and can only be used by the intended recipient, providing an additional layer of security.

That’s the end of this short yet hopefully insightful read. Thanks for making it to the end. I hope you gained something from it.

👨🏻‍💻 Join my content verse or slide into my DMs on LinkedIn, Twitter,Figma, Dribbble, and Substack. 💭 Comment your thoughts and feedback, or start a conversation!