fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

7 Tips to Design Better Tooltips


Tegra - October 28, 2019 - 0 comments

7 Tips to Design Better Tooltips

🖼 7 Tips to Design Better Tooltips

Courtesy of @bydanromero

Tooltips are visual elements in UI that help and provide value to the user through key information, with the goal of understanding the experience or perform a task more effectively.

Good tooltips are subtle, but powerful tools that enhance UX by guiding better the user.

What?  Tooltips are visual elements in UI which help and provide value to the user through key information, with the goal of understand the experience or perform a task more effectively.  Good tooltips are subtle, but powerful tools that enhances UX by guiding better the user.

1️⃣ Keep it clear & action-oriented

1. Keep it clear!  Tooltips should be as clear and short as possible. Action-oriented and within context.  In some cases, such as onboarding tooltip, they can be a bit more descriptive, but always maintaining a quick and simple tone.

2️⃣ Set a good placement

2. Placement  The best tooltips are subtle. Try to place the, strategically so they not cover any important content.  If it is not placed in the right place it can not only not fulfill the function, but it can confuse and annoy the user.

3️⃣ Provide Value

3. Provide Value  Tooltips are used to provide value, through additional but important information, which works as a quick tip to understand features and perform tasks more easily.  Try to avoid redundancy, if it doesn't add any value, don't use a tooltip.

4️⃣ Show one at a time

4. One at a time  When we are doing a user onboarding using a walking through, we have to do it step by step.  Never show two or more tooltips at the same time, always try to show what step of the onboarding they are.  Pro tip: Limit the steps to 4 or 5.

5️⃣ Be specific with arrows

5. Specific  When there are several action options nearby, always remember to use the arrows on the tooltip to specifically point out the relative option.  This helps to quickly recognize the options without having to find out or confuse it with the others.

6️⃣ Keep consistency

6. Consistency  Try to have all the tooltips of your experience with the same base style. In this way the user will become familiar with the style and will know how to quickly recognize when a new advice or hint appears.

7️⃣ Make a good contrast

7. Contrast  Last but not least, use a good contrast. You don't want the tooltip to get lost on the screen, make it stand out subtly while keeping the colors of the brand.  At the end of the day, the tooltip wants to help you, not scare you.
Gracias!  Let's learn together, let me know your thoughts and what you would like to learn in the comments!

Bonus: 4 tools that may be useful in your designer way:

Crello â€” the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.

Webflow â€” all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Funnelytics â€” an incredible tool that helps you build the best marketing funnel mapping.

Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *