Lecture1 : Affordances, Gestalt Laws, Dark Design Patterns

publié le
Disclaimer : Labs and Lectures concern the course Human Computer Interface which I follow with my M2 "Virtual and Augmented Reality" at IPParis.

 Affordances

Affordances are properties or features of an artefact chich indicate a certain type of usage, often grounded in our physiology/body/nature. In other terms : when you see it, you know how to use it. I attached an example with door handles:
With those examples I understand what I need to do with those doors (as it’s written) but when I look at mine:

  • What do I do? It looks like a melt of all three, I turn it. I pull? I push? And, if I'm lucky, I understand I need to turn it in which direction? To fix this we just need to modify it by a more common one. 
Let's now think about a digital bad affordance. I saw an article about how my Facebook account is used by website and apps (without necessary click on "yes log in with Facebook account"). So I decided to change it, I hope it will be easy...


  • 6 steps to access the on/off buttons and one of them is hidden in " • • • " (which means "more"). Good job Facebook you hide it well ! This kind of information must be less hidden (1 or 2 clicks)

We will try to find a good one, I continue to live normally but with an observant eye on every artefact I use. Let's observe this picture : 


When you see it you know exactly what will happen : on the left, I chose the power of fans, the next one will choose the temperature and the last one which area will choose the target.

 Gestalt

Gestalt Principles are principles of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. 

In this lecture, we will treat two bad examples :


This sign indicates the direction of the train station, but how I read it? "Gare RER (D) S.N.C.F du Bras de Fer" or "Gare RER du Bras de Fer (D) S.N.C.F"? It's a small one without a huge impact - the idea is the same I will find the train station - but it's interesting that I've seen it every day without noticing it. 
One solution : with a panel a little longer all the words would be on the same line.

I was scrolling on Twitter and saw this meme :

I think this ad was created by the worst photoshop ever. First the arm looks gigantic. But the message "suit yourself" is even worse because it becomes "shit yourself"... Most cases of bad gestalt law are a bad separation as we see in the first example : in this example that is the opposite : the absence of a gap create a bad example of gestalt law.

One solution : 
On this example I've only put a little gap between. I'm not a pro of photoshop but it looks quite okay and the initial issues have been correct, we read "suit yourself".

 Dark pattern

Dark pattern is a user interface that has been carefully crafter to tricks users . Websites and apps want to make you do things that you didn't mean to.
              
  • Pinterest's example [nagging] : when you search something on internet in this example "bad affordance" and click on the website Pinterest you can consult what you are searching for (in this case about 40 pictures) but not all content on the website :
    • They're already solve this dark pattern if you look the first screenshot the inscription is discreetly suggested in the lower right-hand corner.
  • TikTok's example [sneaking] : I show you my actual feed of TikTok, the last video is in fact an advertisement. Near the username there is a small block "sponsorisée" which mean this content paid to be here. Also, when you click on it, it opens the website or the playstore to download the app.


    • An easy way to do the opposite is to have a huge disclaimer before the ad or just a bigger "sponqorisée" text to warn the user : it's an ad !