Form vs. Function: Finding the Balance

Form vs. Function: Finding the Balance

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Nick Finck

Published on October 29, 2001

Back to the basics
In 1896, architect Louis Henri Sullivan said, “Form ever follows function.” His quote implies not so much the importance of function over form, but rather that the two are intricately intertwined and inseparable. The same idea can be applied to any type of design, be it industrial, web, print or product. The problem is that most designers fail to draw from Sullivan’s words.

We have all seen them: sites that either lack any evidence of form or fail miserably when it comes to function. I’m not just talking about those cute personal sites found on many free web-hosting sites–extravagant corporate sites are often just as guilty as any of them. While both types of sites have their place on the web, it is important to understand where each of them have failed and why.

Corporate blues
Mohawk Paper Large corporate sites are often packed with functionality, as one can usually find any information needed on them . The problem is that most corporate sites often lack a pleasing form. The designs tend to fall in the category of what I would term as “safe” design. Nothing is unexpected. The navigation is on the left, there is a header and footer, the content stays within the 640 mark and the context makes up the majority of the page. It’s simple and it’s common–those two things alone make it “safe”. You won’t see any visitor getting lost on these kinds of sites (save for the sites that lack in structure and organization). In essence, you don’t have to re-invent the wheel to make these sites work because the user is accustomed to the layout and functionality.

Personal pandemonium
Hoggorm Small personal sites are often bloated with form. While there may be evidence of some functionality, the designer is often more worried about the visual appeal of the site. One can find flashy animated images placed on these kinds of sites just for the sake of being animated. They are often represented as galleries and portfolios or biographies and stories. The designs tend to be the same style of what is often referred to as “eye candy.” This is often summarized as “doing anything you can to get the users attention.” The most diverse sites are found by going to various personal sites and portfolios because they are expressions of the author/designer. These types of sites care less about selling something than they do presenting it.

In the designs of both types of sites, a major factor is overlooked: there can’t be form without some kind of function. If a site looks good but no one can figure out how to access the information or art, then how can it be considered a success? Yet, there can’t be function without some concept of form. The essence of function relies on form, i.e. buttons and navigational elements need that form to convey to the user that they have a purpose, a reason for existence. The same can be said of the structure of a web site.

The key
Kaliber10000 The key to an well built site lies not so much in how flashy its design is or how functional it may be. The key is the success is a solid balance of form and function to deliver the envisioned idea and to generate the ideal user experience. The first step in developing a good balance is to have a firm understanding of what the site is going to be about. In other words, a site’s function must be identified before its form can be developed.

The ever-elusive function
Discovering the function of a site is not as easy as it may sound. Many sites on the net lack functionality and purpose. And for good reason–designer(s) aren’t exactly sure what exactly the purpose is. The key to developing any successful web site is to have a strong purpose and to follow that to the end. A few important questions to ask oneself are: what will the site do and how will it work? Who will use it? Assuming the function of the site works as intended, what will the end result be? What technologies will be used to produce that functionality and what limitations do they have? Will everyone be able to access and understand it?

Build the form
CounterSpace After establishing the purpose of the site and taking a firm grasp on its intended functionality, it’s time to start on the form. This typically consists of the design as well as the look and feel of the site, while also considering things like structure and organization, which fit somewhere between form and function. The main items to consider in designing the form of a site is to know the audience and to build it based upon how they interact with elements. Occasionally, good usability testing can play a core role in finding these things and bringing them to the surface. Some questions to ask yourself are: What does the audience relate to when they think about this concept? What colors would appeal to the user? How much content should be on any given page and how should it be balanced on the page? Should the navigational elements be on the left or right side of the page? How can the design allow smooth navigation throughout the site? A well-designed site’s form must literally follow in the path of, as well as compliment, its function.

Find the balance
Lundstrom The “perfect” balance of form and function is always going to be difficult to find. Some designers spend years working to prefect the balance of form and function-it’s often an evolving process that changes as the designer’s experiences develop and change his or her outlook and attitude toward what is the “perfect” balance. After succeeding in balancing form and function to a satisfactory level, it’s time to notice a few key indicators in the design. Those key items are, first: the functionality of the site will be seamless with the user experience. The user will not struggle with interface or navigational issues like site structure and organization; they won’t see any of that. The user will only see the message, be it documentation, art, literature, music, video or whatever–everything else will appear transparent. The second indication to look for is that the form of the site will compliment the content; it will add to the site and not be distracting or annoying. A well-designed site will balance form and function to the point where those elements are invisible to the user. The user experience is what’s important in web design, not just the way it appears or works in the designer’s eyes.

If Sullivan could see the web today, he would probably roll over in his grave. Design is struggling. The balance of form and function is more commonly than not shifted to one side or the other, but the web is still young. As with many things in life, we learn from experience. Sometimes we have to fail in order to know what it takes to succeed. Taking into consideration the balance of form and function only helps a designer to achieve his or her ultimate goal: the ideal user experience that conveys the intended message through the seamless form and function of the design.

HighFive [editor’s note: link removed]
Webby Awards
Communication Arts

Related Topics: Web Design, Liquid Web Design

Nick Finck is a 13-year veteran of the web and considered a web craftsman by trade. His skills traverse web design, web development, user research, web analysis, information architecture, and web publishing. Nick founded his first web consultancy in 1994 in Portland, Oregon, and has since created web experiences for various Fortune 50 and 500 companies including Adobe, Boeing, Blue Cross / Blue Shield, Cisco, CitiGroup, FDIC, HP, IBM, Microsoft, PBS, Peet’s Coffee, and others. He currently resides in Seattle, Washington and is a co-founder of Blue Flavor, a web strategy company that focuses on people-centric solutions. More information about Nick can be found on his web site,