Brown design patterns

Interface decisions that don’t help anyone.

We all know what dark patterns are. Misleading interfaces meant to trick users for the sake of profit. I’m writing today about brown patterns. Dumb interface decisions that don’t help anyone.

1. Custom Scroll Inertia

Have you ever scrolled on an article and suddenly found yourself at the bottom of the page? That’s thanks to customized scroll inertia.

The devil wins when you use customized scrolling. Live example.

I believe custom Scroll Inertia was first a well-intentioned attempt to bring older computers into the age of smooth scrolling. Unfortunately it’s brought us all down(it was a pun did you like it.)

2. Scroll Wells

Have you ever thumbing down a mobile page, and suddenly become stuck on a map? This happens when the map plugin doesn’t have the “Two-Fingers Enabled” setting enabled, and misinterprets your scroll event as a pan gesture. It’s the virtual version of spinning a globe really fast.

The largest problem facing Syria. Live example.

3. ‘Flodals’

It’s a mODAL that FLoods the screen. DID YA GET IT

Zillow gets it. Live example.

Quick Question: Why not just put the modal’s contents in a separate page? What’s important about keeping this content in the context of the search results? Okay I admit that’s more than one question.

4. Sharp Background Images

I’m all for subtle background patterns. But background images make me lose focus. Shouldn’t the emphasis be on the interaction in the foreground?

Graphic Designers doing UX 🙄. Live example

5. When a Site Blocks “Open in a New Tab”

Whenever I compare places on AirBNBs I like to open every listing on a separate tab, then evaluate each tab individually. It’s apart of my creative process for finding cheap AirBNBs.

However, some sites like Google Drive block the “Open in a new Tab” functionality. Why would you do that?

You’re unable to open a folder in a new tab in Google Drive. Live example

Using ⌘(or Ctrl)+ Click to open a link in a new tab is an established pattern, and we should allow this functionality by default.

6. Button Copy in All-Caps

Material UI’s buttons are unnecessarily aggressive. Nuff’ said.

EVERYTHING IS OK. Live Example

That’s it For Now

If you have any design patterns that are lose-lose for business and user, I’d love to hear them. Drag them in the comments section below.