“Form Follows Function (FFF)” – You can think for hours about these three words and for their explanation quite some words are necessary, for it is a frequently misunderstood design principle.
In my blog post I will explain the many misconceptions associated with FFF and I will show the importance of the design principle for the work of designers.
Brief historical abstract
FFF was mentioned by the American sculptor Horatio Greenough in 1852 for the first time1. Nevertheless FFF is usually associated with the architect Louis Sullivan, who writes in his essay “The tall office building artistically considered” in 1896: “[…] that form ever follows function.”1. Meanwhile, the principle grew over 150 years old and still has not lost any relevance in today’s world of digital media.
“Function” is derived from the Latin term “functio” and means “accomplishment” in its original sense2. Function defines for which purpose something can be used. The concept of function can be viewed from different perspectives. A usability expert will tend to think of functions that serve to achieve a goal efficiently. In his many examples from nature, Sullivan included not only this interpretation of function. He interprets the term “function” in a much more comprehensive sense3.
“Form” can be equated with the term aesthetics. Aesthetics is derived from the Greek word “aisthesis” which means “perception” and “sensation”4. Aesthetics is all about how we perceive and interpret the world through our five senses. Thus, the statement “that is aesthetically” does not merely mean “that something looks beautiful”. Accordingly, aesthetics is not just about the visual part of our perception5.
Reasons for misunderstandings
The origin of FFF is very old and oftentimes leads to some misunderstandings. In addition, FFF originally referred to architecture, which is why mistakes are made when you transfer it to the field of digital media.
The simplicity of FFF is Blessing and Curse at the same time. On the one hand, it is a catchy alliteration. On the other hand, it is a complex issue that cannot be communicated entirely through the simplified statement.
I will now cover the many misunderstandings associated with FFF:
First misunderstanding: Function is more important than form
Beauty goes beyond mere decoration. Rather, beauty leads to further benefits, which I will explain below:
Aesthetics communicates properties
Aesthetic aspects like the look, feel, smell, sound and taste of an object provide information about its function. Therefore, aesthetic features cannot only be leveraged to allow an object to look beautiful, but also to explain what it is and what you can do with it.
Aesthetics influences the value of usability
As an example, the appearance of a foreign person initially is the only basis of valuation, as no other information is known yet. The appearance of the person significantly influences the estimation of unknown features. This phenomenon is known as the so-called halo effect. For example, an attractive person is estimated more competent than a less attractive person. Numerous studies have investigated whether the halo effect also influences the valuation of interfaces. The comparison of the studies shows that this is inconclusive. However, it is strongly assumed that before the interaction – due to the halo effect –users think that highly aesthetic interfaces are more usable than aesthetically inferior interfaces. This valuation takes place, although it is possible that the bad-looking interface is easier to use than the good-looking one. It depends on the actual usability, whether the valuation is as positive after the interaction. If there is a poor usability, the initially positive valuation of the appearance is downgraded by the user6.
Aesthetics influences emotions
Usability expert Don Norman explains in his article “Emotion & Design – Attractive things work better” that aesthetics play an important role regarding the usability of an interactive system: everything visual speaks to our emotions (affective system). It depends on our emotions how we solve problems and perform tasks. This means that our emotional state of mind influences how well we can interact with an interface. If a people are in a negative emotional state, then their thoughts are extremely restricted. This limits a person in solving a problem. A positive emotional state allows to approach the process of problem solving with a lot of creativity. In this state, the person will have a more pleasant user experience and value the usability of the interface positively8.
Ornaments are not necessarily redundant
FFF forbids visual elements which serve no function. Therefore, it seems likely that it also forbids skeuomorphism. A “skeuomorph” is an attribute that an object has become “inherited” from its old predecessor. An example is the motor of an electric car: originally it is completely silent. But some electric cars get the sound of gasoline-powered cars as a “skeuomorph”. Although the artificially added noise is seemingly unnecessary, it makes sense after a more detailed consideration: it causes that pedestrians perceive electric cars better, because they hear it.
It is often criticized that superfluous ornamental elements go hand in hand with this style. But, if you implement skeuomorphism correctly, its stylistic devices serve the function to make an interface more understandable for inexperienced users by reminding them of objects and concepts from the real world.
For the reasons mentioned above, form should not be underestimated, but considered on the same level with function. FFF should not be misused for justifying aesthetically inferior and therefore purely functional interfaces.
Second misunderstanding: there is only one function
Almost every product has multiple functions. Even a spoon not only fulfills the essential function of food consumption. Another function of the spoon may be that it evokes positive memories, because it is a legacy of one’s grandparents. Or, it is a very expensive spoon, which is why one uses it in order to show wealth to others.
So, there are functions not only serving plain utility. Functions can also depend on social, cultural, historical, religious and economic factors9. For example, you buy a product not only because it is useful. The reason for the purchase may also be, that it should meet certain requirements, such as to show others your own social status or membership in a particular religion10.
Since there can be so many different functions, the most important question always is: “Which is the most important function that should be communicated through form?”.
Third misunderstanding: for one and the same function, there is only one form
Since form depends on function, it seems likely, that there is only one particular form for one particular function. However, this is not the case. The reason is, that variations in form depend on certain factors, such as cultural factors: for the function of food consumption fork and knife have been developed – but also chopsticks. The cultural influence has thus played an important role, and ultimately led to different forms of one and the same function.
Relevance for daily work of designers
Since hopefully all misunderstandings regarding FFF are now resolved, I can explain what it means to design with FFF as an underlying design principle.
It is important to define a “main function”, because a product has many different functions. Only by focusing on a single, central aspect, good usability can be achieved.
Apple knows how to identify main functions of their products very well and pursue it with the very last consequence. This explains the success of Apple. The main function of the iPad is the consumption of media, not productive work. Only through this focus on the main function, the simplicity and the success of the iPad is to be explained.
If the main function of a product is established, you as a designer should take every effort necessary to communicate this visually. This implies that the function must be clear first before a form can be developed. Therefore, the only serious approach in the design process is to apply usability engineering methods first, and to start with the visual design only after that.
I can apply the mentioned principle to my blog post as well. First, I have to be clear what the function for this post should be. The function can be equated in this case, with the communication goal. Once the communication goal is determined, all examples, textual descriptions and pictures have to support this goal.
Example: communicate main function visually
Everything visual aspect serves one purpose: to highlight function. I think that, the phrase “form follows function” should be replaced by the phrase “aesthetics communicate main function”. It is harder to keep in mind the latter formulation, but it could dispose a lot of misunderstandings of once and for all.
The “Magic Mouse” from Apple does not fulfill the function, that you can work in a pleasant way with it, when you consider traditional mouse input methods. Due to the very flat shape, the mouse shows weaknesses from an ergonomic point of view. But for Apple a different main function has been more important, which is that the user can perform touch gestures on the mouse. From this main function the flattened shape has derived.
Colors not only have a decorative character. Depending on the culture, they transport a certain meaning. Colors can also be used to facilitate how the user interprets a function. For example, it makes sense to offer a dialog box that will warn you or indicate an error, by using the color yellow.
Another popular way to explain the importance of functions are visual metaphors. The desktop metaphor is the best known example. It is an essential part of operation systems like Windows and OSX. There you can see a virtual desktop. On the desktop, there are folders and a recycle bin, as these elements are typical for a real working place. Thus, the user is able to transmit and understand concepts he knows from the real world into the virtual world.
The technical term “affordance” is used in interaction design to describe, that the meaning of an object is communicated through its aesthetics. If affordance is communicated well, users know what they can do with the object.
The topic of affordance can be well explained, using the example of doors that can be opened in one direction only11.
If the door can only be opened by pushing it, it should not have a handle. With that there’s clearly only one opportunity for the user: to push the door. If a handle is available, then it may be that you can push or pull the door. If the form of the handle does not allow any conclusions about its function, then there is a bad affordance and the handle was designed not by the FFF principle.
Negative example: wrong form was derived from the main function
If form is derived from main function incorrectly, this can result in negative consequences. For example, it is possible, that a very sharp knife looks like a child’s toy because of its color. The color does not communicate the dangerousness of the knife, because it allows incorrect conclusions about the material: the material looks like plastic, but in fact it is stainless steel. Consequently there is a danger that people (a child in the worst case) use it inadvertently and consequentially hurt themselves.
So what is more important? Form or function? This question is irrelevant. Only through well-balanced combination of form and function, interfaces reach their true strength.
“Good design means that beauty and usability are in balance.” (Don Norman)8.
Below I would like to explain the negative effects which arise, when form and function are not balanced:
If form predominates
Art is a typical example of a strong preponderance of form. Function mostly is set strongly or completely into the background. Therefore, the viewer often wonders: “What is the artist trying to tell me?” Art may intent to ask this question, but in the field of design this question is not allowed to arouse. The widely held belief that the terms “art” and “design” are synonyms, is therefore wrong! A designer is not a pure “beautifier”. Aesthetics is only one part of design.
If function predominates
A strong predominance of function leads to boredom. If form is under-represented, the key component emotion is rarely existent.
This also explains that as a usability engineer can hardly convince customers of a concept with wireframes alone.
Example: purchase decision
Another example are products that are functionally fine, but not convincing aesthetically. These will sell poorly. The reason for this may be that due to the under-represented form, it is not clear how well and in which way the product will work. There is also the possibility that the bad looking product triggers negative emotions of the user or he believes that the interaction with the product will not be fun. Emotions influence decisions in a critical way.
Purely functional information about a product, such as hardware specifications are not important in the first way for most users. Ultimately, it is more important which emotions are evoked by the product. “Electronics should always be reviewed from the user experience point of view, not the technology point of view… yet no one does that.” (Dustin Curtis)12
This also explains product promises by Apple, such as for the iPod Touch, “Engineered for maximum funness.”13
FFF means that form and function must be balanced. It also means that form must always communicate main function correctly.
For the field of interface design, this means that aesthetics and usability are equivalent and mutually influence each other: a beautiful interface improves its perceived and actual usability. Visual poorly communicated functions have a significant negative impact on usability. Good usability increases tolerance for suboptimal aesthetics.
Ideally, however, for the development process usability and aesthetics has been treated with the same importance, so that the best result can be achieved for the user. This is also the basis and philosophy for our daily work as professional user interface designers and usability engineers.
- 1 Wikipedia; Form follows function; http://de.wikipedia.org/wiki/Form_follows_function; Aktualisierungsdatum: 22.11.2012; Zugriffsdatum: 01.12.2012
- 2 Wiktionary; Funktion; http://de.wiktionary.org/wiki/Funktion; Aktualisierungsdatum: 03.12.2012; Zugriffsdatum: 18.12.2012
- 3 Cloninger, Curt; ‘Form Follows Function’ Revisited; http://www.peachpit.com/articles/article.aspx?p=1353612; Aktualisierungsdatum: 23.06.2009; Zugriffsdatum: 02.12.2012
- 4 Wikipedia; Ästhetik; http://de.wikipedia.org/wiki/%C3%84sthetik; Aktualisierungsdatum: 05.12.2012, Zugriffsdatum: 18.12.2012
- 5 Anderson, Stephen P.; In Defense of Eye Candy; http://www.alistapart.com/articles/indefenseofeyecandy; Aktualisierungsdatum: 21.04.2009; Zugriffsdatum: 01.12.2012
- 6 Tuch, Alexandre N. et al.; Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI; Journal Elsevier; 21.04.2012
- 7 Dr. Laugwitz, Bettina et al.; Subjektive Benutzerzufriedenheit quantitativ erfassen: Erfahrungen mit dem User Experience Questionnaire UEQ; Usability Professionals 2009; Datum unbekannt
- 8 Norman, D. A.; Emotion & Design: Attractive things work better; http://www.jnd.org/dn.mss/emotion_design_attractive_things_work_better.html; Aktualisierungsdatum: 2002, Zugriffsdatum: 02.12.20012
- 9 Timmer, Sjors; Is form follows function completely misunderstood?; http://www.quora.com/Design/Is-form-follows-function-completely-misunderstood; Aktualisierungsdatum: 20.09.2012; Zugriffsdatum: 21.09.2012
- 10 Tuzun, Paris; Is form follows function completely misunderstood?; http://www.quora.com/Design/Is-form-follows-function-completely-misunderstood; Aktualisierungsdatum: 20.09.2012; Zugriffsdatum: 21.09.2012
- 11 O’Connell, Shaun; What are examples of affordances?; http://www.quora.com/What-are-examples-of-affordances; Aktualisierungsdatum: 11.02.2011; Zugriffsdatum: 02.12.2012
- 12 Curtis, Dustin; Twitter; https://twitter.com/dcurtis/status/135990954099343360; Aktualisierungsdatum: 14.11.2011; Zugriffsdatum: 21.11.2012
- 13 Apple; http://www.apple.com/de/ipod; Aktualisierungsdatum: unbekannt; Zugriffsdatum: 02.12.2012
All trademarks and product names used on this website are the properties of their respective owners and are used solely for descriptive purposes.
Apple is a trademark or registered trademark of Apple Inc. in the US and/or other countries.
iPad is a trademark or registered trademark of Apple Inc. in the US and/or other countries.
iPod Touch is a trademark or registered trademark of Apple Inc. in the US and/or other countries.