clairrock

Dark Patterns: It’s A Trap!

 

UX Design has many aspects, but not all of them exist to make the users experience better. Some of these designs are made to benefit a company, and trick users into bad experiences. This type of design is called Dark UX, or dark patterns. Dark patterns are tricks that cause users to buy or sign up for things they never intended to.

Let’s talk about a couple of those patterns here.

First up is a design known as the roach motel. This, like most dark patterns, is surprisingly common. The roach motel design makes it incredible easy for a user to get into a certain situation, but difficult to leave. An example of this dark pattern would be having a difficult time finding or being able to unsubscribe from a mailing list or a service, that was initially easy to sign up for. If you go to unsubscribe from that mailing list or service, and are asked to enter the email address, or told you need to call a toll free number instead, this is a roach motel. Hulu uses your emotions against you with this dark pattern, playing a video to make ‘really really sure’ you want to cancel your subscription. Even being asked to enter a CAPTCHA phrase to unsubscribe from something is a roach motel!


Next up, is an insanely common dark pattern that most people in this day an age have probably experienced, this would be forced continuity. Forced continuity is when a user is asked to enter credit card information for a free trial, which they forget to cancel and are in turn silently charged for services without warning. Almost every website that boasts a free trial period will ask for credit card information, making this an incredibly common dark pattern. This is something many Amazon Prime users have experienced, after signing up for a free trial, or a student membership, only to be suddenly surprised by membership fees once those periods are expired.

Finally let’s talk about disguised ads. These tricky little bugs are advertisements designed to look like they belong on the website they are placed, but will cause a user to end up at a different, most likely, undesirable destination. This dark pattern is strangely prominent when users are trying to download or install a software from a website. This would be seen as an advertisement that looks like the download button, causing a user to go to a site they never intended.

These dark patterns can cause a user to have a bad experience on their own, but it is not uncommon for them to be seen together. Go back to Hulu for a second, not only are you required to give your credit card information when you sign up for a free trial, they really don’t want you to cancel your subscription when that trial is up. While these might not be witnessed at the same time, forced continuity and roach motels are both part of Hulu’s user experience.

Don’t forget there are many other types of dark patterns, so keep your eyes open for them.

 

References:

 

Dark Patterns

Kyle Gawley

The Verge

User Testing

Design Critique: Budget Bytes

 

 

Budget Bytes is a frequently updated website filled with delicious and inexpensive recipes. This website encourages people to smart about their budget, while still allowing good quality and delicious food to be an every day part of life. Budget Bytes is an easy-to-use resource for a wide variety of budget friendly dishes that also covers a variety of diets. This critique is being done on the mobile version of this website, as I use an iPad Pro as my main computing device.

At first glance the discoverability of Budget Bytes seems really nice, everything seems to have a home and it’s put together quite nicely. Within the first few moments on the site the layout might seem a little overwhelming with some of the advertisements, but once you realize the ads versus the content everything comes together nicely. It is extremely easy to find any recipe that has been hosted on the website, if you know the title you can simply search for the recipe and it will come up.  If you only know the main ingredient that was used, the recipes section of the website is actually broken down by main ingredients.
This allows users to simply select ‘chicken’ and find every recipe with chicken in it. Budget Bytes is a blog format so all recipes are listed based on the original post date. The discoverability of this recipe organization is so nice, especially when compared to the recipes section on the website chefsteps.com, which simply lays out all of the recipes onto one page. You can search for an ingredient used in a recipe, to bring up a list of recipes using that ingredient, but there doesn’t seem to be a whole lot of organization behind the search results. The results will usually begin with the searched item and then start to offer a seemingly random selection beyond that.

Playing right alongside the websites discoverability, Budget Bytes has some really great mapping incorporated into it’s design. Almost every single action on the website results in some type of feedback. From the main page you are given an introduction to each recipe followed by a ‘read more’ button, once you click that button it changes from black with white text, to white with black text. Also from the main page, if you click on an image for a recipe, that is also being hosted on Pinterest, the image will signify that you can ‘Pin’ that recipe to your Pinterest board. Upon a second click on that image, either the Pinterest website or app is opened, allowing the user to complete that action.

The icons that afford sharing a recipe to another website immediately open the desired app with, for example, a previously constructed tweet to share that recipe with friends. Once you’ve finished sharing and return to Budget Bytes you’re greeted by feedback acknowledging that you’ve shared the recipe and thanking you for doing so. With the exception of a few icons, which appear to simply be dead links to websites no longer sponsored for sharing, every icon on the website affords this action. All icons that afford sharing also signify how many times a recipe has been shared on that platform with a smaller icon with the number of shares. 

 

 

Budget Bytes also contains a couple physical constraints, the first being navigation through the website itself. Users can only get to a page by searching for something, or clicking a link to physically change move from one page to the next. The size of the screen in which the website is being viewed is also a constraint, on a normally formatted screen the website fits together nicely, leaving everything in place and organized. If that format is changed however, it forces the the layout to change dramatically, causing advertisements and all other content on the right side of the page to the very bottom. The actual content on Budget Bytes creates a semantic constraint, by only showing an image a very small amount of recipe information the content actually affords scrolling down the page to continue reading the entire recipe.