How to test beauty

Ever wondered how do we decide if an object is beautiful or ugly? The answer is: we look for a pattern and if we find a pattern that's linked to something pleasant - we find the object also pleasant.

You probably know, that our brain doesn't process visual information pixel-by-pixel, actually, it doesn't even get the whole picture. We see something and imagine the rest. It's a trade to have a faster reaction for lack of precision.

This flaw, or rather feature, allows us to use media compression, for instance, and more importantly, to have photo composition rules and a variety of graphical design guidelines. These rules are known, can be formulated and thus can be tested by a machine.

Correspondence with design system

Design systems can and should be individual for a project or a company, but more likely it will have a color palette, a grid and a set of typography styles.

Here's a naive test for a color palette:

it('only has colors from color palette', ()=>{ document.querySelectorAll("*").forEach((element) => {   const background = window.getComputedStyle(element, null).getPropertyValue("background-color")   expect(background).to.be.oneOf(styles.background); });})

Keep in mind, that since we are dealing with css values, we might need to have a function that will normalize it to be in a certain unit or format and check for edge cases (unset, transparent, inherit, etc).

In a similar matter we can test text color, sizes and styles of elements or test that all elements have a height, that matches a certain base:

it('all heights are matching base value', ()=>{ const BASE = 8; document.querySelectorAll("*").forEach((element) => {   const { height } = element.getBoundingClientRect()   expect(height % BASE).to.be(0); });})

Checking markup

From a technical point of view you may want to check that markup is correct, e.g. that there's only one h1 and main, and that the nested tags are only nested within proper elements:

it('only one element present', ()=>{ expect(document.querySelectorAll("h1").length).to.be.lessThanOrEqual(1)})it('divs are not nested into a', ()=>{ document.querySelectorAll("div").forEach(element=>{     const checkParent = (element)=>{        expect(element.tagName).not.to.be('A')        if(element.parentElement) checkParent(element.parentElement)     }     checkParent(element) })})

You may want to check that elements only have trailing margins, that there's only one scrolling container on the page or that there's no horizontal scroll bar. And don't miss out your bonus karma points for accessibility testing.

Beauty standards

Controversy of beauty is in matching a standard, but standing out, meaning that can you decide which rules you follow and which you don't.

You probably heard or white space. Simply put, ensuring that elements have significant space between themselves. Its main purpose is to prevent visual overload and make important parts stand out.

The way you test it will depend on a particular implementation, you might want to check that significant elements have at least a minimum padding:

it('significant blocks have sufficient paddings', ()=>{    document.querySelectorAll(".significant-block").forEach( element =>{        const topPadding = toPixels(window.getComputedStyle(element, null).getPropertyValue("padding-top"))        const bottomPadding = toPixels(window.getComputedStyle(element, null).getPropertyValue("padding-bottom"))        expect(topPadding).to.be.greaterThanOrEqual(8)        expect(topPadding).to.equal(bottomPadding)    })})

It also is possible to test visual hierarchy of root elements:

it('has consistent visual hierarchy', ()=>{    const children = [...document.querySelectorAll("#root>*")].filter(el=>el.offsetHeight).sort((a,b)=>a.offsetHeight-b.offsetHeight)    expect(toSelector(children)).to.have.ordered.members(['header','footer','main'])})

It also might be a good idea to ensure maximum size of text block, as well as good contrast between fore- and background color and so much more! But I'll leave it to your imagination and creativity.

Obvious UX

Webpages are interactive, which makes user experience have a huge impact on one's impression. Users are not ready to learn how to use your service until they are engaged. In order to avoid frustration we should ensure that interactive elements are where the user expects them to be.

The actual elements and positioning depends on the target audience and industry and will probably take several iterations and A/B tests to figure. But once it is set, do make sure that the changes you make won't affect UX users are used to.

As a quick reminder: users expect different experience on handheld and desktop devices.

Make sure it works as expected

While beautiful looks provide initial attention, any bugs and glitches may render it ugly in a blink of an eye.

Unit and end-to-end testing can help with that, alongside with running benchmarks from time to time to make sure it not only works, but works fast.

Beautiful on the inside

Most users won't see your code and the ones that will are limited to what browser inspector allows them. Nonetheless though-through, well organized and simple codebase is an important part of project's beauty.

Beautiful projects are pleasant to use as much as they are enjoyable to develop and expand.

Go now, make world a better place one website at a time!

Photo by www Hey Beauti com on Unsplash