Why you should always consider user intent and expectations when creating UI

When working on a frontend project, we usually get design, specs and user stories describing how UI elements should look and what 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 sees a hamburger menu icon, they'll expect some sort of a main menu to appear when they tap on the icon. But if they see a "arrow down" icon next to the website logo, they won't be sure what will happen when they click on it. It could be a main menu, website switcher, language switcher, etc.

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.

User intents to use the sidebar navigation (category filters under "Shop by" section) on the left after they used the search above the menu. User then moves their mouse downwards but the mega menu activates responds on accidental hover and covers entire left navigation! User now has to close the mega menu so they can use the element they've intented 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 user expects it..

Consider another example.

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. 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 mega menu would fix the issue. User wouldn't even notice this slight delay and user will feel like they have the full control over the

• Consider interactable area - interactive area might be too wide or narrow. Make sure that the dimensions where 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

Navigation that respects user intent and meets their expectations

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

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.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.