Dark Patterns in UI Design

Dark Patterns in UI Design

For this month’s blog post we’re looking at website user interface (UI) design and user experience (UX) design, and in particular something called Dark Patterns.

UI and UX

When designing a UI, there are always choices to be made with regard to both the visual design of the application and the UX. UX is all about how the user interacts and navigates through an application and how that makes them feel. Usertesting.com use the following description to highlight the difference between UI and UX.

“At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements — like buttons and icons — that you use to interact with a device. User experience (UX), on the other hand, is the internal experience that a person has as they interact with every aspect of a company’s products and services.”

So, while UI design may concentrate more on the look and feel of a user interface, UX goes far beyond that. Usertesting.com states the user experience journey includes:

  • The process they go through to discover your company’s product
  • The sequence of actions they take as they interact with the interface
  • The thoughts and feelings that arise as they try to accomplish their task
  • The impressions they take away from the interaction as a whole

Dark Patterns

This introduction to UX leads us to the topic of deception in UI design. Deception in UI design happens when a website, advert or other UI aims to confuse or deceive the user in an attempt to deliver the desired result. One example of this comes via Twitter from Cory Doctorow.

In this example, you have a mobile advert designed to deceive the user into pressing on the screen and thus taking you to its website. This is at the more extreme end of the deception scale for UI design, but once you’re aware of these attempts at outright deception you start to notice how widespread it is.

In 2010 the website darkpatterns.org was created to name and shame those companies who aim to deceive. The term dark patterns is used to describe any attempt by a UI to confuse or deceive the user and is detailed in great detail by A List Apart. Below is an example they give of a very common dark pattern.

They state: “Dark patterns tend to perform very well in A/B and multivariate tests simply because a design that tricks users into doing something is likely to achieve more conversions than one that allows users to make an informed decision.”

We can see in the above image that examples A and C are easier for the user to understand, and while it may result in fewer people subscribing to the email list, they don’t attempt to confuse the user. Example B, however, uses double negatives in the first statement, but not in the second. The reason for doing this is to deceive the user into signing up for something they likely don’t want.

The darkpatterns.org Hall of Shame provides a wide variety of examples, from Facebook ads to unsubscribing from Yahoo Sports.

Here at Kyria we always aim to be as honest as possible, both in the way we deal with customers and in our UI design. We understand and acknowledge that while our UI and UX design can always improve and aim to be better, we have never, and will never, set out to intentionally deceive users. We are committed to never appearing in the Hall of Shame!

Simon Heptinstall,

Marketing Officer