Tag Archives: design-patterns

Dark Patterns: Evil Design Patterns

I’ve looked at design pat­terns many times before: per­suas­ive pat­terns, anti-pat­terns and inter­ac­tion pat­terns. The miss­ing link: dark pat­terns.

Accord­ing to Harry Brignull–the design­er who really star­ted the dis­cus­sion on this topic–dark pat­terns can suc­cinctly be described as “user inter­faces designed to trick people” or “dirty tricks design­ers use to make people do stuff”.

Brignull first wrote about this type of design pat­tern back in July 2010, fol­lowed shortly by a dark pat­terns present­a­tion for design­ers and research­ers (29m 27s) and, more recently, a present­a­tion aimed at brand own­ers and mar­keters (25m 29s).

All of this leads to the Dark Pat­terns wiki: a list­ing of the most pop­u­lar meth­ods com­pan­ies use to trick people through their user inter­faces, includ­ing:

via Kot­tke

Persuasive Design Patterns

The Design with Intent toolkit is a guide to help you design sys­tems to influ­ence a user’s beha­viour. The author, Dan Lock­ton, has sub­titled the toolkit 101 Pat­terns for Influ­en­cing Beha­viour Through Design.

Cat­egor­ised into the fol­low­ing eight ‘lenses’ (ways to look at design and beha­viour) the toolkit proves to be a fant­ast­ic resource for help­ing you per­suade through design.

  • Archi­tec­tur­al (e.g. Seg­ment­a­tion and Spa­cing: Can you divide your sys­tem up into parts, so people only use one bit at a time?)
  • Error­proof­ing (pre­vi­ously) (e.g. Choice Edit­ing: Can you edit the choices presen­ted to users so only the ones ou want them to have are avail­able?)
  • Inter­ac­tion (e.g. Par­tial Com­ple­tion: Can you show that the first stage of a pro­cess has been com­pleted already, to give users con­fid­ence to do the next?)
  • Lud­ic (e.g. Unpre­dict­able Rre­in­force­ment: What hap­pens if you give rewards or feed­back on an unpre­dict­able sched­ule, so users keep play­ing or inter­act­ing?)
  • Per­cep­tu­al (e.g. Fake Afford­ances: Is there any­thing to be gained from mak­ing some­thing look like it works one way, while actu­ally doing some­thing else (or noth­ing at all)?)
  • Cog­nit­ive (e.g. Social Proof: Can you show people what oth­er users like them are doing in this situ­ation, and which choices are most pop­u­lar?)
  • Machiavel­lian (e.g. Anchor­ing: Can you affect user­s’ expect­a­tions or assump­tions by con­trolling the ref­er­ence points they have?)
  • Secur­ity (e.g. Peer­veil­lance: What hap­pens if users know (or believe) that what they’re doing is vis­ible to their peers also using the sys­tem?)

From the intro­duc­tion to v0.9 of the toolkit:

You have a product, ser­vice or environment—a sys­tem—where users’ beha­viour is import­ant to it work­ing prop­erly (safely, efficiently), so ideally you’d like people to use it in a cer­tain way.

Or maybe you have a sys­tem where it would be desir­able to alter the way that people use it, to improve things for users, the people around them, or soci­ety as a whole.

How can you modi­fy the design, or redesign the sys­tem, to achieve this: to influence, or change users’ beha­viour?

Web Design Research Results

Some of the more enlightening/worthwhile res­ults from a num­ber of stud­ies on design and usab­il­ity con­duc­ted by Smash­ing Magazine, found via their oth­er­wise-ordin­ary 10 Use­ful Usab­il­ity Find­ings and Guidelines art­icle:

Gen­er­al design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width lay­out with 56% vary­ing the width between 951 and 1000px.
  • For body text, 90% use Verd­ana, Lucida Grande, Arial or Geor­gia with 78% using a font size between 12 and 14px.
  • Head­lines are typ­ic­ally Arial or Geor­gia (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 pop­u­lar posts.
  • 90% of foot­ers con­tain copy­right inform­a­tion, 40% con­tain links to About pages and 30% to con­tact inform­a­tion.
  • 76% provide ad-free art­icles.
  • 54% provide social icons under the post.
  • 66% dis­play RSS but­tons above the main lay­out area, while a sim­il­ar per­cent­age use the ‘stand­ard’ 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 pagin­a­tion.
  • Nobody cares about stand­ards (only 2 con­form).

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

  • Sans-serif fonts are more pop­u­lar for both head­lines and body copy (although not by a large mar­gin).
  • Head­lines: Geor­gia, Arial or Hel­vetica between 18 and 29 pixels.
  • Body copy: Geor­gia, Arial, Verd­ana or Lucida Grande between 12 and 14 pixels.
  • Head­er 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 para­graphs (pixels) ÷ line height (pixels) = 0.754.
  • Optim­al num­ber of char­ac­ters per line: between 55–75 (although 75–85 is more pop­u­lar).
  • Body text is left-aligned, image replace­ment is rarely used and links are either under­lined or high­lighted with bold or col­or.

100 unspe­cified sites were used for this ana­lys­is of web form struc­ture and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract vis­it­ors by explain­ing the bene­fits of regis­tra­tion.
  • Ver­tic­ally arranged fields are pre­ferred to hori­zont­ally arranged fields (86%).
  • 82% of sites don’t ask for e-mail con­firm­a­tion, although 72% required pass­word con­firm­a­tion.
  • Only 45% of sites used the thank-you mes­sage to motiv­ate users to pro­ceed with explor­ing the ser­vices of the site.

Anti-Patterns

I’ve writ­ten about design pat­terns a couple of times in the past, but today I dis­covered anti-pat­terns: design pat­terns that “may be com­monly used but [are] inef­fect­ive and/or coun­ter­pro­duct­ive in prac­tice”.

One of the “key ele­ments present to form­ally dis­tin­guish an actu­al anti-pat­tern from a simple bad habit, bad prac­tice, or bad idea”:

Some repeated pat­tern of action, pro­cess or struc­ture that ini­tially appears to be bene­fi­cial, but ulti­mately pro­duces more bad con­sequences than bene­fi­cial res­ults.

The sev­en types of anti-pat­tern, with some examples:

  • Organ­isa­tion­al: Mor­al haz­ard, insu­lat­ing a decision-maker from the con­sequences of his or her decision.
  • Pro­ject man­age­ment: Group­think, whereby mem­bers of the group avoid pro­mot­ing view­points out­side the com­fort zone of con­sensus think­ing.
  • Ana­lys­is: Bystand­er apathy, when a require­ment or design decision is wrong, but the people who notice this do noth­ing because it affects a lar­ger num­ber of people.
  • Soft­ware design: Gold plat­ing, con­tinu­ing to work on a task or pro­ject well past the point at which extra effort is adding value.
  • Pro­gram­ming: Cargo cult pro­gram­ming, using pat­terns and meth­ods without under­stand­ing why.
  • Meth­od­o­lo­gic­al: Golden ham­mer, assum­ing that a favor­ite solu­tion is uni­ver­sally applic­able (See: Sil­ver Bul­let).
  • Con­fig­ur­a­tion man­age­ment.

Design Patterns for Errorproofing

Per­suas­ive tech­no­lo­gies are those which are designed to change the atti­tudes or beha­viours of users. Error­proof­ing, on the oth­er­hand, is con­cerned not with beha­vi­our­al change, but in ensur­ing cer­tain beha­viours are met.

Error­proof tech­no­lo­gies, then, are those which “[make] it easi­er for users to work without mak­ing errors, or [that make] errors impossible in the first place”.

Dan Lock­ton of the excel­lent Design with Intent com­piles a list of eight design pat­terns for error­proof­ing a sys­tem:

  • Defaults
  • Inter­locks
  • Lock-in/out
  • Extra steps
  • Spe­cial­ised afford­ances
  • Par­tial self-cor­rec­tion
  • Por­tions
  • Con­di­tion­al warn­ings