Bachelor Thesis – Web & Interaction Design
Manipulab - Dark Patterns in Focus
Within my bachelor project, I critically examined the topic “Dark Patterns in UI / UX Design”. What does it mean when digital design doesn’t act according to balanced, ethical and moral guidelines?
The result of the bachelor thesis was a fully elaborated, interactive website, which aims to educate users about manipulative design strategies on the internet in a playful and humorous way.
Meine Rolle
I worked on this project during my bachelor semester at University. The work included the following main tasks:
- Scientific literature research
- Critical examination of one’s own profession and design industry
User research (Run focus groups) - Carrying out a market analysis (of currently existing websites on the topic of dark patterns)
Interaction design (with special focus on micro interactions) - Web design (functional and visual conception)
- Creation of a coherent, textually formulated bachelor thesis in Adobe Indesign
Problem
So-called “dark patterns” are design patterns and techniques that aim to manipulate and subconsciously direct users to the advantage of a client. In doing so, the interests of users are deliberately disregarded and the basic concept of ethical and moral design with the help of behaviour patterns is disregarded. Knowledge about collective behaviour patterns of people and the effect of design principles is used to steer in a direction that in many cases does not correspond to the ideas and wishes of the users.
“Deliberately misleading users through exploitative nudging is also called dark patterns. ” (Quote – Henry Brignull)
The use of dark patterns can be observed again and again on many websites and in apps, and refers to various situations in which users interact with a system. An example is the process of confirming cookies when entering a website. While it is often made easy for users to confirm settings selected in advance by the operator, when they wish to turn off cookies, they often have to go through the process of confirming the settings. Consumers typically find it difficult to choose settings that suit their interests because of non-transparent settings, hidden information and long and time-consuming texts.
Since the use of dark patterns often leads to risks in the area of fraud and data security, it is particularly important to already educate about the topic in order to promote mechanisms for self-protection in dealing with digital media.
Solution
It can be assumed that people who are not familiar with the topic do not perceive dark patterns at all or rarely and are not aware of the problems the topic poses. The possibility of recognizing and circumventing dark patterns is therefore only available to those who are aware of the issue.
Based on the previously explained issues, the website “Manipulab.com” is intended to interactively inform about dark patterns applied on the internet as a central information-rich media offer. The website gives consumers the space to understand how dark patterns affect their own online-based user behaviour, how they work and what dangers can arise from overlooking dark patterns. Different aspects in connection with dark patterns are addressed in various sections. The website explains in a simple and understandable way what dark patterns are, where, when and why they are used, how they work and what legal, but also psychological connections exist. Thus, “Manipulab” covers a variety of topics that could appeal to a broad base of consumers.
Another important aspect is the distinction between dark patterns and user-friendly design. Users should not get the impression that user experience design is generally bad and manipulative. Instead, a clear distinction is made from the procedures of the Dark Patterns. In order to guarantee a pronounced interest and awareness for the topic, “Manipulab.com” relies on the explicit implementation of interactivity. Semantic UI elements that move “on hover” or “on scroll” or trigger actions ensure the active involvement of users in the user interface and the topic.
At the same time, the website opens up the possibility of testing dark patterns in so-called “demos” safely and without the risk of data loss. Through the direct experience of manipulation and the subsequent education about the experience, a deeper understanding of manipulation on the net is created.
Persona and User Journey
Potential user group
Wireframing
Variation and excerpts from all wireframes
Style Guide
Farben und Typografie
About the colour choice
The use of Dark Patterns is in many ways opaque. The colour combination of red and blue should reflect this opacity and point to the manipulative character of Dark Patterns. Red is considered a signal colour and can be exciting but also aggressive. This should lend the website a powerful effect and is at the same time alluding to the often intrusive effectiveness of Dark Patterns. In contrast to red, blue looks more serious and trustworthy. Dark Patterns are also not always recognizable at first glance. Many pages that use dark patterns initially appear trustworthy. To further adapt the colour combination to the theme of Dark Patterns, a very dark variant of blue was used, and the red was lightened. This makes it look a little more obtrusive, but less threatening. The colours are also reflected in the entire background of the website. In keeping with the theme, it shows patterns (Dark Patterns) and looks remotely like a “disturbing image” from television.
About the naming
Like a virtual laboratory, the website is intended to make it possible to get to know, test and understand dark patterns. That is why the name is a combination of the words “manipulation” and “laboratory”. This results in “Manipulab”. Users can test what it is like to be manipulated and at the same time learn what can be done about it. Based on the combination of the two words, the site itself is also based on two components (information and interactivity).
About the logo
Ultimately, Dark Patterns’ modes of action are based on automated and learned behaviours. These behaviours are directly linked to the human mind. The logo should unite all these aspects and thought processes and still be simple and clearly designed. The basis of the elaboration is a hexagonal shape, which is often used in science as a symbol for chemical compositions and therefore fits well with the name of the website, which is based on the idea of “laboratory”. In addition, the shape is remotely reminiscent of the abstract representation of a brain. This is meant to symbolise the aspect of the mind. In order to evoke a clear association among users, the hexagon was associated with a human torso. The subdivision of the hexagon into patterns of different sizes is meant to symbolise the aspect of behavioural patterns anchored in a person’s brain and the manipulative properties of dark patterns. The latter idea is inspired by the cover of the book “PsyConversion” by Pilipp Spreer.
Mockups
The finished design (Extract)
