Lone Gunman

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

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

Brignull first wrote about this type of design pat­tern back in July 2010, fol­lowed shortly by a dark pat­terns pre­sen­ta­tion for design­ers and researchers (29m 27s) and, more recently, a pre­sen­ta­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­pa­nies use to trick peo­ple through their user inter­faces, includ­ing:

• Roach Motel
• Pri­vacy Zuckering
• Friend Spam
• Forced Dis­clo­sure
• Far­away Bill

via Kot­tke

The Design with Intent toolkit is a guide to help you design sys­tems to influ­ence a user’s behav­iour. The author, Dan Lock­ton, has sub­ti­tled the toolkit 101 Pat­terns for Influ­enc­ing Behav­iour Through Design.

Cat­e­gorised into the fol­low­ing eight ‘lenses’ (ways to look at design and behav­iour) the toolkit proves to be a fan­tas­tic resource for help­ing you per­suade through design.

• Archi­tec­tural (e.g. Seg­men­ta­tion and Spac­ing: Can you divide your sys­tem up into parts, so peo­ple only use one bit at a time?)
• Error­proof­ing (pre­vi­ously) (e.g. Choice Edit­ing: Can you edit the choices pre­sented to users so only the ones ou want them to have are available?)
• Inter­ac­tion (e.g. Par­tial Com­ple­tion: Can you show that the first stage of a process has been com­pleted already, to give users con­fi­dence to do the next?)
• Ludic (e.g. Unpre­dictable Rre­in­force­ment: What hap­pens if you give rewards or feed­back on an unpre­dictable sched­ule, so users keep play­ing or interacting?)
• Per­cep­tual (e.g. Fake Affor­dances: 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­ni­tive (e.g. Social Proof: Can you show peo­ple what other users like them are doing in this sit­u­a­tion, and which choices are most popular?)
• Machi­avel­lian (e.g. Anchor­ing: Can you affect users’ expec­ta­tions or assump­tions by con­trol­ling the ref­er­ence points they have?)
• Secu­rity (e.g. Peer­veil­lance: What hap­pens if users know (or believe) that what they’re doing is vis­i­ble to their peers also using the system?)

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

You have a prod­uct, ser­vice or environment—a sys­tem—where users’ behav­iour is impor­tant to it work­ing prop­erly (safely, efficiently), so ide­ally you’d like peo­ple 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 peo­ple use it, to improve things for users, the peo­ple around them, or soci­ety as a whole.

How can you mod­ify the design, or redesign the sys­tem, to achieve this: to influence, or change users’ behaviour?

Some of the more enlightening/worthwhile results from a num­ber of stud­ies on design and usabil­ity con­ducted by Smash­ing Mag­a­zine, found via their otherwise-ordinary 10 Use­ful Usabil­ity Find­ings and Guide­lines article:

Gen­eral design deci­sions taken by the top 50 blogs (part two):

• 92% use a fixed width lay­out with 56% varying the width between 951 and 1000px.
• For body text, 90% use Ver­dana, Lucida Grande, Arial or Geor­gia with 78% using a font size between 12 and 14px.
• Head­lines are typ­i­cally 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 infor­ma­tion, 40% con­tain links to About pages and 30% to con­tact information.
• 76% pro­vide ad-free articles.
• 54% pro­vide social icons under the post.
• 66% dis­play RSS but­tons above the main lay­out area, while a sim­i­lar per­cent­age use the ‘stan­dard’ 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 stan­dards (only 2 conform).

A study of the typog­ra­phy 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 margin).
• Head­lines: Geor­gia, Arial or Hel­vetica between 18 and 29 pixels.
• Body copy: Geor­gia, Arial, Ver­dana or Lucida Grande between 12 and 14 pixels.
• Header font size ÷ Body copy font size = 1.96.
• Line height (pix­els) ÷ body copy font size (pix­els) = 1.48.
• Line length (pix­els) ÷ line height (pix­els) = 27.8.
• Space between para­graphs (pix­els) ÷ line height (pix­els) = 0.754.
• Opti­mal num­ber of char­ac­ters per line: between 55–75 (although 75–85 is more popular).
• Body text is left-aligned, image replace­ment is rarely used and links are either under­lined or high­lighted with bold or color.

100 unspec­i­fied sites were used for this analy­sis of web form struc­ture and design (part two):

• 93% use single-page sign-up forms.
• 41% of sites attract vis­i­tors by explain­ing the ben­e­fits of registration.
• Ver­ti­cally arranged fields are pre­ferred to hor­i­zon­tally arranged fields (86%).
• 82% of sites don’t ask for e-mail con­fir­ma­tion, although 72% required pass­word confirmation.
• Only 45% of sites used the thank-you mes­sage to moti­vate users to pro­ceed with explor­ing the ser­vices of the site.

I’ve writ­ten about design pat­terns a cou­ple of times in the past, but today I dis­cov­ered anti-patterns: design pat­terns that “may be com­monly used but [are] inef­fec­tive and/or coun­ter­pro­duc­tive in practice”.

One of the “key ele­ments present to for­mally dis­tin­guish an actual anti-pattern from a sim­ple bad habit, bad prac­tice, or bad idea”:

Some repeated pat­tern of action, process or struc­ture that ini­tially appears to be ben­e­fi­cial, but ulti­mately pro­duces more bad con­se­quences than ben­e­fi­cial results.

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

• Organ­i­sa­tional: Moral haz­ard, insu­lat­ing a decision-maker from the con­se­quences of his or her decision.
• Project 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­sen­sus thinking.
• Analy­sis: Bystander apa­thy, when a require­ment or design deci­sion is wrong, but the peo­ple who notice this do noth­ing because it affects a larger num­ber of people.
• Soft­ware design: Gold plat­ing, con­tin­u­ing to work on a task or project 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 with­out under­stand­ing why.
• Method­olog­i­cal: Golden ham­mer, assum­ing that a favorite solu­tion is uni­ver­sally applic­a­ble (See: Sil­ver Bullet).
• Con­fig­u­ra­tion man­age­ment.

Per­sua­sive tech­nolo­gies are those which are designed to change the atti­tudes or behav­iours of users. Error­proof­ing, on the oth­er­hand, is con­cerned not with behav­ioural change, but in ensur­ing cer­tain behav­iours are met.

Error­proof tech­nolo­gies, then, are those which “[make] it eas­ier for users to work with­out mak­ing errors, or [that make] errors impos­si­ble 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­cialised affordances
• Par­tial self-correction
• Por­tions
• Con­di­tional warnings