What is functional visibility?
Functional visibility is an attribute or characteristic of an object that tells us what we can do with the object. Simply put, functional visibility prompts the user how to interact with something, whether it's a physical object or a digital interface. For example, when you see a door handle, it's a reminder that you can use it to open the door. When you see a handset icon, it prompts you to use it to make calls. Functional visibility makes our world simpler, and with its help, we can successfully interact with the physical world and virtual objects.
See the interface of the Sprinkler Tracker below. You will know instantly that the action you need to perform has been completed - because of the b2b data symbol "√". Icons in the tab bar give clues as to what you can do with the app: check your set of plants (this tab is active because it's colored and the others are not), add a new plant, or view your account information. These are the functional visibility of actions.
History of the term
The term "functional visibility" was first coined by psychologist James Gibson, who has studied visual perception in depth. In 1966, he used the term for the first time in his book The Senses of the Perceptual System. In 1979, he articulated the definition of functional visibility in his book "An Ecological Approach to Visual Perception":
"Functional visibility of the environment refers to what the environment gives to the animal; what the environment provides or arranges, for better or worse. I found the verb afford in the dictionary, but not the noun affordance. I coined the new word. It Involving both the environment and the animal at the same time is a relationship that has not been articulated in the previously existing vocabulary, namely the complementarity of animal and environment."
According to Gibson, humans tend to change their environment in the hope that its functional visibility will suit them better and make their lives easier. Functional visibility of the learning environment becomes an important part of socialization.
When applied to design, the term functional visibility refers only to all the operational possibilities that the user is aware of. From this perspective, Donald Norman explored the further development of the term in his 1988 book The Design of Everyday Things. According to experts, the term "functional visibility" refers to the perceived and actual properties of things, mainly those fundamental properties that determine how things are used. Functional visibility provides powerful clues about how things work. Tablets are for pushing. Knobs are for turning. Slots are for inserting things. The ball is for throwing or bouncing. When functional visibility is exploited, users know what to do with just a glance: no additional images, labels or instructions are required.
With the advent of various user interfaces, functional visibility has taken a new direction. We used to do hundreds of operations with different actions, tools and things. Now we can do a lot of things just by clicking the mouse or clicking the screen. This makes designers need to think about new ways of presenting functional visibility, allowing people to transfer and accumulate patterns and knowledge that have been accustomed in real life to their interactions with digital interfaces. The experience is very different from before, so the design approach has also changed.
Types of feature visibility in the user interface
Feature visibility in the UI can be categorized according to their performance and presentation. In any case, the main goal is to use the knowledge and experience people already have to simplify the interaction process.
Explicit and Invisible Functional Visibility
We can find obvious and hidden hints based on performance in the user interface.
Explicit feature visibility is based on well-known and typical prompts to guide users to specific actions. For example, when you see a button designed to be an obvious clickable element that visually resembles a button in the physical world, you know you can click it to interact. If there is also text or an icon in the button, the revelation becomes clearer: it tells you how the system will respond.
Food web page: The CTA (call to action) button is clear as a clickable element, and the copy explains what the button enables the user to do
The hidden revelation is not so obvious. They are hidden and can only be revealed in a specific flow of user behavior. This is the tooltip or explanation we get when we hover over a page element. Another example is various multi-layered navigation elements, such as drop-down menus or expandable buttons, that are not seen at first, but are displayed after a specific action. Perhaps one of the most controversial stealth navigations is the hamburger navigation, which hides the available functionality behind a special icon.