Design Matters Part 1

The quote “Form follows function” has been widely mis-represented in meaning that function is the most important thing and that form is less important and can easily be left out. The actual quote, from Louis Sullivan, “Form ever follow function” means that form is built on top of function and that form is the expression of functionality:

“It is the pervading law of all things organic and inorganic,
Of all things physical and metaphysical,
Of all things human and all things super-human,
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.”

It is my belief that “Form is the Function” in so much as the form is what makes the function successful. Often times the form is defined by the function. Now, I’m sure most non-designer would initially disagree with me, but let’s look at a few examples.

Membership Shopping Site

The sites below, Shop It To Me and Gilt, are both discount shopping sites that require membership. They are virtually identical until you look at their design, or form. Both function similarly in that members are sent an email (seen below) to show that day’s specials and incite you to buy now. Both feed their members products based on their profile and choices. The difference is in the form. Gilt has a much more high-end look and feel and, for the most part, shows a single sample of the product being used, essentially a lifestyle shot. Shop It To Me went with body-less clothes on a plain background. Their logo, the illustration of the lazy man on the couch, the quantity over quality aspect of product shots all cheapen their brand and make it a far less enticing place to shop from.

How does this impact success? While there are likely multiple factors that impact site visits, and I have no information on their sales, Gilt has more than twice the unique visitor traffic per month of Shop It To Me, despite the poor economy and the fact that Gilt seems to be appealing to a more elite audience and Shop It To Me is appealing to the more spend-thrifty audience:

Both sites have similar products, similar functionality, the obvious difference is their form.

This is not atypical of web platforms: the better the design, the more successful the company. It’s been argued that the better designed sites are because of their success not the reverse. The easy response to this is: If a company is already successful without taking the extra time and budget for a design upgrade, why spend the money? How often have you visited an ugly site and preferred a more elegantly designed competitor? This is because quality of design not only makes the site look more professional and trustworthy, it actually functions better because of that design.

A design agency I recently worked for focused 90% of it’s business on analyzing how design impacts conversion. Things as minor as the color of the CTA (call to action) had a significant impact on the number of conversions. More obvious aspects such as email, banner ad and landing pages that reflected each other’s messaging and design had a huge impact on conversions. The testing process would begin with a few different wireframes with similar design elements. The champion wireframe would then be retested with different design elements, over and over to find the most successful outcome. If the function of the site was to convert visitors to customers, the form was the differentiator.

While I completely agree that a site that functions better is more successful, the fact that functionality is so plug and play makes functionality a level playing field. The great differentiator is the form.


Update: The following article discusses a study proving that elegant design effects user trust. A good read:

Prettier Websites Make For More Trusting Web Surfers Study Finds

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>