What are some of the most frequently abused visual metaphors

“Form Follows Function” - a misleading design principle

introduction

"Form Follows Function (FFF)" (The form follows the function) - three words that you can think about for hours and which then require a few more words to explain. Because this is an often misunderstood design principle.

Communication goal

In my blog article I would like to explain the misunderstandings there are with regard to FFF and what significance the design principle has for the work of designers.

Brief history

FFF was first mentioned by the American sculptor Horatio Greenough in 18521. Nevertheless, FFF is mostly associated with the architect Louis Sullivan, who wrote in his essay "The tall office building artistically considered" in 1896: "[...] that form always follows function"1. The guiding principle is now over 150 years old and has not lost its relevance in today's world of digital media.

definition

function

"Function" is derived from the Latin "functio" and means in the original sense "performance"2. The question of function is aimed at the purpose for which something can be used. The term function can, however, 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 does not only consider this interpretation of function. He interprets the term “function” much more comprehensively3.

shape

“Form” can be equated with the term aesthetics. Aesthetics is derived from the Greek word "aisthesis" and means "perception" and "sensation"4. So aesthetics is about how we perceive and interpret the world with our five senses. Thus the statement “this is aesthetic” does not mean “it looks nice”. Because aesthetics is not just about the visual part of our perception5.

Reasons for misunderstanding

Precisely because the origins of FFF are very old, there are some misunderstandings. In addition, FFF originally referred to the architecture, which is why errors can occur when transferring to the field of digital media.
The simplicity of FFF is both a blessing and a curse. On the one hand, it's a memorable alliteration. On the other hand, it is a complex topic that cannot be communicated extensively through the simplified expression.

misunderstandings

But now to the numerous misunderstandings associated with FFF:

First misunderstanding: Function is more important than form

Beauty goes beyond decoration. Rather, beauty has other advantages, which I would like to explain below:

Aesthetics communicate properties

Aesthetic aspects, i.e. appearance, feel, smell, sound and taste of an object provide information about its functionality. Therefore, aesthetic means can be used not only to make an object look beautiful, but also to explain what it is about or what can be done with it.

Aesthetics influence the evaluation of usability

Author: Gexon; Source: flickr

The appearance of a stranger, for example, is initially the only basis for evaluation, since no other information is known yet. The appearance of the person significantly influences the assessment of unknown properties. This phenomenon is known as the so-called halo effect. An attractive person is judged to be more competent than a less attractive person.
Numerous studies have examined whether the halo effect also influences the evaluation of interfaces. The comparison of the studies shows that there is no clear result on this6. However, it can be assumed that, due to the halo effect, users consider good-looking interfaces to be easier to use than bad-looking interfaces before the interaction7. This assessment takes place even though there is a possibility that the bad-looking interface is easier to use than the good-looking interface.
Whether the assessment after the interaction is just as positive depends on the actual usability. If the usability is poor, the initially positive assessment of the appearance by the user is downgraded again6.

Aesthetics influence emotions

Usability expert Don Norman explains in his article "Emotion & Design - Attractive things work better" that aesthetics play an important role in the usability of an interactive system: everything visual speaks to our emotions (affective system). How we solve problems and carry out tasks depends on our emotions. This means that our emotional state when interacting with an interface affects how well we can interact with that interface. When a person is in a negative emotional state, their thoughts are extremely narrow. This restricts a person from solving a problem. A positive emotional state enables the person to approach problem-solving with a lot of creativity. In this state, the person will have a more pleasant user experience and assess the usability of the interface positively8.

Ornaments are not necessarily superfluous

FFF prohibits visual elements that do not communicate any function. Hence, it seems reasonable to assume that FFF prohibits keumorphism. A “skeuomorph” is a characteristic that an object has “inherited” from its old ancestor. An example of this is the engine of an electric car: this is originally noiseless. However, some electric cars receive the sound of a gasoline-powered car as “skeuomorph”. Although the artificially added noise is apparently superfluous, it makes sense on closer consideration: it makes pedestrians perceive electric cars better because they hear it.

The style is often accused of having superfluous ornamental elements. If skeuomorphism is implemented correctly, however, its stylistic devices serve the function of making an interface more understandable for inexperienced users by reminding of objects and concepts from the real world.

Conclusion

For the reasons mentioned, the form should not be underestimated, but considered on the same level as function. FFF must not be misused to justify aesthetically inferior and therefore purely functional interfaces.

Second misunderstanding: there is only one function

Almost every product fulfills several functions. Even a spoon does more than just take in food. Another function of the spoon can be that it evokes positive memories because it is an heirloom from your grandparents. Or it is a particularly expensive spoon, which is why you use it to show others your own wealth9.
So there are not just functions that are useful. Functions can also depend on social, cultural, historical, religious and economic factors9. For example, you don't always buy a product because it's useful. The reason for the purchase can also be that it should meet certain needs, such as showing others your own social status or belonging to a certain religion10.

Since there can be many different functions, the main question is what is the most important function that should be communicated by the form.

Third misunderstanding: there is only one form for the same function

Since the shape depends on the function, it can be assumed that there is only one specific shape for a specific function. However, this is not the case. As described in the second misunderstanding, there are many factors, such as cultural factors, that lead to a high level of variance: Knives and forks, but also chopsticks, were developed for the function of eating. The cultural influence also played an important role and ultimately led to different forms for one and the same function.

Significance for the day-to-day work of designers

Now that all misunderstandings have been cleared up, I can go into more detail about what it means to design with FFF as a principle.
It is important to define a main function because there are many different functions that a product can fulfill. Good usability can only be achieved by focusing.
Apple knows very well how to identify the main function and to pursue it to the very last resort. This is what makes Apple so successful. The main function of the iPad is consuming media, not productive work. The simplicity and success of the iPad can only be explained by concentrating on the main function.
Once the main function of a product has been determined, as a designer you should do everything possible to communicate it with visual means. This implies that the main function must first be determined before a form can be developed for it. Therefore, the only serious approach in the design process is to first apply methods of usability engineering and only then to start with the visual design.
I can also apply the above principle to my blog article. First, I need to be clear about what the function of this article is supposed to be. In this case, the function can be equated with the communication goal. Once the communication goal has been established, all examples, textual descriptions and images must support this goal.

Examples: Visually communicate the main function

Everything visual serves one goal: to clearly emphasize the main function. I am of the opinion that instead of the phrase “form follows function” it is better to use the phrase “aesthetics communicates main function”. The latter formulation is less easy to remember, but it could clear up some misunderstandings.

The “Magic Mouse” from Apple does not fulfill the function of being able to work with it in a pleasant way when it comes to traditional mouse operation. Because of the very flattened shape, the mouse does not sit well in the hand and therefore has significant weaknesses from an ergonomic point of view. But Apple has found another function to be more important, namely that the user can make touch gestures on the mouse. The flattened shape was ultimately derived from this main function.
Colors are not only used for decoration. Depending on the culture, they convey a certain meaning.

Colors can be used to make it easier for the user to interpret a function. For example, it is advisable to use the color red in a dialog window that is supposed to warn of something or display an error.

Another popular means of explaining the meaning of functions is through visual metaphors. The best-known example of this is the desk metaphor, which is an integral part of operating systems such as Windows and OSX. There is a virtual desk there. There are folders and a recycle bin on this, as these elements are typical of a real workstation. In this way, the user can transfer and understand familiar concepts from the real world into the virtual world.

The technical term “Affordance” is used in interaction design to describe that every object should have an inviting character. If the prompting character is well communicated visually, the user knows what he can do with the object.

Author: Alan Levine; Source: flickr

The issue of affordance can be explained well using the example of doors that can only be opened in one direction11. If the door can only be opened by pushing it, there should be no handle on it. Then there is clearly only the option for the user to push the door. If there is a handle, the door may be pushed or pulled. However, if the shape of the handle does not allow conclusions to be drawn about its function, then there is poor affordance and the handle was not designed according to the FFF principle.

Negative example: Form was incorrectly derived from the main function

Author: Miles Goodhew; Source: flickr

If the form is incorrectly derived from the main function, it can have very detrimental effects. A very sharp knife that looks like a children's toy because of its color is an example of this. The color does not communicate the danger of the knife, as it allows false conclusions to be drawn about the material: the material looks like plastic, but in reality it is stainless steel. As a result, there is a risk that the user - or in the worst case the child - handles it carelessly and cuts himself / herself.

balance

What is more important now? The form or the function? This question is irrelevant. It is only through the well-balanced combination of form and function that interfaces achieve their true strength: "Good design means that beauty and usability are in balance." (Don Norman)8.

In the following I would like to explain the negative effects that result when form and function are unbalanced:

When the form prevails

Copyright: Jimee, Jackie, Tom & Asha; Source: flickr

Art is a typical example of a strong preponderance of form. The function is mostly or completely in the background. Therefore, as a viewer, one often asks oneself: “What does the artist mean by this?”. This question may be deliberate in art, but it should never arise in design. The widespread opinion that the terms “art” and “design” are synonyms is therefore wrong! A designer is not just a "beautifier". Aesthetics are only part of design.

 

When the function predominates

A strong preponderance of function leads to boredom. If the form is underrepresented, then the important component emotionality is hardly present.
This also explains that as a usability engineer it is difficult to convince customers of a concept with wireframes alone.

Example: purchase decision

Another example are products that are functionally flawless, but not aesthetically convincing. These will only sell badly. The reason for this may be that, due to the underrepresented form, it is not clear how well and in what way the product works. Furthermore, there is the possibility that the bad-looking product triggers negative emotions in the user or he suspects that the operation of the product will not be fun. Emotions have a decisive influence on decisions5.

Purely functional information about a product, such as hardware specifications, is often not of primary interest to potential buyers. Ultimately, it depends more on which emotions the product triggers: "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 Apple's product promises, such as for the iPod Touch: "Developed for maximum fun."13

Conclusion

FFF means that form and function must be balanced. It is also said that the form must always correctly communicate the main function.
For interface design, this means that aesthetics and usability are synonymous and influence each other: a beautiful interface improves perceived and actual usability. Functions that are poorly communicated visually have a significant negative effect on usability. And good usability increases the tolerance for inferior aesthetics.
Ideally, however, the same emphasis was placed on usability and aesthetics in the development process, which meant that the best possible result could be achieved for the user. This is also the standard and philosophy for our everyday work as user interface designers and usability engineers.

If you want to find out more about how we work or if you would like to hire us, take a look at our Usability and Design Service pages.

swell

  • 1 Wikipedia; Form follows function; http://de.wikipedia.org/wiki/Form_follows_function; Update date: 11/22/2012; Date of access: December 01, 2012
  • 2 Wiktionary; Function; http://de.wiktionary.org/wiki/Function; Update date: 03.12.2012; Date of access: December 18, 2012
  • 3 Cloninger, Curt; 'Form Follows Function' Revisited; http://www.peachpit.com/articles/article.aspx?p=1353612; Update date: 06/23/2009; Date of access: December 2, 2012
  • 4 Wikipedia; Aesthetics; http://de.wikipedia.org/wiki/%C3%84sthetik; Update date: 05.12.2012, access date: 18.12.2012
  • 5 Anderson, Stephen P .; In Defense of Eye Candy; http://www.alistapart.com/articles/indefenseofeyecandy; Update date: 04/21/2009; Date of access: December 01, 2012
  • 6 Cloth, Alexandre N.et al .; Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI; Journal Elsevier; 04/21/2012
  • 7 Dr. Laugwitz, Bettina et al .; Quantitative recording of subjective user satisfaction: experiences with the User Experience Questionnaire UEQ; Usability Professionals 2009; Date unknown
  • 8 Norman, D. A .; Emotion & Design: Attractive things work better; http://www.jnd.org/dn.mss/emotion_design_attractive_things_work_better.html; Date of update: 2002, date of access: 12/02/20012
  • 9 Timmer, Sjors; Is form follows function completely misunderstood ?; http://www.quora.com/Design/Is-form-follows-function-completely-misunderstood; Update date: 09/20/2012; Access date: 09/21/2012
  • 10 Tuzun, Paris; Is form follows function completely misunderstood ?; http://www.quora.com/Design/Is-form-follows-function-completely-misunderstood; Update date: 09/20/2012; Access date: 09/21/2012
  • 11 O'Connell, Shaun; What are examples of affordances ?; http://www.quora.com/What-are-examples-of-affordances; Update date: 02/11/2011; Date of access: December 2, 2012
  • 12 Curtis, Dustin; Twitter; https://twitter.com/dcurtis/status/135990954099343360; Update date: 11/14/2011; Access date: 11/21/2012
  • 13 Apple; http://www.apple.com/de/ipod; Update date: unknown; Date of access: December 2, 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 United States and / or other countries.
iPad is a trademark or registered trademark of Apple Inc. in the United States and / or other countries.
iPod Touch is a trademark or registered trademark of Apple Inc. in the United States and / or other countries.

 

Have we piqued your interest? Take a look at our services!

UX DesignUX Research