The Importance of Clarity in Front End Development
Tags: webdev, codequality, design, ux
Published: 2023-01-25 21:56:22

#The Space Matters

Before I even say anything, I am going to show you a set of photos. You decide which one you like better.

This?
</br>


![Messy Bedroom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl46bkbguk3d1b2qtsq0.png)



Or this?

![Clean Bedroom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arzpkti5kub6bi86apac.png)

Maybe you are an agent of chaos, but I personally prefer the latter. In our first photo, there is so much clutter, it would take us several minutes of moving things out of the way to even be able to use the bed for its intended purpose. It's not very clear what goes where, nor do we have an implicit sense of general trust that the person who lives in that bedroom is very organized or possibly even reliable. Maybe we don't even realize we are making this inference, but as human beings, this judgement is beyond our conscious ability to stop.

The dirty bedroom just plain doesn't make us feel very good. Maybe we get a sense of unease when we are standing in there. We don't like it- the disarray makes us uncomfortable. Its possible that by being in such an environment, even if we are normally clean individuals, we would be tempted to just leave our laundry on the floor because hey- it's already there.

However, our second bedroom is a veritable oasis of peace and tranquility. When we walk in there, we immediately are drawn to the bed; we want to sit or lie down, we feel relaxed, and since we are in a clean space with clear organizational principles in place, we are more likely to use the inertia of the room to keep it clean and tidy. 

To sum up the above statements, 
**<ul>
<li>Human beings use implicit bias to make judgements about the spaces they are exposed to</li>
<li>The environment can influence the state of mind of the individual</li>
<li>Chaotic, messy, or cluttered environments create frustration and perpetuate more chaos and clutter</li>
<li>Clean and organized environments create peace, trust, and inspire more cleanliness and organization</li>
</ul>**

# Building Trust

Ok, so we don't like messy rooms. Why does it matter?

*Because the same principles apply when we are viewing web pages.*

Let's look at some examples. Those of us who grew up in the 90's may remember this classic.

{% embed https://www.youtube.com/watch?v=ae5UXhUtxao %}

While I love this website out of sheer nostalgia, it does present some problems. What does it do? Can you click anything? It's really noisy in an obtrusive way. Its the quintessential "messy bedroom" of web design.

Now let's contrast this with a tried-and-true:

![Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahytfpd8vjpaibbpubll.png)

It's simple. It's clear. It's uncluttered. It directs you to exactly what you need to do (enter something and then press Google Search, or, if you're the agent of chaos previously discussed, you might press I'm Feeling Lucky). It does exactly what it's supposed to do, and leaves you feeling empowered in the process. You *trust* that what you are doing is going to get you the results you want- whereas, unfortunately, with Homer's site, we are probably going to be left wondering if we should have chosen somewhere else to get our needs met. 

**To build the user's trust in you, you must create a sense of clarity and purpose in the space they are interacting with.** If you present them a space with a button that looks clickable, but when they press it nothing happens, this will create frustration. If you present a space with a button that *does* do something appropriate when clicked, but there's 15 of them on the page, this will create frustration.

#Clarity

So what is clarity? On a general level, it just means "to make clear." Imagine wiping off the smudge on your lens. Ahh, now you can see better.

![Clarity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhth0kyoyqvprwpu6pxt.png)

When there is clarity surrounding something, we don't have to work as hard to navigate it. For example, when we have the roadmap, we don't have to fumble our way through the unknown terrain: we have the map! If we don't know where the light switch is in a room, we have to fumble through the dark room until we find it. When we turn it on, we have instant clarity.

Using principles of psychology, we learn that human beings prefer to "automate" our consciousness. To put it simply: we don't like to have to think. We like clarity, because it helps us live our lives more efficiently.

So we really don't like it when our webpages make us work hard to try to figure out what we are supposed to do. We don't like "fumbling in the dark." Not only will be be frustrated, but we will be less likely to rate the page favorably, and may not become a repeat user.

#Now What?


![A brain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghme5ako8ar9wmb6re62.png)

We can start applying these principles in our development by living them. We don't have to think too hard about it; we can simply "improve" the clarity of whatever area we are working in at any given time by thinking like the user about what we create, and by employing general principles of cleanliness, organization, and clarity everywhere we touch in the code. Ideally, we would employ these principles everywhere else in our lives to truly understand them: our homes, our minds, and our code base as well. 

Using momentum, we understand that when something starts, it is easier to keep going. When our homes are clean, we like to keep them clean. When we enter a clean space, we immediately form the unconscious belief "this is a clean space." We will then feel that mess is out of place, instead of vise versa, because our default assumption about the space is that it is _clean_ by nature.

We then are more inclined to act in alignment with this unconscious belief. The same can be true of any given code base, or someone's personal vehicle, or even inside their mind. So, when we keep something clear and organized, we are more likely to continue to use that momentum (predicated on an unconscious belief that that space is clear and clean by default) to continue to keep it so. In this vain, "mess" will start to feel out of place, instead of the norm. So should we begin to employ this mindset in our lives, it will naturally carry over into our development. We won't be able to stop it!

**Questions we can ask ourselves to improve:**
<ul>
<li>What does [this feature I am building] do?</li>
<li>Is it clear to the user without making them think?</li>
<li>Can I make this more efficient and/or intuitive for the user?</li>
<li>How can do I do this in readable, minimal code that will (using good principles of clarity) not add "clutter" to my codebase? (For example- ask the previous three questions but for the code you have written to create said feature)</li>
</ul>

#Sum
To sum up the above principles,
**<ul>
<li>Clarity in design builds trust and user confidence</li>
<li>Users prefer to use patterns of thinking (what looks obvious and intuitive) rather than having to "think" too hard about what they are doing</li>
<li>Employing principles of clarity in our design, our code, and in our daily lives will make us better developers</li>
</ul>**