I don’t know if you are one of those people who don’t like to ask someone for their address or not. But you must have come across such a person in your life. Someone who even now finds it difficult to get help from Google Maps. After all, we all need help when we first move to a new place.
I agree that some addresses are straightforward and one can figure them out on their own. But some others are not like that at all. One may get lost. Working with new equipment is the same. It is not possible to work with some devices for the first time without a guide. They may break down. Some devices are like direct addresses and do not need guidance. Giving them guidance is an extra task.
Websites, software and applications are tools that some of them are not easy to work with. That is, not everyone knows what to do with them and where to go, especially for the first time. The user may get confused or even lost! In every site or app, there are different options (elements or buttons) that each do a specific job.
For example, consider Word software. It has many tools. Many of us who deal with it every day, did not use all those tools and do not use them. But finally, each of them does a specific job that is not difficult to know. Just hold the mouse over one of them and a short text will appear and tell you what this tool does.
This short guide is called Tooltip. Contrary to what it seems, designing these tooltips is not an easy task. Read this article to understand why it is not an easy task and why sometimes these same tooltips can ruin the design of the user interface of the site or app.
If you are interested in UI topics, read the article “Gestalt principles and rules in the service of UI design“.
Table of Contents
Tooltip in UI design
It is not logical for the user interface designer of the site or app to think that everything is clear for all users. Therefore, you should also think about guiding the user. For example, he told the user that this element or icon on this site or app does a certain job. Our main discussion is about tooltips in website and application user interface design. In the site and app, icons, links, buttons and images and visual elements may be accompanied by tooltip.
Do you know why a UI designer should be concerned about tooltips and should be able to use them consciously and effectively? Because additional guidance makes the user uncomfortable. Because not all tools require a guide. A good and professional UI designer knows where the user wants guidance and where he can find his own way.
Tooltips are messages containing additional information about an element or property of a page that the user causes to be displayed. Although tooltips are nothing new on the web, they are often misused.
Therefore, it is one of the duties of the user interface designer to know what is the philosophy of existence of tooltips? Where and for which elements the tooltip must be used and where there is too much tooltip and the design is such that the user finds his way without additional information.
Applications of tooltips in user interface design
The user’s first interaction with the site or application or any other product is very important and decisive. This is the first encounter and interaction that is either attractive and smooth and creates a good user experience for the user or confuses the user and makes him stop visiting the site and not using the application.
In the world of product design, user interface and user experience, this is the first introduction to an independent concept called First-Time User Experience (FTUE). The product and user interface design team must also design this first interaction, an interaction in which the user can easily work with the product, which means that the design must include the necessary tips (tooltips) for the user.
You don’t want new users of your product to keep saying to themselves, “What is this?” Am I doing it right? It is very confusing. OK, that’s enough. I’ll let it go!”
So, the important use of tooltips is to make the first interaction better and simpler, in a timely and simple way. Of course, in the future, tooltips keep the flow of user interaction with the site simple and smooth. Because a new element or possibility may be added to the site that the regular user does not know what it is. Tooltip is used here as well.
When should a UI designer not use Tooltips?
So, every design for designing the user interface of the site or the app in hand must answer an important question: for which elements the tool guide is necessary? In addition to considering the application of guidelines, there should be criteria for making decisions in each case. In this title and the next title, we talk about these criteria.
When should the designer not use the tooltip (that is, the tooltip is redundant and does not provide new, useful and necessary information to the user)?
When the guide needs information to complete a task on the site
Tooltips are essential and short information (Microcontent). For example, it is not possible to include the 10 lines of instructions required to register on a site in the tooltip of a button. Because when the user moves the mouse away from the element, the tooltip disappears. This means that the user loses the necessary information to continue working. (Can’t memorize 10 lines!)
When your site or app only has a mobile version
You should know that tooltips are displayed better on the desktop and with the mouse than on the touch screens of mobile phones. Of course, it should not be taken as if it is not possible in mobile apps and there should not be a toltype. Proper tooltips can also be useful for mobile apps.
When the design of the site and the element is such that it guides the user and he no longer needs guidance
For example, we are all familiar with the add icon (that is, the + sign) and we know what it is for. Do you think a tooltip is necessary for this icon?
When should a designer use Tooltips in user interface design?
Perhaps you will answer now, this is already clear: the opposite of the above 3 cases. This answer is correct but not complete. The designer should include tooltips in his design when:
- The element or icon is not familiar to the user and is not designed in such a way that the necessary guidance is written on it; So we need a tooltip in this matter. (For example, the button that says Add new line no longer needs a tooltip.)
- The element or icon has a special and far-sighted use and the user gets confused without a tooltip.
If you want to know more about icon design, don’t miss the article “Comprehensive Iconography in UI Design” article.
Tips for the right design of Tooltips
When the user interface designer came to the conclusion that a tooltip should be placed for this element for some reason, what points should he follow in the design of the tooltip itself?
- Tooltip must be compatible with mouse and keyboard hover.
- The tooltip should not be designed or placed in such a way that it covers other content when opened.
- The font should be in contrast with the background to be seen and read well.
- Designed tooltips should be tested and real users’ opinions should be taken before finalization and modified accordingly.
- Their design should be simple, expressive, interesting, and interactive.