Banning cosmetic discussions in design

Avoid language that trivialises the role of designers

Dean Vipond
3 min readOct 4, 2018

I had an interesting chat recently with some design colleagues, about banning the word ‘cosmetic’ from discussions about the design and build of digital interfaces.

The team currently working on the new design system and prototyping kit for digital interfaces for the NHS, have been lucky to work with CSS consultant Harry Roberts, who has been helping us structure code, ready for sharing with other teams. Part of that work involves deciding how the system performs for older, less-well-supported browsers and devices. It is a healthy exercise to boil down the essentials of an interface, and ensure what we have designed is robust, and can still allow people to complete their tasks, under less-than-ideal circumstances. How far from the ideal design, can an interface degrade, before we deem it unusable for our users?

As we discussed a sliding scale of elements essential to an interface’s presentation and functionality, the first thing it was suggested could be dropped were ‘cosmetic’ details. Think rounded corners on buttons, perfectly aligned text and icons, that kind of thing.

However, this led to a discussion of the word ‘cosmetic’. It is not a helpful word when discussing graphic design, particularly in a digital context. It suggests that certain elements of a design are superficial, and not essential. And whilst most designers would be happy to forego a neat drop-shadow on a component when viewed in Internet Explorer 7, that’s not to say those elements are disposable.

Graphic design is functional

I have been in situations before, where developers have de-prioritised graphic design snags in production code, as they are ‘cosmetic’ (read: design details outside of a system’s core functionality). This trivialises the role of the designer, but also highlights designers’ failure to convey adequately the value of their work.

Left: correct alignment of icon and link text. Right: incorrect alignment. Visual design details build trust.

Every last graphic design decision is there to support some part of a user’s experience of a service, and this is much broader than being able to tell that a button is clickable, or that a piece of text is a link or not. Consistency, alignment, visual details… these are all things that combine to reassure a user that an interface, and thus the organisation they are engaging with, is reliable.

One of our newly-published design principles, is design for trust. People need to trust that we will handle their data with the utmost privacy. If the surface layer of an interface is sloppy, how can people have confidence in the underlying systems? A seemingly minor spacing snag may seem insignificant when viewed as a non-functional bug fix, but accumulatively, a few of them will conspire to undermine the service and the organisation.

Designers have a reputation for being pernickety, and sticklers for things being just right. We’re just not very good at explaining why. This is particularly (and understandably) annoying for beleaguered developers working on a responsive website under a deadline. But graphic design issues become usability issues a lot more quickly than people might think.

And that’s why we have to ban the word ‘cosmetic’ from our day-to-day vocabulary. In our discussion, we ended up replacing the word with ‘visual’ in our documentation, as we worked out what elements we could begin to sacrifice, as we went down our graceful degradation scale. It recognises design’s place as a core building block of a system or product, without labelling it as disposable. Yes, visual design detail can and should be among the things to be relinquished in a system’s degradation, but understanding exactly what you are relinquishing, and why it was there in the first place, is something we designers need to be much better at articulating.

--

--

Dean Vipond

Design leadership and human-centred stuff in general. Previously lead designer @NHSDigital and lots of other things. He/Him. http://www.deanvipond.com