Reductionism in Web Design

Aug 5 2010 by Alexander Dawson | 42 Comments

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.

42 Comments

Eric

August 5th, 2010

Thanks for this. I’m just getting started, and articles like this are a big help in my learning the right way. I’ll be back for more, soon.

John

August 5th, 2010

Great article. Thank you for making the abstracts of reductionism tangible and relevant to what we do.

Drew Clarke

August 5th, 2010

I’m sure it’s been said before but Jakob Nielsen’s site although it maybe superby usable is dreadful even amateurish from a design and user engagement perspective.

Jansen Tolle

August 5th, 2010

Great article. Less is more. This article also points out that it also works the other way: more is less (useful, usable, effective).

innr

August 5th, 2010

Thanks for this article, I’m a huge fan of minimalism, and articles like this keep giving me inspiration and confirm, I’m on the right path.

Niubi

August 5th, 2010

Excellent points. I think that more ecommerce websites could really do with reductionism – after all, the mind can only cope with so many things at once, and the sheer array of goodies is just bewildering sometimes. I think DubLi are probably the least worst for that.

JF

August 5th, 2010

Well said.

Bradley

August 5th, 2010

That was, ironically, a very long article on reductionism.

Nice article though, and something I strive for in my designs.

Shaun

August 5th, 2010

Great article. Complexity definitely makes web design more difficult.

Terry

August 5th, 2010

Terrific article, Alexander! All of this is especially poignant in the age of mobile Web browsing.

Alex Kessinger

August 5th, 2010

This was awesome, I love seeing how ideas outside of web design, can help us make better web pages. Thanks for a new paradigm in which to consider web pages.

Johnny

August 5th, 2010

Wonderful tips for beginners and the like. I like to live by the idea that minimalism is what design really is. The less you can put into something while still making it pretty is what I see as beautiful design.

Web Wizard

August 5th, 2010

more and more important is the fact how liht is your website… :@

James Moralde

August 5th, 2010

I too am more inclined to keep things functionally simple, whether it be in code or in my posts.

That ‘Power of 50%’ somehow calls to mind something I’ve read sometime ago about the ’20-80 policy’ where they say that in most of what we do now on our sites, only 20% of it actually is enough to get the desired result. In other words, the other 80% is needless work. We can cut it out of the routine.

Alexander Dawson

August 6th, 2010

I’m glad everyone has enjoyed the article!

@James Moralde: You are correct! The 80/20 theory (Pareto principle) is widely used in the world of software development where it’s said that 80% of the people only use 20% of the functionality. While the “power of 50%” is specific to reducing excess, the 80/20 rule itself is another well defined perspective to emphasise the importance of reducing what you have (or making the stuff that matters more accessible and visible).

David

August 6th, 2010

Hi Alexander,
Wonderful and comprehensive article. I think having a reductionist mind-set from the start of a project produces the best results, from meeting the client to the site going live. Clients can often be inclined to try to cram as many items onto a page as possible but once explained to them the benefits of keeping a design more minimalist, they will often change their mind and agree (especially when shown mock-ups). CODA is a great example to finish your article with as the architecture, visual design and the usability of the site appears very simple and easy to use (especially the checkout process). Thanks for posting.

Nathan Williams

August 6th, 2010

Reductionism works very well when the expectation are clear and the time frame is limited. Otherwise a number of web design projects can go on for months by the trial and error method. Good communication and in-depth knowledge are needed for reductionism to work. Great post Alexander! Thanks.

Tom

August 6th, 2010

Anything that reduces the amount of work I do whilst improving results is great to me!

Rupnarayan Bhattacharya

August 6th, 2010

There are still a number of sites which really look overcrowded with excess content and the idea behind that they believe the website is like a departmental store, where More content more features means more traffic more business. But if the user does not find what he is looking for within 30 seconds he will go for other websites.

Zlatan Halilovic

August 6th, 2010

“Try to write code natively before using an abstracted layer (like MooTools or jQuery)”

And deal with all the browser inconsistencies and write 5-10 lines of code instead of one? No thanks, I’ll rather stick to MooTools.

Rob Jenkins

August 7th, 2010

Nice work, Alexander. can’t help thinking Reductionism is just another way of saying ‘streamlining’ but I like the methodological approach. I would also suggest introducing (or revising) a list of site objectives prior to this process. This may help establish whether or not the process was a success. I just hope that by adopting these ideals I don’t end up reducing the client’s bill by 50% too ;)

Chris Khoo

August 8th, 2010

A great book on simplicity (although the title doesn’t necessarily indicate it) is Presentation Zen.

Go read it if you haven’t already :-).

Chris

Antonio

August 8th, 2010

Awesome read. Thank you for posting!!!!!

Gyrel Dagooc

August 8th, 2010

Wow this is really awesome. Well explained and detailed. This is must check out for new web designers like me.

Machin

August 10th, 2010

Great post. At it’s core simplicity is a catalyst to focus the user on where you want them to go or what you want them to achieve.

However this is all still futile unless the web designer properly communicates the importance of focus and usability to the client (who more often than not wants to fill every bit of white-space with extraneous content).

Joshua Keenes

August 11th, 2010

Really fantastic and hugely useful post there Alex. Thanks for sharing!

MONOmoda

August 11th, 2010

Thanks for this article. We also have been working on the principle of reducing our site to the absolute necessary. Sometimes you can take out too much, but then you can add things in as you need them rather than have lots of things you don’t need. We recently redesigned our site http://monomoda.com along this principle, as the site is for design inspiration, so we needed a design that would let the work shine.

Luke

August 11th, 2010

I’m going to aim for reductionism in my comment and basically just say – good stuff!

Moo

August 11th, 2010

It’s true that we need to reduce them, but I doubt about reducing redundancy in content is really possible in e-commerce site, especially when it gets to the SEO phase.

Mark A Hart

August 13th, 2010

Reductionism has two definitions. http://dictionary.reference.com/browse/reductionism.

Your article examined one alternative of the meaning. The other definition includes”to the point of minimizing, obscuring, or distorting it.” A comment from Einstein was directed to this. “Everything should be made as simple as possible, but not simpler.”

There are times when design variables are not independent. There are situations when something is more than the sum of its parts.

For example…
In terms of web design, just because a certain color and size call to action button works on a popular site, that doesn’t mean that duplicating this button on your site will produce great sales.

When someone thinks only within their discipline, this leads to a legacy of isolated practices – silos.

napi

August 18th, 2010

well said thanks

SJL Web Design

August 19th, 2010

Awesome article, making sure you only have the necessary content in your web design is vital!!

Great read!!

William Silva

August 27th, 2010

Thanks for the article and advise. We are working hard to implement some of these changes to our websites and our customer’s websites as well.

Paul Dukes

August 29th, 2010

Great article.

I think I need to forward bits of this article to a client of mine. He can’t seem to get away from giving me redundant jargon filled copy for his site.

You voiced many of my reasons a lot better than I’ve been able to over the past few years. Maybe if I can get him to read this it will start to sink in.

Alex

September 1st, 2010

Nice Read!

I also think it applies to my number one passion composing or layering music. I always find myself constructing layer after layer or sound effects, percussion especially then my last task is the reduction until it boils down to a cohesive whole. Fun but agonising process.

Cheers

Craig

September 9th, 2010

Great article, I have been down the route of trying to add as many keywords, images etc until it was too bloated, stripping away all the bloat made for a better design definitely, and the more design elements the more chances for errors and harder to maintain further down the project.

Jun

December 1st, 2010

I myself, prefer a minimalistic approach to websites; it makes them easier to read and access, while staying true to the content.

Dan

February 25th, 2011

Yahoo!’s ToS is a legal document: you might not want to read it, but that’s not really the point.

@remithillier

April 22nd, 2011

Nice article, very clear, with many tips.
“Less whitespace = cheap; more whitespace = luxury”, check out the following article by @markboulton: http://bit.ly/17Ddgn

Mark

April 25th, 2011

Designer of the sixrevisions.com has followed some of the concepts prooperly

webdesign - 45

November 1st, 2011

Excellent article. I’ve never heard of the term reductionism before. I think in relation to web design this is a great concept. I think it’s much harder to hold back and be efficient with the web design rather than trying to add everything possible into the site build. Less is more.

Tom Foolry

November 14th, 2011

Great article, you bring up some key points in web design with this reductionism design. I think that this can also be applied to other areas of technology, such as minimalistic videogames (see: Angry Birds). I think the big point is to don’t overcomplitcate things.

Leave a Comment

Subscribe to the comments on this article.