Blog

Form vs. Function: Applying a 2000 Year Old Architectural Theory to Website Design

As a former architect, I'm always fascinated by how closely the architectural design process mirrors that of designing websites. Whether designing a building, or an online property, one of the biggest challenges is determining which features are paramount to the success of the project, and which are purely for aesthetical value.

In both architecture and web design, extra frills are time consuming, expensive and can detract from usability, so it's best to have sound reasoning for including elaborate, ornamental features.

Aesthetically pleasing or not, successful websites are those that convert visitors into loyal customers. Even the most beautifully designed websites in the world are failures if they do not make money for their owners. Remember, you probably have one shot at converting each visitor that lands on your page. Within a matter of seconds a visitor determines whether to explore, or leave your website.

Similarly, architecture that is strictly form-based, often fails to function as usable space. Frank Gehry's Walt Disney Concert Hall in Los Angeles, for example, was designed as an object. The structure is absolutely stunning as a sculptural piece, but fails to meet many functional requirements of a successful concert space.

Critics have noted the following fatal flaws:

- The interior is dark, empty and feels cold and unwelcoming.
-There's a vast amount of wasted space, which could otherwise facilitate amenities like concessions or restrooms.
-The acoustics are subpar
-Legroom is insufficient.

The Debate: Form vs. Function

Let's take a step back and learn some valuable lessons from a two-thousand year old architectural theory.

In The Ten Books of Architecture from the 1stcentury A.D., author Marcus Vitruvius Pollio laid out the three fundamental elements of "good architecture":

1. Firmita (soundness)
2. Utilitas (utility)
3. Venustras (form)

For argument's sake, let's extract the overarching philosophy of Pollio's seminal work, and focus on form vs. function (utility). English architect, designer and theorist, Augustus Welby Pugin wrote that "There should be no features about a building which are not necessary for convenience, construction, or propriety."

Pugin's point: cut out the bells and whistles, and include only what is necessary for a successful project. While the gargoyles on the Chrysler Building have become intertwined with its legacy, the building would still serve its function sans the mythical creatures.

For purists, form must follow function, to ensure that "ornamental" elements are not haphazardly implemented.  In 1896, American architect Louis Sullivan -pioneer of the modern skyscraper- coined the phrase "form (ever) follows function".

Sullivan's apprentice, a young Frank Lloyd Wright, later applied this theory to his own practice. Wright went on to design some of the most cherished architecture the world has ever known. His spaces are inviting, and feel like home. He designed for the user, not for himself.

The Dilemma: What Goes Wrong?

Both architecture and web design have been plagued with designer's conceit, in which form takes precedent over function. Architects are the original interactive designers. The spaces they create should be easily navigable, and complimentary to the intended use.

Unfortunately many architects design for themselves, not for their clients. The result: pure disaster! It should be of no surprise that the world's most elite design-centric architects have, from a usability standpoint, the worst websites.

A May 22, 2010 article in Fast Company titled "Why Can't the World's Best Architects Build Better Web Sites?" provides interesting food for thought. Here's a rather poignant quip from the author: "The most un-usable architecture firm Websites are often exactly like the buildings those architects design: Created to make a statement, rather than focus on everyday livability. Perhaps they have to solve one problem before they can tackle the other."

The Application: How Does This Relate to Website Design?

Designing a website for optimal lead generation and conversion is an applied science, not an exercise in abstract design. A design-centric approach is more forgiving when designing for a client like an artist or fashion designer; however, for a service or e-commerce business, it's a recipe for failure. It takes more than a working knowledge of Photoshop to design a successful website.
When our company interviews website designers, one of the first questions we ask is, "What makes a website successful?" Few answer correctly.

Many designers obsess over drop shadows, fancy typefaces and quirky layouts, only to neglect User Interface Design. A lot of research has been done on best placement of features like site navigation, messaging and calls to action. Don't re-invent the wheel!
Architects know that the most logical place for the front door of a home is on the front of the structure. Placing it on the side, for instance, would disorient the user. Think of your website as your own home. Visitors should feel welcome, enjoy exploring and yearn to come back.

Tips for achieving an effective user experience:

  • Your Homepage is the front of your "house", so make it easy for visitors to enter
    This is accomplished through clear messaging and calls to action, which answer the questions, "Why am I here?", and "Where do I go next?" Provide a clear and direct path to your core content, and eliminate any chance of disorienting or confusing your visitors. Consider your sub-pages as "rooms" within your "house", and incorporate buttons like "Sign Up" or "Buy Now" to entice exploration.
  • Once inside, visitors should be able to navigate comfortably, and want to stay for a while
    User Interface Design and stickiness will accomplish these goals. If visitors enjoy using your website, and find the content worth reading, they will spend more time on-site, thus increasing your chances for lead capture.
    Here are some examples of effective navigational techniques:

    • Provide a  link back to the Homepage on every sub-page
    • For complex sitemaps, include breadcrumb navigation to show visitors where they are, and how to get back to where they came from
    • For ecommerce sites, streamline the checkout process to just a few clicks.
    • Place links to your core site features in highly visible locations.
  • Upon leaving, visitors should be compelled to return
    If you fail to provide a reason for a visitor to return, then you've lost a potential customer. How do you encourage visitors to return to your site? Fresh content. Entice repeat visits by incorporating a variety of "sticky" features including blog posts, videos and social media elements.

Share this post

Comments on this post

  1. Anthony Doyle said:

    Thank you for your article, very interesting analysis of web design!

Comment on this post

*
*

Ready to discuss your project?
Request a Quote
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052