Case Studies of Bad UX #000: Invisible Interactions and States

Don’t forget the pieces you don’t see.

Quarantine has me slightly more…vexed? At the various states of bad User Experience/Interaction patterns I continually run into. So, rather than just internalize it, I thought it could be good to write about it and explain how it could be improved.

Partially case study, partially rant with teaching moments.

To start off with, for the designers out there who don’t code much, you should know that every object on a screen can have additional pseudo states you design around. If you wanted you could have the text on the screen go through an animated rainbow every time you hovered on it.
https://codepen.io/mhsenkow/pen/qBOrYrV?editors=0100

https://www.w3schools.com/css/css_pseudo_classes.asp can explain more on that, my goal here isn’t to teach that exactly but just to give an example of where, these weren’t thought through very well and can be improved upon.

https://codepen.io/mhsenkow/pen/QWjpaVy this for example is showing some thoughts I’m having around hover/focus for an app I’m working on. I’m a big fan of poking at code sometimes as here, for example, doing so lets me see where the designs run up against code and cause potential issues.

(The design wants a 2pixel dashed border on focus….that could be done with borders OR outlines, but if you an outline you can’t get rounded corners….and if you do a border, it has to be coded right or the button changes size on focus state which then makes the buttons move around very slightly……but I’m digressing.)

This is my insurance’s website nav.

Not too bad right? But what about when you actually start to click, hover, or god forbid tab through the site.

Hover states are all across the board. The primary nav looks like this on Hover:

Where as the “My account” button, though you really can’t call it a button, has this interaction:

And then you have the buttons on the top right. This is their hover state:

What happens when we start tabbing through this interface…or just simply clicking into it.

And all of this could be improved by some general design changes.

  1. Be consistent in your usage of states.
  2. Provide as much click area as possible and make sure thats clear to the user.
  3. Don’t forget the unseen states like Hover, Active and Focus.

Sometimes, the best way to fix those invisible states is to turn them off entirely. Like for the main view of the page, you get this convoluted outline:

This is pretty common in software, even million dollar tech software sadly.

Simple design and dev answer: Turn that shit off. Don’t do it. You’re not helping people with Accessibility/Universal Access problems, you’re just gumming up the screen with visual garbage.

Focus states should help your user accomplish something. If they’re not get rid of them.

As I go down the page I run into more of this but it continues to be things that could be fixed by simply following some basic design concepts.

https://www.vitsoe.com/us/about/good-design

Not doing the full list because I’m focusing on just a few here but:

Good design is unobtrusive

Good design is aesthetic

Good design is thorough down to the last detail

Senior Product Designer / Design Tech Artist