Build delightful and functional UIs with user intent in mind

Build delightful and functional UIs with user intent in mind

Adrian Bece

Published on Mar 18, 2021

7 min read

Subscribe to my newsletter and never miss my upcoming articles

When working on a frontend project, we usually get design, specs, and user stories describing how UI elements should look and what function should it have. We use those designs and specs to create the UI and then we launch the project.

That is all well and good, but users usually won't be aware of the functionality of individual elements. They will either rely on:

  • Their instincts and experience, i.e. their expectations
  • Additional information surrounding the UI element

If users see a hamburger menu icon, they'll expect some sort of the main menu to appear when they tap on the icon. But if they see an "arrow down" icon next to the website logo, they won't be sure what will happen when they click on it. It could be the main menu, website switcher, language switcher, etc.

Alt Text There are more categories below "Libreria" (user needs to scroll), but user won't know that at first

Value of UX testing

This is why UX testing is so valuable. Everyone on your team, including you will know how the website works from the first line of code to the last, and every functionality and interaction on the website will be clear because you created it, of course.

Having someone take a look at your project that isn't closely familiar with it can yield valuable data and can help pinpoint bottlenecks and usability issues.

I am currently offering the Frontend and UX audit service, so please do check it out if you are interested.

User intent

We established that user has their own expectations on how UI should work based on their previous experience and how the UI itself is presented and if it's consistent.

But what about their intentions on the site? Let's take a look at the example.

Alt Text

User intents to use the sidebar navigation (category filters under "Shop by" section) on the left after they used the search above the menu. The user then moves their mouse downwards but the mega menu activates responds on accidental hover and covers the entire left navigation! The user now has to close the mega menu so they can use the element they've intended to use.

So you can see how even when we create UI elements with specs and design in mind, we still have to take the bigger picture into consideration:

  • How the element will interact with other elements on the page
  • How will the UI element respond to proper user intent

Basically, we want to make sure that there are no accidents and surprises when interacting with the UI and we want to make sure that UI responds to user interaction only when the user expects it..

Consider another example.

Alt Text

Red arrows mark the natural path user would take when moving the cursor from the menu to the link, but that would cause the menu to change to another submenu because it reacts on hover. The green arrow marks the safe path that developers created and know how to use. But that doesn't align with user experience and intent when using this UI element.

How to avoid accidental interactions

  • Use delay - adding setTimeout and clearTimeout with 200ms timeout value to the mega menu would fix the issue. The user wouldn't even notice this slight delay and user will feel like they have full control over the

  • Consider interactable area - interactive area might be too wide or narrow. Make sure that the dimensions where the user can activate a hover functionality are optimal.

  • Make sure that there is enough information that leads the user down the proper flow and teaches them how to use the UI element

Here is the navigation I created that leverages the delay and optimized the interactive area to make sure that navigation responds to user intent.

Alt Text

Conclusion & extra

We've seen how user expectations and intent can reveal nasty UX issues on our website. These issues can go completely undetected if it's not being tested by someone who doesn't have a complete understanding of website functionality and code.

We've also seen how we can take user intent into consideration and create UI elements with awesome UX that feels delightful to use.

I would recommend reading "Don't make me think" by Steve Krug to better understand user intent and web UX in general.

These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Buy Me A Coffee

Thank you for taking the time to read this post. If you've found this useful, please give it some likes, share and comment.

Share this