HCI Lecture HW 1

Affordances, Gestalt laws and Dark patterns.

1/ Affordances :

-> Find and document (video/picture) one bad and one good affordance in your daily life (also digital). Explain why they are good or bad and suggest how you could fix the bad ones.

Let’s start with a good affordance. This a picture of my window controller and we can see that the bottom buttons are very simple to understand the use of. For example, the left one is used to close the window and the right one is used to open it.

A person using this controller is automatically able to understand how it functions.

As for the bad affordance, here we have a circular light switch (image a) as opposed to a regular switch (image b). When seeing this for the first time I didn’t understand if I was supposed to turn it or press on it to switch the light on. And after some attempts, the way to do it was by pressing the switch first then turning it to choose the brightness of the light.

Image a : Circular switch

Image b : Regular switch

So, the way the switch is made makes it hard to directly understand how to use it. A way of fixing this can be for example adding a +/- button for the dimmer.

2/ Gestalt Laws :

-> Find and document two applications of Gestalt laws in your daily life (also digital) which went wrong and suggest how to correct them.

I recently saw a post about someone redesigning famous logos that can be misinterpreted. This is definitely an example of the law of closure.

In these two picture we have the original design and the new corrected one :

Another famous example of Gestalt law is the sign fails that we see all over the internet. The fact that people are used to read from left to right makes it hard to read these two signs. The easiest way to correct this is not to write from up to down or to change the size of the words to make it more readable.

3/ Dark patterns :

-> Find and document two dark design patterns and discuss how you could redesign them to achieve the opposite.

A dark pattern is a user interface meant to trick users into doing things.

For example, disguised ads are very frequent online. When streaming a movie or a tv-show on the internet, it's very common to see the following image :

The user will think that the ad is actually the play button and when clicking on it he will be redirected to another website. When you're not familiar with this trick, and since the "advertisement" caption and the "x" are very tiny compared to the play button, it's very easy and common to fall for it.

And even with an ad blocker, I wasn't able to get rid of it.

So, to achieve the opposite, the ads shouldn't be disguised to look as a part of the main content of the website. They should clearly indicate that it's an advertisement and put another logo that displays what is the purpose of the ad.

I stumbled upon this meme online that represents exactly this dark pattern and I though that it would be interesting to put it here:

Another example is hidden costs. It's very common when shopping online that the price listed is different on the item and during the checkout process.

In this picture, it says that the delivery is free of charge for orders above 100€, but when I was about to pay, I noticed that this was written in small :

So, unless the client is very careful, he could be easily tricked into paying more than he thought he would.

To correct this, additional costs should be highlighted to users long before the final purchase stage.