Lone Gunman

User inter­face design­ers (and par­tic­u­larly icon design­ers) could learn a lot from comics and the the­ory behind them.

Tak­ing his cue from Scott McCloud’s excel­lent Under­stand­ing Comics, Lukas Mathis looks at how for opti­mum recog­ni­tion and in order to aid under­stand­ing, user inter­face ele­ments must find the sweet spot between uni­ver­sal­ity and real­ism. Like when draw­ing cer­tain comics, it’s about find­ing the opti­mum com­prim­ise between too lit­tle detail and too much.

Peo­ple are con­fused by sym­bols if they have too many or too few details. They will rec­og­nize UI ele­ments which are some­where in the middle.

The trick is to fig­ure out which details help users iden­tify the UI ele­ment, and which details dis­tract from its intended mean­ing. Some details help users fig­ure out what they’re look­ing at and how they can inter­act with it; other details dis­tract from the idea you’re try­ing to con­vey. They turn your inter­face ele­ment from a con­cept into a spe­cific thing. Thus, if an inter­face ele­ment is too dis­tinct from its real-life coun­ter­part, it becomes too hard to rec­og­nize. On the other hand, if it is too real­is­tic, peo­ple are unable to fig­ure out that you’re try­ing to com­mu­ni­cate an idea, and what idea that might be.

Like in many other spe­cialised fields, to become a great designer one must mas­ter or be acquainted with many non-design skills.

User inter­face designer Aza Raskin — ex-Creative Lead at Fire­fox and son of Jef — offers up this list of what he believes to be most impor­tant to do and mas­ter in order to become a designer:

1. The Hard­est Part of Soft­ware is Cul­ture. Get a Book on Nego­ti­a­tion. If you can­not com­mu­ni­cate, you will fail. If you can­not con­vince, you will fail. If you can­not lis­ten, you will fail. […] To design is to inspire par­tic­i­pa­tion. Unless we can let our ideas become other people’s ideas—get oth­ers to want to cham­pion design as their own—we will not be suc­cess­ful. […] The hard­est part of your job isn’t being cre­ative or bril­liant; it’s com­mu­ni­cat­ing and culture.
2. Know Cog­ni­tive Psy­chol­ogy. You are design­ing for peo­ple; you need to be well versed in the abil­i­ties and frail­ties of the human mind. […] Inter­face design is as much a sci­ence as it is an art. Know the sci­ence, else you are walk­ing blindly through a mine­field of harm­ful design.
3. Learn to Pro­gram, Even if Poorly. Thucy­dides wrote, “The soci­ety that sep­a­rates its schol­ars from its war­riors will have its think­ing done by cow­ards and its fight­ing by fools.” The opti­mal soci­ety is one that mixes scholar-warriors and warrior-scholars. The same is true for com­pa­nies that schism their design­ers and engineers.
4. Cre­ate, Cre­ate, Cre­ate. You’ll need thou­sands of hours of prac­tice to rise to the top of your game. […] If you don’t have dozens of lit­tle projects you’ve cre­ated, learned from, and even dis­carded, you are doing it wrong.
5. Study Graphic Design. Looks affect usabil­ity. Looks are just one aspect of design­ing for emo­tional beings—you need to think about the whole sen­sory expe­ri­ence of an object, from sound to touch—but looks are often the most imme­di­ately apparent.

In an early 2009 pro­file of Markus Frind–the founder and CEO of the online dat­ing web­site Plen­ty­ofF­ish–Inc. briefly touched on the topic of the site’s famously bad user inter­face, with Frind explain­ing why he believes that, some­times, user expe­ri­ence should take a back seat as a bet­ter expe­ri­ence isn’t always linked to greater prof­its.

Plenty of Fish is a designer’s night­mare; at once min­i­mal­ist and inel­e­gant, it looks like some­thing your nephew could have made in an after­noon. There’s the color scheme that seems cribbed from a high school year­book and the curi­ous fond­ness for bold text and CAPITAL LETTERS. When search­ing for a prospec­tive mate, one is inun­dated with pic­tures that are not cropped or prop­erly resized. Instead, head­shots are either com­i­cally squished or creep­ily elon­gated, a car­ni­va­lesque effect that makes it dif­fi­cult to quickly size up poten­tial mates.

Frind is aware of his site’s flaws but isn’t eager to fix them. “There’s no point in mak­ing triv­ial adjust­ments,” he says. Frind’s approach — and the rea­son he spends so lit­tle time actu­ally work­ing — is to do no harm. This has two virtues: First, you can’t waste money if you are not doing any­thing. And sec­ond, on a site this big and this com­plex, it is impos­si­ble to pre­dict how even the small­est changes might affect the bot­tom line. Fix­ing the wonky images, for instance, might actu­ally hurt Plenty of Fish. Right now, users are com­pelled to click on people’s pro­files in order to get to the next screen and view proper head­shots. That causes peo­ple to view more pro­files and allows Frind, who gets paid by the page view, to serve more ads.

This wonky ratio­nal­i­sa­tion reminds me of Andrew Chen’s insight­ful reponse to the Quora ques­tion, How did MySpace, with a smart team of peo­ple, do such a bad UI/UX job with the new design?

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

We are con­fus­ing usabil­ity with sim­plic­ity and capa­bil­ity with fea­tures. This is faulty logic, says usabil­ity and ‘cog­ni­tive design’ expert Don Nor­man, and our inter­pre­ta­tion of our needs is mis­taken: the goal is not sim­plic­ity; it is appro­pri­ate­ness, usabil­ity and enjoyability.

Sug­gest­ing that what con­sumers really want are frustration-free, capa­ble devices that tame our complexity-rich lifestyles, Nor­man looks at how the ‘sim­plic­ity argu­ment’ is not about sim­plic­ity, but poor usabil­ity and design.

Once we rec­og­nize that the real issue is to devise things that are under­stand­able, we are halfway toward the solu­tion. Good design can res­cue us. How do we man­age com­plex­ity? We use a num­ber of sim­ple design rules. For exam­ple, con­sider how three sim­ple prin­ci­ples can trans­form an unruly clus­ter of con­fus­ing fea­tures into a struc­tured, under­stand­able expe­ri­ence: mod­u­lar­iza­tion, map­ping, con­cep­tual models. […]

Mod­u­lar­iza­tion means tak­ing an activ­ity and divid­ing it into small, man­age­able mod­ules. That’s how well-designed mul­ti­func­tion print­ers, scan­ners, copiers, and fax machines do it: Each func­tion is com­part­men­tal­ized by group­ing and graph­ics, so each is rel­a­tively sim­ple. […] Learn to do one func­tion, you then know how to do all of them.

Good map­ping is essen­tial to ensure that the rela­tion­ship between actions and results is apparent.

But most impor­tant of all is to pro­vide an under­stand­able, cohe­sive con­cep­tual model, so the per­son under­stands what is to be done, what is hap­pen­ing, and what is to be expected. This requires con­tin­ual, infor­ma­tive feed­back, which can also be done in such a way as to be plea­sur­able: see any Apple product.

Emo­tional design is crit­i­cal to a person’s enjoy­ment of a prod­uct, the most crit­i­cal vari­able here being the need to feel in con­trol. This is espe­cially impor­tant when things go wrong. The key is to design know­ing that things go wrong, thereby ensur­ing that peo­ple will under­stand what is hap­pen­ing and know what to do about it.

The argu­ment is not between adding fea­tures and sim­plic­ity, between adding capa­bil­ity and usabil­ity. The real issue is about design: design­ing things that have the power required for the job while main­tain­ing under­stand­abil­ity, the feel­ing of con­trol, and the plea­sure of accomplishment.