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

Rainbow focus state!….

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.

A good example of some bad states.

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:

Technically passes accessibility because the ratio is 4.66:1 but it could definitely be better looking right?

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

Normal State

Hover state. You can tell it is being hovered on by the fact it’s doing NOTHING.

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

Am I link or am I a button?

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

Ah.

Ahhhhh….well at least they’re consistently bad….

Well, until you get to any of the other pieces in the page.

And this entire row…All this information and the click area is that TINY LITTLE SQUARE???

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.

Static view of three hover states in action. Still not perfect, I would want to mess around with the specific colors, but it already is simplifying the navigation and the site.

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:

Good job, let the user tab into….the body? So the site is both reducing visual positives while also not providing additional usability! Win Win right?….

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.

See…no focus state no problem.

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