Monday, August 4, 2014

Tooltips Best Practices

This article presents some considerations that should be observed when using Tooltips in your design.

Some people may argue that there shouldn't be a need for tooltips. But, let's be honest... There are times where we need to use the tooltip. So then, if we absolutely must use this little guy, then what are some things that we should consider when implementing it into our designs?

1. Open via click, not hover
Sometimes you see a design that has the tooltip automatically open upon mouse hover. The problem with this is that it doesn't port over well to the other channels in a full cross channel experience. Try hovering your finger on an iPad, or PS3 Sony browser. Not much will happen. It's always a best practice to let the user drive the engagement with an interactive element. If the interaction occurs without the user's explicit input, they will likely be shocked or surprised. Additionally, this can be frustrating. Especially if they are trying to get something done.

2. Limit usage
Just like with any screen element, too many of these little "helpful" info tips can result in them NOT being helpful. Consider this... Every data element on screen competes for the user's attention with every other data element on the screen. What this means is that the more of these little info tips you present to the user, then less impact the screen's overall visual or architectural prioritization will have an effect on driving the user to the main call or process flow. Plus, who likes clutter anyway?!

3. Use standard icons
Here are some tooltip icons that have been used. Some of them are more common. If you glance through, you will likely see one or two that you recognize.

Just to clarify a bit. Most common would be an "i" in a circle which stands for "information", or a question mark ("?") in a circle indicating that there is additional help information available.

The rule of thumb here is that it's best to use what is most common in order to ensure that user expectations are being met. When you deviate from the standard, it must be to improve on the standard, without kicking the metaphorical chair of existing know-how out from underneath the user.

4. Tooltips should be deprioritized
As tempted as you are to make the tooltip the main call to action, it's important to us that someone smacks you with a corn-dog. The very purpose of the tooltip is to get excess on-screen help out of the visible and placed into a tiny little hiding compartment so that when users get into a bind, they have a place to go to get the info they need. Tooltips should be used to simplify the screen so that the main call to action can be louder and prouder!

5. Tooltip should be fully visible when opened
One of the beautiful things about a tooltip is that it can help save space anywhere on screen. This means that there is a high probability that the tooltip will appear in obscure areas on various designs. When you are putting tooltips together, remember that when a user clicks the tooltip, they will likely expect the tooltip to appear in their visible window no matter where the scroll bar is set. A modal popup that centers the tooltip is probably the most elegant, versatile implementation that I've seen. The point here is that if a user clicks the tooltip and it pops up, but only half of the tooltip is visible, then you've positioned it incorrectly.

6. Keep your info-tips short and sweet
When a user clicks the info tip, chances are they are not expecting a book to popup on screen. If that level of information is needed in order to help them 1) there is a good chance, you need someone to proofread the work, 2) the process is too complex, 3) It may be information that is going to best serve the user if it had it's own section on the site.

Keep the tooltip short, and concisely written to support quick skimming and scanning. User's will thank you if you can provide them what they need, in a tiny package.

Hope the list helps you. There may be more, but for now, this is all we have for this very simple, very useful design element.

Whitespace should be strategic

This article is a reminder of the importance of strategically incorporating whitespace into our design decisions.

In some cases, we see designs consisting of too much or not enough empty space. Insufficient or inappropriate whitespace can lead to…

•  Difficulty in skimming and scanning information
•  Difficulty in differentiating section groupings
•  Difficulty in determining main calls to action
•  Lowered perception of the design of the website
•  Anxiety, confusion, frustration, disorientation, and possibly anger

One scientific principle that we tend to follow is known as the Gestalt principle of proximity which says that things that are close to one another are perceived to be more related than things that are spaced further apart. When users see all the content as one long run-on, it is difficult for them to differentiate the related information. 

This proximity problem can be visually dominating over other screen prioritization techniques (for example: font-weight, color, and/or size).

Consider strategically incorporating whitespacing as part of the design decision making process. It is best to make this decision rather than allowing the design to make the decision for you.

Thursday, July 31, 2014

Should designers stop using color coding in their designs?

If your like me, you have dabbled in solving your own home electrical and plumbing problems. When I was younger, it wasn't uncommon to see me trying to take on complex wiring issues having to do with car stereo's. For me, this isn't a big deal at all. Likewise, I've been known to excel at putting together those old 1990's tents that had the color code poles. Not a problem at all... for me that is. Maybe for you too.

But, there is a large group of people who really struggle with colors. Well, when I say large, I mean about 8% of males, and .05% of females in 2012 according to one source.

So should color coding be outlawed? Should we abolish this practice of using color to code things in interfaces, on products, or during service experiences?


The reason for this is that although a user experience practitioners job is to seek out the most usable or accessible interface, we are also trying to meet the expectations of our users (or at least the expectations of the bulk of the users). In this case, there are simply many, MANY more people who are not color blind. I'm sorry if this offends you.

We have many different senses that designers can target as inputs or outputs for their designs...
  • Hearing
  • Touch
  • Smell
  • Sight
In each of the above mentioned senses, there are likely going to be people who struggle. Color  just happens to be part of the most frequently used input/output that designers target.

Maybe it's time to combine two senses to help eliminate accessibility issues. Maybe the wires would have color coding, but also maybe we as designers can be understanding of those who struggle with color and incorporate some other means (i.e. label, or wire material texture, etc...).

I'm not sure that flavored wires, or smelly wires are a good idea, but there are creative ways that we can better support those 8.05% of users who don't appreciate our color coding efforts.

I'm interested in hearing your ideas. Let's here them, what do you have?