There are a lot of cool things you can do with your website. Web technology is amazing.
I’m a huge fan of visual content, interactive elements, and killer design. However, I’ve also seen the dangers of such elements. That’s what this article will cover.
My target audience is entrepreneurs who are trying to do SEO and web design. As an entrepreneur, you have to wear a lot of hats. Maybe you’re trying to do it all yourself. Maybe you’re outsourcing your web design, and tweaking SEO on your own.
The temptation to place more importance on a pretty web design than a functional one is not uncommon.
Entrepreneurs and the web designers they employ need to understand a fundamental law: Website usefulness is more important than website beauty.
Form Follows Function
In the field of architecture, there is a saying: Form follows function.
The American architect Louis Sullivan coined the phrase in 1896. Here’s what he wrote in a journal article entitled “The Tall Office Building Artistically Considered:”
Whether it be the sweeping eagle in his flight or the open apple blossom, the toiling work-horse, the blithe swan, the branching oak, the winding stream at its base, the drifting clouds, over all the coursing sun, form ever follows function, and this is the law. Where function does not change, form does not change. The granite rocks, the ever brooding hills, remain for ages; the lightning lives, comes into shape, and dies, in a twinkling.
It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.
He used the phrase “form ever follows function” three times in his article. It must have been important.
The saying has application in the fields of biology, anatomy, CrossFit, and, of course, web design.
Here’s the idea: The form/shape/appearance of a thing should serve the function/purpose/usefulness of a thing.
Design for function and then form, not the other way around.
Many web designers have accidentally turned this paradigm on its head. They design for form/appearance, hoping that the function will take care of itself. Sadly, function doesn’t take care of itself. Before designing a single pixel, you must identify the website’s purpose, core function, and how the user is going to use it.
Then, you can design something beautiful around that core functionality.
A Beautiful Website Could Distract Users
Beauty can distract.
It’s true in life, and it’s true in web design as well.
If you are looking at a website and thinking ‘wow!’, then you might also be thinking ‘how?’ Often, designers are focused on the appearance of the site rather than how users are going to be using that site.
If a user comes to your site but doesn’t know what to do or how to do it, then your website is harming you, not helping you.
Thankfully, competent web designers, developers, and UX designers know how to meld beauty and function. Not only does the website below look great, but it also works great.
Blending aesthetics and function isn’t hard, but it does take some coordination among developers, designers, and marketers.
Websites That Lack Functionality Have High Bounce Rates
What might happen if users don’t know what to do on your website? They might bounce.
High bounce rates hurt your SEO. High bounce rates indicate that something is wrong, and you should probably find out why.
Often, high bounce rates are due to the primacy of design over function.
I’ve seen businesses redesign a website to make it look more current or pretty, only to experience far higher bounce rates and lower rankings after launch.
Don’t forget about mobile bounce rates; they are just as important as desktop bounce rates.
If your website is optimized for mobile, then it does more than just look good. It has to work well, too.
A Beautiful Website Often Loads Slowly
(If that word “flashy” got you thinking about using Flash, just stop. Right there. No flash. Please.)
I’m tired of seeing this.
It’s an actual screenshot of a website that I visited two minutes ago. I had to wait a long time for the thing to load.
Eventually, it was stunning. It had full-screen sliders, retina images, and really cool designs.
But before I got to see all those flashy designs, I was turned off to the entire website, brand, and product. Why?
Because it took forever to load.
(Don’t even try to blame this on slow WiFi! When it comes to Internet speed, I go with the fastest service available.)
Load time is enormously important for SEO, not to mention conversions. The faster your site, the more Google will like it.
But where is all that slow-loading cruft coming from? The answer: fancy designs.
Let me prove it to you. I picked one slow-loading website at random, and ran it through Google PageSpeed Insights.
Here are the results:
Many of those slow-loading features are due to eye-candy design. It looks good, but it’s dragging the entire site down with it.
A Website That Lacks Simplicity Leads to Confusion and Loss of Function
Millions of websites are needlessly complex.
Scientific research has shown that complexity leads to confusion in the area of website design. If a user is confused when he sees your website, then he obviously cannot function effectively on that website.
As Tommy Walker aptly pointed out in his ConversionXL article: “Simple websites are scientifically better.”
I can see that the people in this agency can make line drawings and moving pieces on their website. What I can’t seem to find is where to click, what to do, how to find out more, and how I can actually get somewhere.
The designers have front-loaded their creative features, but they have lost the website’s functional purpose.
Visual Design is Only One Part of the Equation
A website is a very complex thing.
I’ve been comparing two aspects of the site — its functionality and its appearance. Within these two broad arenas are numerous other issues. Notice how “visual design” is but one component of the wide array of website features.
The center point of the website’s features is the user. The person using the website is the single most important ingredient in this entire equation.
For this reason, you should design for the user — not just her eyes, but her actually doing what she needs to do on the website.
Isn’t There a Middle Ground?
Throughout this article, I’ve been pitting two concepts against each other: beauty and function.
Obviously, the two can exist in perfect harmony. Thousands of websites are amazing examples of the nexus of visually appealing and eminently workable websites.
To find this sweet spot, keep these things in mind:
- Form follows function: Plan the purpose of your website before you design the appearance.
- Simple is better, both visually and functionally.
- Load time matters: Eliminate unnecessary design features if they slow down the website.
- Make the purpose of the website obvious: Users should know exactly why the site exists.
- Make the next steps of the website apparent: Users should know exactly what to do next.
Make beautiful designs that work.
If you want to make an eye-popping, webby-winning website, you can do so. You don’t have to sacrifice beauty for functionality. Instead, you need to emphasize functionality first, and the beauty will follow. In fact, if you do this right, your website will probably even look better.
What is your approach to designing a website that looks good and functions well?
Subscribe to SEJ
Get our weekly newsletter from SEJ's Founder Loren Baker about the latest news in the industry!