15

I'm working on a project using Angular Material, a framework based on Google's Material Design Specifications. As such, it uses arrowless tooltips like this:

enter image description here

According to the guideline:

Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

Maybe that'll do in mobile, but in complex web applications with multiple interactive elements on screen it seems a bit overconfident to assume the user will be always catch where the tooltip came from. In such cases removing the arrow may hinder recognizing the tooltip's source.

I'd like to ask the Angular Material to consider adding arrows to their tooltips but since it goes against the now almost sacred Material Design guidelines, I like to ask here if there are any valid reasons to suppress tooltip arrows. Any research about tooltip usability would also be of help.

Improve this question
6
  • 1
    @Midas Nope. it's the prominent triangular 'tail' that points towards the element that originated the tooltip. Check this example form a jquery plugin
    – Jay Mann
    Apr 1, 2016 at 18:07
  • @Midas are you baiting me? I'd like to add to the bounty. Another 100, but it doesn't seem possible to do something like this.
    – Confused
    Apr 4, 2016 at 12:52
  • @confused baiting? no just using bounties to get answers to interesting questions...
    – Midas
    Apr 4, 2016 at 13:15
  • 1
    Good on ya! Good thing to do. I've tried to contribute the boring part of the answer below, so others can focus on the more interesting part of the OP's thinking. My gut feeling is there's nothing other than arbitrary aesthetic decisions and an over confidence and fascination with animation driving the move away from arrow/shape definition of association.
    – Confused
    Apr 4, 2016 at 13:20
  • And what stops you? Go ahead and ask them to do so!
    – Devin
    Apr 4, 2016 at 19:51

4 Answers 4

Reset to default
2

This is not a complete answer, and only speaks to the original intention of the OP, that of asking Angular Material to consider adding arrows. The intent of this partial answer is to point out your avenue for change is Google and Android, not Angular Material.

This lays in the description of Angular Material's purpose and intent:

"For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design."

I've bolded the pertinent part.

In other words, Angular Material is only ever going to follow the rules and guidelines of Google's Material Design Specification so it can act as a reference for Angular users and advocates.

If you want Angular Material changed you'll have to change Google's mind. It looks like the Angular Material Founders are resolute and devout believers in Material, to the letter.

As to the fuller question, yeah... no. I can't think of any valid reasons to suppress/remove arrows and not provide them as an option. Aesthetic considerations I can conceive of are not valid reasons.

I tend to agree with your sentiment, if not your reasoning. There's nothing wrong with arrows, they should be optional in any framework considerate of its users. Callouts should also be an option for tooltips, introduction, clarification and instruction.

Improve this answer
2
  • That's also what I'm fearing. Designers overconfidence that animation would be superior to arrows for source identification. And while it works nice in many situations, there are a few where it clearly doesn't (and which I unluckily bumped into). It might seem like a minor topic, but even this one would require some testing. As you mentioned, allowing optional tooltip arrow display/removal should be the way to go.
    – Jay Mann
    Apr 17, 2016 at 18:11
  • 1
    Don't blame choices like this on designers. Designers don't tend to be ruthless with rules in the manner developers are. A designer would never make the blanket assumption that tooltip arrows are no longer necessary and force all other designers to adopt design patterns that work without arrows. This is the "design choice" of a body (Google) to focus on Material Design animations as a response to their perceptions of market trends in design, in the hope they can appear "cool" and forward thinking. It's flat design too far, in a nutshell.
    – Confused
    Apr 17, 2016 at 18:15
6
+50

If I interpret your question properly, it seems your main issue with the way Angular Material recommends implementing tooltips is this:

Maybe that'll do in mobile, but in complex web applications with multiple interactive elements on screen it seems a bit overconfident to assume the user will be always catch where the tooltip came from.

I personally believe that users will always catch where the tooltip came from when it matters to them. For a few reasons, listed below. I do not have specific research citations for these, but these are the relevant bits of information I've learned in my studies of psychology and experience designing user experiences on the web:

  1. Users' cursors tend to follow their eyes. When using digital services we tend to move our mouse cursor in concert with our eyes, making the cursor location approximate with user attention to a particular area of the page.
  2. Content outside of the user's current area of focus is irrelevant to them, at that given moment of attention. If the user is not focused on a particular section of the page, or a particular element there, any tooltip that expands from an element in that area can be considered irrelevant to them at that given moment, since their attention is elsewhere. In combination with the first statement above, if the user is interested in a particular element, and their attention is there, their cursor will also be in that area and they will most likely notice the tooltip expand, and notice where the tooltip came from.
  3. Motion is one of the most fundamental and sensitive aspects of the human visual system. If there is a grouping of functionality, multiple buttons in the same location, you're right that it may seem difficult for users to perceive which item the tooltip is emanating from. However, the human eye is incredibly sensitive to movement of objects; the speed, direction, trajectory thereof. In cases like the example above, from Google Docs, it may seem that the proximity of the actions would make it impossible to determine which element the tooltip comes from. Not having done empirical research on this, I would hypothesize that users would have little to no issue in this scenario, and based on the animation / location of the tooltip, would correctly interpret which element the tooltip belongs to. This sensitivity to movement used to protect us from predators, now it protects us from making mistakes on the web...hehe
Improve this answer
2
  • Thx for your input. While I can agree to the ideas you expose, there are many different scenarios where this assumptions are not meet. In my design I use tooltips (among other techniques) to draw attention to events in different areas of the screen, not as a reaction to a user action.
    – Jay Mann
    Apr 17, 2016 at 17:58
  • All use of animation as indicator, without contextual and resultant information being displayed, assumes near 100% alertness and focus on the individual location of the animation, throughout the majority of its duration. This is a little hubristic, to say the very least. Hence the need for arrows and/or indicators in all manner of pre and post. Animations can enhance and polish a presentation of anything, but if the presentation isn't initially sufficient, and the animation isn't witnessed, there's problems. Hence the desire for visual embellishments as indicators and @JayMann 's question.
    – Confused
    Nov 24, 2016 at 7:47
4

Animation always attracts the user's attention, and a tooltip usually appears on mouse over or any kind of focus action. So it is a result of an action thus you can trust that the user notices the tiny animation that indicates where the tooltip comes from.

If by the way your screen is so crowded with functionality you might reconsider the placement of some functionality?

Improve this answer
1
  • I'm designing a graphic environment (not really overcrowed) with competing visual effects. In this environment, my tests show animations while attracting the user's attention, are not good enough to help locate the event source unambiguously. The tooltip arrow works just fine in this case.
    – Jay Mann
    Apr 17, 2016 at 18:14
3

According to Material Design Guidelines:

Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

If we look at the desktop example listed, you will see multiple elements next to each other.

Material Design Tooltips Desktop

Even though the tooltip borders onto its neighbouring element, it doesn't overlap it. The tooltip is still associated with the element above it. In combination with the animation I do think that it should be sufficient enough to understand. And just like Yakke said; if your screen is so crowded that there is no space to clearly distinct where the tooltip belongs then you might want to reconsider the placement of the elements.

Something I also think really helps is the fact that on a desktop you have a cursor, which is a constant reminder of what exactly you are hovering over.

I do think that having an arrow could increase the usability, but I doubt by how much. I couldn't find any research to back this up, it would be great if someone else can find it.

Improve this answer
1
  • Think of a calendar view with tooltips attached to each day. In purity, one might consider that a crowded design, but it is absolutely ubiquitous. When hovering over the days, tooltip motion is confusing. Tooltips with arrows work fine here too.
    – Jay Mann
    Apr 17, 2016 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.