Form and Function in Web Design

Louis Sullivan - building design If your site isn’t generating many sales or leads it’s likely that your site’s form and function are out of alignment.

“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… that form ever follows function. This is the law.” Louis H. Sullivan (1896) 1

One issue in web design is that the focus is too often placed on the aesthetic form (layout, fonts, graphics, videos, etc.) rather than the actual function the website should perform.  It may seem boring to a designer but from a business perspective the real purpose of a website is to make money (online and/or offline).

With the business goals in mind, the functional requirement of a website is to offer products, promote services or in some cases simply to entice a visitor to look around and generate advertising revenue for them (e.g. YouTube and Facebook).

A well made website accomplishes business goals and acts as an extension (or in place) of the physical company. Aesthetically pleasing design elements are then chosen to compliment a website’s functional reason for existence and not overpower it.

Example: Amazon.ca

A great example of this is Amazon.ca, where the visual content of the site assist in the function of selling products through engaging visitors with time based promotions, and displaying personalized product recommendations.  At the same time however the top of the page is dedicated to the rather boring, but functionally powerful, site search bar that enables visitors access to their whole inventory of products.

Amazon.ca page sections

Example: Optimizely.com

Another example of a great balance of form and function can be seen on the site of Optimizely, a company that offers an A/B testing service. Optimizely’s website focuses on what they offer and immediately show you the power of their testing tool.

It’s a minimal design that clearly informs the visitor about what their business offers in an interactive way.  The site serves as a great sales tool because they don’t need to talk to you in person to give you guidance, they have clear step-by-step instructions within their website to do that for them.

https://www.optimizely.com
https://www.optimizely.com

Optimizely tour

 

How Can You Make Your Website More Functional?

Answering these 3 questions will help.

1. What is the purpose of your website?

Do you want to make sales, capture leads or drive brand awareness? Sometimes this can require a company to re-think how it does business and how the website will affect their offline business.

2. Who is your target audience?

‘Everyone’ is the wrong answer here.  If your website targets everyone then it won’t resonate with anyone.  You may have a large audience for your products or services, but it should be based around a certain group of people or behavior.  For example, a women’s athletic clothing store’s website may have the occasional male visitor, but your main audience will be women within a certain age range, geographic region, and income level.

3. How will this benefit your visitors?

At the end of the day, your visitors don’t care about who you are, they just want to know how you can make their life better.  Make sure it’s clear on your homepage how your products or services will benefit your visitors.   Incorporating these answers into your website is the starting foundation for a functional website and will guarantee that your site performance will improve.

Design With Function In Mind

Once you have the functional questions clearly answered then begin to work on the form of the website.  While working on the aesthetic phase of the website ensure that you regularly check back to ensure that the designs crafted align with the business goals set of the website.

The gold standard of web design then is a bond between form and function; where the form clarifies and enhances the function of a website – and the function guides the form.


Sullivan Building – image source

Notes:

  1. http://academics.triton.edu/faculty/fheitzman/tallofficebuilding.html