Skip to main content

The 3 Golden Rules of Clean Web Design

Ravi Rajan is a program director working in India. He writes articles on management, creativity, and creating user-centric design philosophy

The key to great design is not to “strip” something down just to make it simple, but to make sure it’s easy to figure out with as few distractions as possible. Thus, good design is clear but not necessarily simple.

The key to great design is not to “strip” something down just to make it simple, but to make sure it’s easy to figure out with as few distractions as possible. Thus, good design is clear but not necessarily simple.

Is Simplicity Overrated?

During the 15th century, French philosopher and mathematician Blaise Pascal wrote in a letter to a friend, “If I had more time, I would have written a shorter letter.”

What Pascal meant was what he had just written was extempore, and he couldn’t spend enough time processing his ideas and thoughts into a well-crafted simpler piece.

That said, creating something simple without deviating from the essence of the theme is really hard, whether it is a letter to a friend or designing a mobile app.

And most designers strive to create simple user interfaces, simple user interactions, and simple user experiences while making new products. We recognize that it is this simplicity that makes our product feel “good” for the user. Simplicity is no doubt referred to as one of the fundamental principles of good design.

That is why design heavyweight, Nielsen Norman Group, rightly includes it in its definition of user experience:

“The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.”

But that brings us to an interesting question: Is simplicity overrated? Or is design the pursuit of something else entirely?

Simplicity in Web Design

As designers, we assume that simplicity is the ultimate goal of good design. Designers preach that notion to each other. They pass the gospel on to their mentees and budding designers. They write about it in articles. Simplicity is everywhere. And we sure love it when we see it.

But when, exactly, do we see it? What constitutes as simple?

“Simple” is a relative word. It has no definitive value. The simplicity of a thing can only be measured in comparison to something more complex. Simplicity is a difficult concept to quantify and define.

Tom Krcha, an author at the Web Designer Depot, says its subjectivity stems from its multiple meanings; it can refer to how clean the design is, the complexity of the build, how intuitive it is, or how many features are included. He finally defines simplicity as serving users what they need, when they need it in the most straightforward way possible.

But then serving users what they need in the most straightforward way possible is not that simple.

Take the iPhone, for example. Practically every designer calls the iPhone the hallmark example of simplicity. This is absurd. The iPhone, which handles phone calls, weather reports, to-do lists, maps, text messages, video, photography, audio recording, games, web use, and about a million other things, is so far from simple. It's unbearably complex when we think about all the features built into it.

In other words, it’s an incredible example of a complexly designed piece of software.

Scroll to Continue

Same with the Google interface also. The Google site loads in just over a second, which is good because every extra second a user has to wait makes them more likely to leave. The design of its search homepage is simple, and clean, and offers many options right from the home page.

As a result, the experience is extremely smooth since it takes very little time for users to type in their queries and find desired results. The user experience is also fun when special occasions are noted with animations on the home page (adding a bit of delightful personality to the design).

In other words, it is an incredibly designed and complex site.

Both iPhone and the Google search page might be called sophisticated, beautifully designed, thoroughly considered, and extraordinarily mindful of their users, but one thing they almost certainly could not be called is “simple.”

So, what are we really talking about when we talk about simplicity? It is Clarity.

Not everything can be made simple. Not everything can be made easy to use. Many apps and services are necessarily complex. Massive supplier management site systems, for example, or enterprise management systems can be incredibly complex.

But one thing they can all be made is a bit cleaner. No matter how complex a design, no matter how many tasks it supports, how many user roles are accommodated, or how many different ways it offers to perform the same daily actions, every screen, and every detail of those screens can be made cleaner.

This is the underlying core philosophy behind Apple’s or Google’s minimalistic design. The key is not to “strip” something down just to make it simple, but to make sure it’s easy to figure out and access with as few distractions as possible. In a nutshell, good design is clean but not necessarily simple.

Here are three golden rules of clean web design:

  1. Less choice = more satisfaction
  2. Hierarchy is the key to clarity
  3. Utilize user failures
Less Choice = More Satisfaction

Less Choice = More Satisfaction

1. Less Choice = More Satisfaction

It all began with a jam. In 2000, psychologists Sheena Iyengar and Mark Lepper published a remarkable study. One day, shoppers at an upscale food market saw a display table with 24 varieties of gourmet jam. Those who sampled the spreads received a coupon for $1 off any jam. On another day, shoppers saw a similar table, except that only six varieties of the jam were on display.

Which stall are you most likely to stop and taste the jam?

Yes, people love choices and we mostly believe that the more choices, the better it is. But the results were unexpectedly different. They found that when it came to buying the jam, 30% of people bought a jar at the stall that sold 6 types, but only 3% of people bought a jar at the stall selling 24 types. In other words, customers given too many choices are ten times less likely to buy!

Why is it so? Because when we get more options, we suffer from "choice paralysis". There are too many options for us to satisfactorily compare them and feel that we're able to make an adequate choice. And instead of making a poor choice, we end up not choosing at all and move away from the site once and for all.

In his book, The Paradox of Choice, psychologist Barry Schwartz wrote:

“When you have all these choices, you have an enormous problem gathering all the information to decide which is the right one. You start looking over your shoulder, thinking that if you’d made a different choice, you’d have done better. So, there’s regret, which makes you less satisfied with what you have chosen, whether or not there’s good reason to have regrets. It’s easy to imagine there was a better option, even if there wasn’t really, because you can’t possibly examine all of them.”

When creating a design, often the designers want to include it all. "Our product has so many great options and we should give all the options to the users. They will appreciate our service because it has more cool stuff than our competitors, right?" Well, not quite.

Users, when faced with too many choices get stuck and often end up becoming confused, frustrated, and ready to leave. You might think that giving users endless options to choose from will help, but, in reality, it increases the cognitive load or "excessive thinking." That is why the lesser the choices, the more satisfied the users and the cleaner will be the design.

2. Hierarchy Is the Key to Clarity

The human brain categorizes information by grouping similar visual elements and organizing them into meaningful patterns. As designers, we need to ride on the naturally organizing ability of our brains by creating an information hierarchy within our sites.

Information that is hierarchically organized will be more effective in communication as compared to unorganized information. This helps the user focus on important elements, instead of on the information clutter and makes the user experience simple and intuitive.

Research suggests that poor navigation results in nearly 35% of users being unable to locate the right information. So, you need clear navigation that makes sense to the user and puts him/her in control.

Amazon, for instance, starts with broad categories that lead to more specific categories as you move along. Facebook focuses on the News Feed (the main content a user wants to see), which contains all the important updates about what your friends are sharing.

On Facebook, you have a dashboard with your profile details, photos, friends, events, trending topics, and status updates on the other side. Twitter, on the other hand, contains an organized left sidebar with explore and navigation buttons to access your bookmarks, profile, lists, moments, settings, and display.

The key here is progressive disclosure. This means putting the most common and necessary elements of a task upfront and then dispersing everything else into a series of elements that get more and more granular as we go deeper inside. This not only makes the screens cleaner but puts the user in control as he navigates his way through the app or site.

Remember the user need not know everything upfront. He/she just needs enough information to proceed with his task. That is it!

3. Utilize User Failures

One of the key mistakes every designer makes is trying to create the “ideal” interface.

However, achieving a perfect result is impossible as people are different and even an experience of a single feature may range from good to ugly. That is why it is important to address user pain points and incorporate them into the design to avoid key problems and minimize the impact.

Therefore, it is necessary to find out, and then use the standard failure patterns. Failure Mapping is one way to ensure that you are armed with enough information to make informed decisions about optimizing user experience and increasing conversions.

it involves the identification of product usage scenarios and features causing problems. A list of such scenarios should be enough to cover the key problems with suggestions for maximum personalization for customers with different demographic and personality factors.

Facebook is a great example of a good design developed by repeated failure mapping exercises. Facebook is often the first introduction to the Internet for developing countries and they have to make sure that their design is very intuitive. Otherwise, they run the risk that adoption will be low and failures high.

Remember the key to making your design clean is not to get scared of failures. User failures are just a way to get and identify the knowledge required to remarket your site to users more accurately and get them back into your user journey.

As Roger Ebert has rightly said,

“Identifying what’s wrong is often the best way to finding out what’s right.”

Sources

  • The Paradox of Choice — Barry Schwartz
  • Clean Design: Wellness for your Lifestyle — Robin Wilson
  • Design for How People Think — John Whalen PhD
  • User-Centered Design: A Developer's Guide to Building User-Friendly Applications — Travis Lowdermilk
  • The Tao of Design and User Experience: The Best Experience is No Experience — Andrew Ou
  • The Basics of User Experience Design: A UX Design Book by the Interaction Design Foundation — Mads Soegaard
  • Design as Art — Bruno Munari

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2022 Ravi Rajan

Related Articles