What are Dark UX Patterns and What Makes Good Design?

What is UI/UX, the differences between the two, what makes for good design, and what are dark/gray patterns in UX?

User Interface

The user interface is anywhere that a human interacts with a machine. Typically combined with peripherals such as a touchscreen or mouse and keyboard. All while the machine gives feedback to the user to help with further interaction or to aid in decision making processes.

You are probably scrolling through this page with your finger on a touchscreen or scroll wheel on a mouse. Certain things standout to you such as the scroll bar, which indicated how long the page is and helps you decide if you want to continue reading or bookmark and save for later.

What you are using is called a graphical user interface (GUI), there are also voice-controlled interfaces (VUIs), gesture-based interfaces (for VR), and more.

User Experience (UX)

User experience is very much a subjective thing. While some users may like things to flow or operate a certain way, other might find that same flow and operation to be tedious and frustrating. UI ties into UX quite a lot. How easy is it to find items in the menu, is the menu cluttered, do pages have unnecessary information on it.

Tying these together makes the world of difference to the user; how easy is it to access orders on an eShop (orders button on the home page), check emails on your email client (nothing getting in the way on the inbox view), or access your favorite movies on your streaming services (favorites list being at the very top of the page).

UX does go deeper than this: how easy is it to change settings, notifications, profile display info, etc. Making all of these thing as easy and frustration free will keep users and bring in new ones as word spread of the good UX and ease of use.

Another big factor for UX is how seamless everything works. If a user has to wait longer than 5 seconds for an order to process they might think something is wrong. If it takes 10 seconds for a post of theirs to populate on a feed then they might become frustrated. If they don’t receive notifications about a new episode of their favorite show they will be furious.

Good UI/UX

In a nutshell — making items as easy and simple to find as possible, at least the core items of your service anyway, is what good makes for good UX.

Making good UI/UX is a complicated balancing act. If it takes too long for things to process or populate then users get frustrated, on the other hand if some things happen too quick then they think there’s no way it could have worked that fast.

The appearance is one of the biggest factor. User judge designs and layouts very quickly. If pages are too busy or cluttered then they might opt to find a different service for their needs. If it’s too quiet and simple then they might think the service won’t be robust enough for their needs.

Sometimes design flaws can be forgiven if the service offers the quickest ways to navigate and get tasks done. The best philosophy to follow is to get as much done in as little interaction from the user. 1 click orders, 1 click “play season” button, etc.

The service should also be enjoyable to use. If you make the experience fun and memorable then they will likely come back. Think about that one restaurant or bar you currently or used to visit all the time, not for the environment or good food, but the experience and great staff. That is another goal to shoot for.

  • Clear labels for buttons and controls so users don’t have to guess where to find things or what controls do.
  • Highlight important things in bold or with shadows.
  • Use font sizes to your advantage. Show the most important thing in the largest font (title), then the second most important thing in a medium sized font (price/description), and other minor details in a normal sized font (actors list, tech specs).
  • Don’t hide things or trick people by swapping layouts in certain pages (more on that in the next section).
  • Consistency. Don’t leave users guessing if one page will be different than another. Make all pages of the same type look the same or as similar as possible.
  • Give feedback when users do things (loading bars, “post successful!”, etc).
  • Guide the user in meaningful ways.

Use all of these tips and you’ll have a growing user base in no time.

Bad Design (Dark Patterns)

Dark patterns are designs or patterns that trick users into doing things they didn’t want to do or weren’t aware of doing.

Think of how many times the “newsletter” check mark was automatically checked during a registration. When the yes option is swapped or made smaller when trying to cancel a service or opt-out of things.

Sometimes it’s way deeper than that. Sometimes it’s burying the cancel service or delete account feature so deep you’d need a guide to do it. — Or worse yet, forcing you to contact customer service to do it.

Just think for a moment. Without searching. Do you know how to delete your Amazon account? You’ve probably never even seen anything remotely close to that in your account settings before. That’s because they hide it away in their help forums.

Maybe you’ve experienced dark patterns in a different way like in a freemium app that uses colored (filled-in) buttons as a confirmation and an outline button as a decline. Then when you run out of lives you click on the outline button only to be brought to an in-app purchase screen. The dev swapped the buttons but not the colors, thus tricking you to click “yes, purchase more lives”.

All of these are dark patterns. They are a nuisance and should be fought back against. There are many more, but there are some of the most common.

If you make a good UI/UX then there’s no need to hide away account closure features or trick users into paying more for things they didn’t intend to. Users will go out of their way to give back to the devs in some way (in-app purchases, paid premium features, etc) if they enjoy the service.

Software Engineering student at Operation Spark and WebDev hobbyist.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store