Subtle interactions demand subtle awareness
There are many examples of subtle interactions that users perform repeatedly throughout their digital day. As design continues to evolve, and new trends emerge constantly, it’s crucial to not forget about these micro-interactions.
I’d like to discuss three concepts that I think are crucial to good user experience — but may have not crossed your mind.
Hit Boxes
I have a friend who told me about an article he read or a video he saw. (No link because this is pure hearsay.)
According to my friend’s source, the original Super Mario Bros. is a pristine example of a tutorial. The first level of the game requires no instruction, but by the end of the level, you know how to play the game. (This is an unrelated, but interesting point.)
While I was recently watching a video breaking down a Super Mario Bros. speed run, I was interested in hitboxes. In Mario, certain characters have body parts that go past the edges of their hitboxes. By being acutely aware of these hitboxes, it is possible to make Mario go “through” parts of certain characters without taking damage.
I was thinking about how this affects UX design and instances in which hitboxes could be manipulated for a better experience. My main thought has to do with pill-shaped buttons.
Pill-shaped buttons have grown in popularity over the years and seem to be a trend that will stick. They’re a great way to differentiate a button from the rest of the content, and they add softness to buttons that can make them more approachable.
However, for many years, we only ever saw rectangular buttons. And during these years, many users got used to pressing these buttons in the corners.
A good practice to account for this is to code rectangular hitboxes around pill-shaped buttons.
In this way, we avoid the frustration a user may feel when they click in the corner of the rectangle they assume is there.
Dropdown Menus
Whenever you take a UX course, they always start off by showing this image:
The main point is that design, when not considering user experience, will often fail to be used the way it was intended.
Now an almost exact replica of this issue has to do with dropdown menus that open sideways.
In this example, when the user hovers over “Womens,” the secondary menu opens up. However, when the user follows the red path to “Accessories,” they accidentally open up the “Kids” menu.
Accounting for this diagonal motion (or the shortest path from A to B) is an important consideration. Users will quickly experience frustration if they have to weave through a maze in order to accomplish a simple task. This subtle interaction, if done incorrectly, could have a direct impact on the number of conversions a site will see!
Don’t Move Until I’m Done
Chrome’s tabs don’t move until the user moves the mouse away from the tab area. That is all there is to this. It sounds quite obvious but there’s a larger message here.
When you x out of a chrome tab, the tabs to the right shift over, but they remain the same width. So by keeping the mouse in one place and clicking repeatedly, it is easy to quickly x out of multiple tabs. When you move the mouse away from the tab area, the tabs shift to fill the space.
On Safari, as soon as you x out of tab, they all resize. This can be obnoxious when attempting to close multiple tabs quickly because you have to keep adjusting to the new sizes to find the x. In some cases, I’ve even accidentally closed tabs I wanted to keep open because of this interaction.
The larger message is this:
Do not allow elements to adjust while the user is interacting with them — wait until they’re done!
The Takeaway
As a UX Designer, it can be easy to focus on the big picture and forget to consider subtle interactions, but taking the time to consider the customer journey on the micro-level can have a huge positive impact.
