Category Archives: design

Realism and Abstraction in User Interface Design

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

Tak­ing his cue from Scott McCloud’s excel­lent Under­stand­ing Com­ics, Lukas Math­is looks at how for optim­um 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 com­ics, it’s about find­ing the optim­um comprim­ise between too little detail and too much.

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

The trick is to fig­ure out which details help users identi­fy the UI ele­ment, and which details dis­tract from its inten­ded mean­ing. Some details help users fig­ure out what they’re look­ing at and how they can inter­act with it; oth­er details dis­tract from the idea you’re try­ing to con­vey. They turn your inter­face ele­ment from a concept into a spe­cif­ic thing. Thus, if an inter­face ele­ment is too dis­tinct from its real-life coun­ter­part, it becomes too hard to recog­nize. On the oth­er hand, if it is too real­ist­ic, people are unable to fig­ure out that you’re try­ing to com­mu­nic­ate an idea, and what idea that might be.

Non-Design Skills Needed by Designers

Like in many oth­er spe­cial­ised fields, to become a great design­er one must mas­ter or be acquain­ted with many non-design skills.

User inter­face design­er Aza Raskin – ex-Cre­at­ive Lead at Fire­fox and son of Jef – offers up this list of what he believes to be most import­ant to do and mas­ter in order to become a design­er:

  1. The Hard­est Part of Soft­ware is Cul­ture. Get a Book on Nego­ti­ation. If you can­not com­mu­nic­ate, you will fail. If you can­not con­vince, you will fail. If you can­not listen, you will fail. […] To design is to inspire par­ti­cip­a­tion. Unless we can let our ideas become oth­er people’s ideas—get oth­ers to want to cham­pi­on design as their own—we will not be suc­cess­ful. […] The hard­est part of your job isn’t being cre­at­ive or bril­liant; it’s com­mu­nic­at­ing and cul­ture.
  2. Know Cog­nit­ive Psy­cho­logy. You are design­ing for people; you need to be well versed in the abil­it­ies and frailties 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­ar­ates its schol­ars from its war­ri­ors will have its think­ing done by cow­ards and its fight­ing by fools.” The optim­al soci­ety is one that mixes schol­ar-war­ri­ors and war­ri­or-schol­ars. The same is true for com­pan­ies that schism their design­ers and engin­eers.
  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 little pro­jects you’ve cre­ated, learned from, and even dis­carded, you are doing it wrong.
  5. Study Graph­ic Design. Looks affect usab­il­ity. Looks are just one aspect of design­ing for emo­tion­al beings—you need to think about the whole sens­ory exper­i­ence of an object, from sound to touch—but looks are often the most imme­di­ately appar­ent.

PlentyofFish and Unusability

In an early 2009 pro­file of Markus Frind–the founder and CEO of the online dat­ing web­site Plenty­ofF­ishInc. briefly touched on the top­ic of the site’s fam­ously bad user inter­face, with Frind explain­ing why he believes that, some­times, user exper­i­ence should take a back seat as a bet­ter exper­i­ence isn’t always linked to great­er profits.

Plenty of Fish is a design­er­’s night­mare; at once min­im­al­ist and inel­eg­ant, it looks like some­thing your neph­ew could have made in an after­noon. There’s the col­or 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 pro­spect­ive mate, one is inund­ated with pic­tures that are not cropped or prop­erly res­ized. Instead, head­shots are either com­ic­ally squished or creepily elong­ated, a car­ni­valesque 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 trivi­al adjust­ments,” he says. Frind’s approach – and the reas­on he spends so little time actu­ally work­ing – is to do no harm. This has two vir­tues: First, you can­’t waste money if you are not doing any­thing. And second, on a site this big and this com­plex, it is impossible to pre­dict how even the smal­lest 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 prop­er head­shots. That causes people to view more pro­files and allows Frind, who gets paid by the page view, to serve more ads.

This wonky ration­al­isa­tion reminds me of Andrew Chen’s insight­ful reponse to the Quora ques­tion, How did MySpace, with a smart team of people, do such a bad UI/UX job with the new design?

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

The Three Design Principles and The Simplicity Myth

We are con­fus­ing usab­il­ity with sim­pli­city and cap­ab­il­ity with fea­tures. This is faulty logic, says usab­il­ity and ‘cog­nit­ive design’ expert Don Nor­man, and our inter­pret­a­tion of our needs is mis­taken: the goal is not sim­pli­city; it is appro­pri­ate­ness, usab­il­ity and enjoy­ab­il­ity.

Sug­gest­ing that what con­sumers really want are frus­tra­tion-free, cap­able devices that tame our com­plex­ity-rich life­styles, Nor­man looks at how the ‘sim­pli­city argu­ment’ is not about sim­pli­city, but poor usab­il­ity and design.

Once we recog­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 simple design rules. For example, con­sider how three simple prin­ciples can trans­form an unruly cluster of con­fus­ing fea­tures into a struc­tured, under­stand­able exper­i­ence: mod­u­lar­iz­a­tion, map­ping, con­cep­tu­al mod­els. […]

Mod­u­lar­iz­a­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, copi­ers, and fax machines do it: Each func­tion is com­part­ment­al­ized by group­ing and graph­ics, so each is rel­at­ively simple. […] 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 res­ults is appar­ent.

But most import­ant of all is to provide an under­stand­able, cohes­ive con­cep­tu­al mod­el, so the per­son under­stands what is to be done, what is hap­pen­ing, and what is to be expec­ted. This requires con­tinu­al, inform­at­ive feed­back, which can also be done in such a way as to be pleas­ur­able: see any Apple product.

Emo­tion­al design is crit­ic­al to a per­son’s enjoy­ment of a product, the most crit­ic­al vari­able here being the need to feel in con­trol. This is espe­cially import­ant when things go wrong. The key is to design know­ing that things go wrong, thereby ensur­ing that people 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­pli­city, between adding cap­ab­il­ity and usab­il­ity. The real issue is about design: design­ing things that have the power required for the job while main­tain­ing under­stand­ab­il­ity, the feel­ing of con­trol, and the pleas­ure of accom­plish­ment.