My experience designing an online gallery for a research project investigating dark design patterns on YouTube.
Project Overview
Project deliverables
Website user interface
Dark pattern research summary
My role
UI/UX design
Visual design
Summary writing + research
Project context
Research for University of Washington Department of Human-Centered Design & Engineering (HCDE)
Research group lead: Kai Lukoff
Timeframe: 2 weeks
Team: Tejus Krishnan, Laura Meng
Tools used: Figma
What are dark patterns?
Put simply, dark patterns are strategies used by apps and websites to deceive users into performing actions they didn’t intend to. The term was coined in 2010 by British UX researcher Harry Brignull, who described a dark pattern as “a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.”
Common examples of dark-pattern behavior, both on the web and beyond, include “fine print” in subscription packages that cause users to unwittingly pay much more money than they assumed, and ads disguised as genuine webpages or ostensibly relevant links. Dark patterns are the backbone of most online phishing and malware scams, but they are also used in subtler ways by major and legitimate businesses to exploit customer engagement with their platforms.
Recently, there has been a resurgence of attention towards dark patterns on mainstream social media platforms thanks to the efforts of Tristan Harris, a former design ethicist at Google who has spent years highlighting the ways in which technology “hijacks” human attention through dark design patterns. Harris is the founder of the “Time Well Spent” movement, which aims to align the incentives of technology designers with human needs, and reshape the tech industry’s “attention economy” to be more ethical towards users. Time Well Spent has found support among major tech companies (including Google and Facebook), as well as countless tech and business leaders. More importantly, it has helped create the cultural context for the HCDE department’s research on dark patterns.
Our Research
The HCDE department’s research aims to identify and correct dark patterns on YouTube and Twitter. The Autumn quarter phase of the project focused on theoretically understanding dark patterns from a psychological/UX/HCI perspective, as well as observing and documenting real-world examples of dark design on YouTube and Twitter. As the quarter progressed, our focus started narrowing to look more closely at YouTube. The work I’m sharing here is solely focused on YouTube.
We spent our initial weeks conducting a literature review of current research being done on dark patterns. In addition to the industry definitions of dark patterns (such as those on Brignull’s website), we looked at academic studies on topics such as compulsive phone use among adolescents, the different ways in which people measure meaningful usage of their devices, dark design patterns in games, and even “asshole design,” which focuses on the most blatantly obvious cases of malicious business practices. (There’s a thriving and wonderful Reddit community out there for those interested.) We applied what we learned when collecting examples of dark patterns on YouTube and Twitter through our own usage of those platforms.
The second leg of the project was to lay the groundwork for future user research by creating interview questions to gauge how users are affected by their use of YouTube, and the role that dark patterns play in shaping these experiences. We conducted several pilot interviews with UW students to test whether our interview procedures were yielding useful insights, as well as getting an early-stage look at how young people’s digital lives are being affected by the design decisions we were studying.
Designing a Lingua Franca
Since our focus this quarter was simply to understand dark patterns more robustly and complete the precursory steps for our user research, a “design deliverable” didn’t seem like an immediately obvious outcome of our work.
However, one of our goals at this stage was to develop a lingua franca for understanding dark patterns. The term has historically been defined as a common language to facilitate communication between two groups that don’t speak the same language. For our purposes, it means finding a way for dark patterns to be understood not only by designers and UX researchers, but also everyday users, business leaders, policymakers, developers, etc. In other words, we had to package the last three months of exploration and context-building into a “dark pattern gallery” that was accessible to people from all disciplines. I felt it made for an excellent design opportunity.
Some of our examples of dark patterns on YouTube
During our literature review, we looked at two existing dark pattern libraries on the Internet as a reference. The first was Harry Brignull’s darkpatterns.org, which defines 11 different dark pattern categories (with charming names like “Privacy Zuckering”) and is continually updated with examples from around the web. The second was UXP2 (“squared”), an online dark pattern database run by researchers at Purdue University. While this website contains fewer categories of dark patterns than Brignull’s, it accepts contributions from the general public, and therefore has a much wider database of examples for each pattern in the wild. Both websites aim for simplicity and accessibility, but the former is more industry-focused while the latter is more academic.
When it came time to design the gallery, we narrowed down our various dark patterns to three primary categories that we observed on YouTube: infinite scroll, autoplay and the recommendation algorithm, which our research lead Kai decided to call “Algorithms to Crazytown.” We were split into subgroups based on these pattern categories; my team member Laura and I decided to focus on infinite scroll.
Ideation, wireframing & prototyping
Our first step before we even took our sketchbooks was to organize our knowledge on dark patterns and infinite scrolling into a concise format. We assembled a document that broke down our case study into simple parts: a one-sentence description of our dark pattern, a set of examples on YouTube, some related dark patterns, and an explanation of the attention-capture methodology alongside the reasoning behind calling our pattern “dark.”
The design process for this gallery was fairly swift due to the short timeframe and simple premise. The main idea we were going for was emulating the feeling of infinite scrolling by having our user literally scroll through all of the information we were giving them. This meant our information architecture was linear, which eliminated much of the complex wireframing work. We focused our low-fidelity prototypes on finding the best way to divide the information in our document into “chunks.” We wanted to strike a proper balance between visual and textual UI elements, since the concept of dark patterns can feel very abstract if it isn’t explained with examples, diagrams and storyboards.
Our infinite scroll storyboard
Final Design
Ultimately, the biggest iteration this design went through was a shift from mobile to web. Since our research was focused on mobile usage, our initial idea was to mimic YouTube’s mobile interface. However, our draft prototypes on Figma showed that this strategy made for a repetitive and inelegant user experience. I realized that a larger screen size would provide a better balance between information placement, graphics and breathing room while maintaining the “infinite scroll” experience we were trying to cultivate. So, I recreated our gallery from the ground up with revamped visuals and a desktop screen resolution, while using mobile UI examples in the vector illustrations.
Visual design
Dark patterns call for dark mode. I’ve always been attracted to good web design that uses a dark theme, since it evokes feelings of both vastness and density. I went with a color scheme that matches YouTube’s own dark mode, filling most of the screen with a sleek grayscale layout that’s paired with striking red accents. I also had to get more creative with font styling, since I was dealing with paragraph-long text blocks and had to work harder to avoid clutter. I went with either wide spacing, stencil letters or large boldface type for the headings and small, thin lettering for the paragraphs (plus a lot of whitespace) so the page could feel more spacious and alive. Finally, to keep the project feeling more “website” and less “slide-deck,” I filled the backgrounds with psychedelic line and dot patterns so that each page would carry with it a sense of movement and wonder.
Here’s the full design in one continuous image. Enjoy!
Reflection
What I found most satisfying about this project was that I was able to identify and exploit a design opportunity where it was not immediately apparent. The majority of our work as a team was research-based, as we were laying the foundations for an eventual user study and redesign proposal rather than designing anything ourselves. The concept of dark patterns, however, is at the heart of current concerns regarding the exploitative and addictive effects of technology, and I personally felt it was worthwhile to render our research findings into a visually appealing, easily digestible format for public consumption. I believe that the resulting project allowed me to experiment with different genres of design, including UI/UX, brand identity, zine design, and information visualization.
Improvements for next time:
This project only highlights the effects of infinite scroll, since that was the pattern I was specifically assigned to research and summarize. If I were to make a more comprehensive version of this webpage, I would include information on the other patterns we studied as well.
I feel that the pages could use a more consistent layout and grid system.
I would include screenshots from YouTube’s actual UI rather than just creating generic vector illustrations of the overall layout. It would be more valuable for audiences to specifically see where on the site itself these various design patterns manifest. While creating this project, I was more focused on creating a distinct aesthetic and viewing experience for the site.