Tag Archives: design-patterns

Dark Patterns: Evil Design Patterns

I’ve looked at design patterns many times before: persuasive patterns, anti-patterns and interaction patterns. The missing link: dark patterns.

According to Harry Brignull–the designer who really started the discussion on this topic–dark patterns can succinctly be described as “user interfaces designed to trick people” or “dirty tricks designers use to make people do stuff”.

Brignull first wrote about this type of design pattern back in July 2010, followed shortly by a dark patterns presentation for designers and researchers (29m 27s) and, more recently, a presentation aimed at brand owners and marketers (25m 29s).

All of this leads to the Dark Patterns wiki: a listing of the most popular methods companies use to trick people through their user interfaces, including:

via Kottke

Persuasive Design Patterns

The Design with Intent toolkit is a guide to help you design systems to influence a user’s behaviour. The author, Dan Lockton, has subtitled the toolkit 101 Patterns for Influencing Behaviour Through Design.

Categorised into the following eight ‘lenses’ (ways to look at design and behaviour) the toolkit proves to be a fantastic resource for helping you persuade through design.

  • Architectural (e.g. Segmentation and Spacing: Can you divide your system up into parts, so people only use one bit at a time?)
  • Errorproofing (previously) (e.g. Choice Editing: Can you edit the choices presented to users so only the ones ou want them to have are available?)
  • Interaction (e.g. Partial Completion: Can you show that the first stage of a process has been completed already, to give users confidence to do the next?)
  • Ludic (e.g. Unpredictable Rreinforcement: What happens if you give rewards or feedback on an unpredictable schedule, so users keep playing or interacting?)
  • Perceptual (e.g. Fake Affordances: Is there anything to be gained from making something look like it works one way, while actually doing something else (or nothing at all)?)
  • Cognitive (e.g. Social Proof: Can you show people what other users like them are doing in this situation, and which choices are most popular?)
  • Machiavellian (e.g. Anchoring: Can you affect users’ expectations or assumptions by controlling the reference points they have?)
  • Security (e.g. Peerveillance: What happens if users know (or believe) that what they’re doing is visible to their peers also using the system?)

From the introduction to v0.9 of the toolkit:

You have a product, service or environment—a system—where users’ behaviour is important to it working properly (safely, efficiently), so ideally you’d like people to use it in a certain way.

Or maybe you have a system where it would be desirable to alter the way that people use it, to improve things for users, the people around them, or society as a whole.

How can you modify the design, or redesign the system, to achieve this: to influence, or change users’ behaviour?

Web Design Research Results

Some of the more enlightening/worthwhile results from a number of studies on design and usability conducted by Smashing Magazine, found via their otherwise-ordinary 10 Useful Usability Findings and Guidelines article:

General design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width layout with 56% varying the width between 951 and 1000px.
  • For body text, 90% use Verdana, Lucida Grande, Arial or Georgia with 78% using a font size between 12 and 14px.
  • Headlines are typically Arial or Georgia (52%), with a font size between 17 and 25px.
  • The front page presents excerpts of 10-20 posts in 62% of cases.
  • 50% offer links to related and/or popular posts.
  • 90% of footers contain copyright information, 40% contain links to About pages and 30% to contact information.
  • 76% provide ad-free articles.
  • 54% provide social icons under the post.
  • 66% display RSS buttons above the main layout area, while a similar percentage use the ‘standard’ RSS icon (as opposed to a text link) and employ only one RSS feed.
  • Only 5 blogs use tag clouds (10%) and 11 (22%) use pagination.
  • Nobody cares about standards (only 2 conform).

A study of the typography used on the top 50 blogs touched on some of the above and then went into more detail:

  • Sans-serif fonts are more popular for both headlines and body copy (although not by a large margin).
  • Headlines: Georgia, Arial or Helvetica between 18 and 29 pixels.
  • Body copy: Georgia, Arial, Verdana or Lucida Grande between 12 and 14 pixels.
  • Header font size ÷ Body copy font size = 1.96.
  • Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  • Line length (pixels) ÷ line height (pixels) = 27.8.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  • Optimal number of characters per line: between 55–75 (although 75–85 is more popular).
  • Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

100 unspecified sites were used for this analysis of web form structure and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract visitors by explaining the benefits of registration.
  • Vertically arranged fields are preferred to horizontally arranged fields (86%).
  • 82% of sites don’t ask for e-mail confirmation, although 72% required password confirmation.
  • Only 45% of sites used the thank-you message to motivate users to proceed with exploring the services of the site.

Anti-Patterns

I’ve written about design patterns a couple of times in the past, but today I discovered anti-patterns: design patterns that “may be commonly used but [are] ineffective and/or counterproductive in practice”.

One of the “key elements present to formally distinguish an actual anti-pattern from a simple bad habit, bad practice, or bad idea”:

Some repeated pattern of action, process or structure that initially appears to be beneficial, but ultimately produces more bad consequences than beneficial results.

The seven types of anti-pattern, with some examples:

  • Organisational: Moral hazard, insulating a decision-maker from the consequences of his or her decision.
  • Project management: Groupthink, whereby members of the group avoid promoting viewpoints outside the comfort zone of consensus thinking.
  • Analysis: Bystander apathy, when a requirement or design decision is wrong, but the people who notice this do nothing because it affects a larger number of people.
  • Software design: Gold plating, continuing to work on a task or project well past the point at which extra effort is adding value.
  • Programming: Cargo cult programming, using patterns and methods without understanding why.
  • Methodological: Golden hammer, assuming that a favorite solution is universally applicable (See: Silver Bullet).
  • Configuration management.

Design Patterns for Errorproofing

Persuasive technologies are those which are designed to change the attitudes or behaviours of users. Errorproofing, on the otherhand, is concerned not with behavioural change, but in ensuring certain behaviours are met.

Errorproof technologies, then, are those which “[make] it easier for users to work without making errors, or [that make] errors impossible in the first place”.

Dan Lockton of the excellent Design with Intent compiles a list of eight design patterns for errorproofing a system:

  • Defaults
  • Interlocks
  • Lock-in/out
  • Extra steps
  • Specialised affordances
  • Partial self-correction
  • Portions
  • Conditional warnings