Reductionism in Web Design

Reductionism in Web Design

In the field of design, the phrase "complexity is the enemy" speaks to how keeping things simple makes our work more functional.

With the modern crop of technologies that dole out increasing amounts of functionality, it’s important that we take the time to ensure a balanced level between oversimplification to the level that insults our visitor’s sense of competency and extreme complexity which endangers their experience.

In this article, I want to talk about the idea of reductionism — a process that improves the efficacy of our designs as well as the time we spend making and maintaining them.

Going "back to basics" and challenging the way we design, write code and produce content will de-clutter our interfaces, improve the readability of our web copy, speed up deployment,  make things easier to use, and reduce our maintenance requirements.

Reductionism in Web Design

It’s important to define what reductionism is in the context of web design. While ideas towards reductionism vary depending on who you ask, a simple definition is that reductionist methods boil down complex things to simpler things, which might include modularizing the system into more digestible components; all of this while avoiding losses in value (fidelity) and usefulness.

Essentially, it means that if you have something that’s bloated, heavy or complex — removing some bulk will improve your work.

Reductionism in Web DesignReductionism doesn’t mean minimalism – but they can work hand in hand.

Understanding the complexity of things by reducing them into smaller components allow us as "web scientists" to better maintain and organize what we produce.

While reductionism allows us to objectively strip away the complexity and see the fundamental principles that guide our work, it specifically highlights the importance of knowing what is beneficial to the end user and to us as the makers of these products.

As a practice, we can save ourselves time and money (by not undertaking unnecessary work) and free our visitors from distractions.

Benefits for the User Experience

Sometimes, we as web professionals spend a great deal of time trying to plan and "pre-react" to situations that will unlikely happen.

We want to give all users every single function that they want/may want. This mentality — though well-intentioned — usually backfires and we end up with something over-engineered and scaled to epic proportions.

But if we just provide our users the things they really need (and nothing more), it reduces the amount of thinking and cognitive processing we subject them to.

If we think about the concept of reductionism in this way, having more features, spending more development time in things practically no one will use, and pre-planning every single potential situation actually makes it worse for our users.

Reductionism in Web DesignReducing the amount of content a visitor needs to give to sign up for a web service is an example of reductionism.

The key point to take away is that reductionism is more than just some quick technique to boost your work’s quality. It’s a way of life and a beautiful ideology for maintaining a tight workflow.

Principles of the Methodology

In web design, there are three main places we can apply reductionism:

  1. Website content
  2. Code
  3. Design

Additionally, you could apply reductionism in the way your web design business works and how you approach developing solutions to a client’s problems.

Principles of the MethodologyThe three reductionist methods relative to building and creating websites.

Whether you’re trying to apply a reductionist methodology to your content, code or design, the principle remains the same: You want to ensure that everything in your product is absolutely critical to the people who’ll be using it.

End users hate being confused or feeling like they’ve lost control; giving them the power of having more time to read your content, achieving a task with your user interface quicker and so forth improves their experience.

The defining characteristic of our work then becomes quality rather than quantity. It’s not going to be about having 100 features, it’s about having two really great ones.

Content Reductionism

Content reductionism can be approached in many ways. The simplest way is taking your copy, reading through it, and paying attention to ways you can simplify the structure, reduce the word count, remove redundancy, strike out jargon, and just anything that doesn’t really add any value to it.

Of course, there’s more to content than text. Image or visual sensory reductionism can be performed by taking out gratuitous graphics that simply serve as eye-candy and page bloat, but doesn’t really help drive your points across to the reader. Remember that a picture should be worth a thousand words. Using an image should reduce the amount of stuff you have to write, otherwise, it doesn’t belong in your copy.

Content ReductionismBreaking content into what’s necessary and what can be omitted increases readability.

Code Reductionism

Code reductionism is all about simplifying your code and making sure it can’t be written any better.

However, this process isn’t that simple, and we also have to make micro-decisions in certain cases and go in favour of semantic and web-accessible, yet lengthier code.

Code reductionism can also take place in the amount of web technologies we use. If you can produce a satisfactory effect using CSS (such as this CSS-only hover effect), there’s no point in over-engineering the effect by making it dependent on JavaScript or Flash.

Code ReductionismSemantic and minimal code will increase the speed at which your website loads.

Design Reductionism

Design reductionism can be established through the ideals of simplicity, usability and stating the obvious.

Steve Krug’s book, Don’t Make Me Think!, has a title that summarizes the concept well. We ought to pay attention to the intuitiveness in our designs and by reducing design elements, our designs require less thinking and processing on our user’s behalf.

If you have doubts about a particular design element — it probably means you can take it out.

Design ReductionismIncreasing the simplicity through functional design will boost end-user satisfaction.

Reductionism Tips

The key point to maintain is that when you apply reductionism to your work, the final product should be better or equal to your current state. It’s worth noting that reductionism doesn’t preach arbitrarily taking things out just to reduce bloat, but rather, encouraging careful and thorough thinking to see if we can make things better by way of simplification. Sometimes things need to be complex or complex things are already as simple as they’ll get.

Reductionism TipsRemove that waffle! End users don’t want lengthy complex documents to read.

To Achieve Content Reductionism

  • Focus on the quality of what you produce, not how long it is
  • If you can say it in fewer words while still getting your point across, go for it
  • Reduce at the end so that you can see how taking something away will affect the entire picture
  • Avoid technical language and jargon, it makes content convoluted and exclusionary
  • Know who you’re writing for and learn what they need/want to know
  • Use visuals to reduce the amount of text you have to write and to improve comprehension
  • Use headings to modularize your content into logical groupings
  • Make things easier to read by using bulleted points instead of paragraphs

To Achieve Content ReductionismUsing the right element for the right job makes website maintenance a lot easier.

To Achieve Code Reductionism

  • Have a solid plan and idea of what you’re going to develop
  • Examine your code frequently and be vigilant against redundancy when you spot it
  • Decide which technology will do the job you require with the least amount of code
  • Look at your specifications and think of ways it can be done better with less code
  • Visit your code regularly and eliminate the zombies
  • Experiment with your code and see if you can simplify the structure
  • Minify your code to reduce file size
  • Try to write code natively before using an abstracted layer (like MooTools or jQuery)

To Achieve Design Reductionism

  • Reduce the number of clicks and mouse movement required to find content
  • Whitespace gives breathing room for the eyes and for the content of a website — avoid cramping things together
  • Simplicity is beautiful: reduce how much information is thrown onto the screen
  • Don’t use unnecessary flourishes and widgets
  • Split test and see if people are accessing things optimally
  • Reuse design elements to avoid redundant objects
  • Ask yourself what the value of a design element is and if it deserves to be included in your canvas

To Achieve Code ReductionismKeep it simple, stupid (like in Occam’s razor)! Complex solutions are much harder to use.

To the Power of 50%

One reductionist method I follow is the "power of 50%" concept. In essence, it’s about taking whatever you have right now and then breaking it down until you eliminate 50% it.

Whether you’re reducing your web copy in half, cutting down your code base to 50%, or taking out half of the design elements you’ve plugged in — the theory is you reduce the dilation of your product and enhance the quality of what’s left.

While this may seem difficult, the guideline holds true in that, in many cases, the amount of excess that exists in all manners of things is far too disproportionate.

To the Power of 50%Removing 50% of a website’s excess can have profound effects on its usability.

Keep in mind, though, that going over the top with reductionism is possible. If you keep squeezing the juice out of what you create, you may not have enough to drink. Therefore, it makes sense to be thoughtful when applying reductionism.

Final Thoughts

Determining the best way to apply reductionism to your work will differ on a project-to-project basis.

It takes time and effort to get into this mindset of being proactive in creating less stuff, but the ideology it pertains to is grounded in a simple truth: people hate complexity and unnecessary stress. There’s nothing worse than being confused or feeling like you’ve lost control.

Final ThoughtsSimplified information architecture is just one way to succeed in reductionism.

Reductionism benefits you in the long run and applying its principles to web design is simple. While we accept that over-thinking solutions occurs regularly and we can get a bit sloppy as a result — the reductionist method stands as a way of improving the overall quality of work, which results in us gaining a greater appreciation for refining our thoughts and our products.

In your next project, think of ways to drain away some of the excess.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.