Monochrome laziness

Arseni Mourzenko
Founder and lead developer
July 21, 2019
Tags: rant 32 design 2 interaction-design 7 user-experience 9 quality 28

Twelve years ago, Win­dows Vista was re­leased, im­press­ing every­one by its shiny, elab­o­rate icons. For in­stance, a re­cy­cle bin was il­lus­trat­ed by a shiny trans­par­ent waste bas­ket. Search func­tion­al­i­ty was shown in a form of a metal­lic mag­ni­fy­ing glass. Not every icon was per­fect and the ob­ses­sion with glass was too in­tru­sive, but at least there was an ob­vi­ous ef­fort to make the icons rec­og­niz­able and at­trac­tive.

Fig­ure 1 Nice, at­trac­tive graph­ics.

The era of graph­i­cal de­sign­ers who do qual­i­ty work seems to be fin­ished now. Twelve years lat­er, Win­dows 10 looks like a mono­chrome vari­ant of Win­dows 2.0, and most de­sign­ers seem to be­lieve that there is noth­ing wrong, in 2019, to have an op­er­at­ing sys­tem which looks like one from 1987. This un­will­ing­ness to do qual­i­ty work doesn't lim­it it­self to Mi­crosoft, and es­sen­tial­ly all main­stream de­sign com­mu­ni­ty sud­den­ly de­cid­ed that less is more when it comes to work (but not the salary). If you can make an icon in ten sec­onds with three shapes in Adobe Il­lus­tra­tor, why both­er?

This morn­ing, I found my­self in front of a “mod­ern crap look” web ap­pli­ca­tion, glanc­ing at a zone with three icons from Pixe­den, a very pop­u­lar icon set:

Fig­ure 2 Lazi­ness il­lus­trat­ed.

I have no idea what the first icon is ex­pect­ed to rep­re­sent, and nei­ther should you. Bad­ly done, in­vert­ed spec­ta­cles, maybe?

The sec­ond one is slight­ly clear­er; it seems to be a lifebuoy ring, made by a de­sign­er who have nev­er seen a lifebuoy ring in his life, and was too lazy to go to Google Im­ages be­fore draw­ing one. If among the read­ers, there are de­sign­ers who have nev­er seen a lifebuoy ring ei­ther, I can ex­plain. One of the goals of a lifebuoy ring is that it should be easy to spot one from a dis­tance, in­clud­ing dur­ing the night. This means that it would usu­al­ly be red or or­ange, and have re­flec­tive tape on its four sides. A tape is straight. In oth­er words, it has the ex­act same width to­wards the in­side of the ring as on the out­side of it. That thing, above, is there­fore some­thing else.

The third one would be, I guess, an in­can­des­cent light bulb, al­though the po­si­tion of the ter­mi­nals and the fil­a­ment don't seem nat­ur­al. As it is un­der­stand­able that a young in­tern who worked on this icon may have for­got­ten the last time he have seen an in­can­des­cent light bulb, a sim­ple Google search for “in­can­des­cent light bulb” re­veals that the pho­tos of bulbs are shot from “face,” with both ter­mi­nals clear­ly vis­i­ble, not from the side. Show­ing it from the side when draw­ing an icon makes the icon less rec­og­niz­able, while the goal of a de­sign­er of an icon should be the op­po­site—to make it as rec­og­niz­able as pos­si­ble.

I hoped I was un­for­tu­nate to have the worst icons of the set, but af­ter check­ing the col­lec­tion, it ap­peared that this is not the case. There are even things like that, which is pos­si­bly the most cryp­tic one:

Fig­ure 3 Some­thing par­tic­u­lar­ly cryp­tic.

Oth­er icon sets pre­sent the same is­sue. Here's an ex­am­ple from Ma­te­r­i­al Icons, named alarm_on:

Fig­ure 4 A mean­ing­less as­sem­bly of ab­stract forms.

First, the alarm clock. The clock makes noise by mov­ing a ham­mer be­tween two bells. The ham­mer has to move quick­ly, which also means that the bells have to be close to each oth­er. Like this:

Fig­ure 5 What an ac­tu­al alarm clock looks like.

In the case of the icon, the bells are too far away from each oth­er.

Sec­ond, the check box. Here's the Uni­code char­ac­ter 0x2713:

Fig­ure 6 A check mark.

It looks in­deed like a check mark, i.e. some­one would do when fill­ing a form. Now, com­pare it to the check mark used by Ma­te­r­i­al Icons. Sharp edges, straight lines. In a con­text of a clock, one could think that those are hour and minute clock hands, dis­placed for an un­known rea­son.

This is not an iso­lat­ed case of un­clear things in Ma­te­r­i­al Icons. Ex­am­ple: a square with a sort of an ar­row, which seems to be of­ten used to rep­re­sent mul­ti­ple el­e­ments.

Fig­ure 7 More mean­ing­less ab­stract forms.

If this is the goal, why not hav­ing one square cov­er­ing an­oth­er square? Oth­er­wise, what is the goal of the two lines at the left and at the bot­tom?

It seems, over­all, that de­sign­ers for­got the goal of de­sign, which is to make the prod­uct eas­i­er to use. In­stead, it be­came fash­ion­able to make the least ef­fort pos­si­ble when de­sign­ing an icon, let­ting the user to do the guess­work.

In­ter­faces them­selves be­come more and more cryp­tic, with Win­dows 10 con­trols be­ing ba­si­cal­ly rec­tan­gles, try­ing to avoid giv­ing any clue about their pur­pose, i.e. if they are but­tons or text box­es or just ar­bi­trary stuff which doesn't ac­cept any in­ter­ac­tion. If you add cryp­tic icons to a cryp­tic in­ter­face, you ob­tain low qual­i­ty in­ter­face. Most web­sites are un­us­able, and this is the fault of the fash­ion which push­es de­sign­ers to be lazy. And un­pro­fes­sion­al.