Improve the tooltips in the responsive view (or hide them)

[afercia]

Yoast SEO is using the "tooltips" in various places now and they work pretty well in a "Desktop view". Instead, in a "Responsive view" where the horizontal space is limited, there are a few issues to address.

For example, the meta box left sidebar becomes a horizontal bar in the responsive view. Currently, the tooltips appear on the right. This way, they may hide other controls:

On touch devices, tooltips typically appear on the top of the controls to be clearly visible so one option could be moving them to the top (or better to the top-right to avoid their content be cut-off):

However, in other places there's just not enough room on the right so the positioning should be "smart" and detect the available room. It could end up being a bit too complicated, since this would require some sort of JS calculation of the offsets. In the screenshot below, see also the effect of the overflow CSS property set on the container:

Edit: the overflow issue is going to be solved with the PRs related to https://github.com/Yoast/YoastSEO.js/issues/1071

Thinking this would require some discussion first, and some research and experimentation. First of all we should check if tooltips become visible on tap or longpress, otherwise this issue would be not relevant (can't check this sorry). Possible option I can think of so far:

• completely hide the tooltips in the responsive view and accept a reduced functionality
• implement some sort of JS offset calculation to dynamically adjust the tooltips position

Any feedback welcome.

[afercia]

Looking a bit into this, done some research. Maybe we should consider a different approach. Some big web apps that use tooltips in the desktop view, then hide them in the mobile view. For example. GitHub doesn't generate tooltips:

Gmail mobile does the same, and also adds visible labels to most of the icon-only controls:

This seems an interesting approach, since icons don't have an universal meaning and always need to be "explained".

Thinking at a possible, similar implementation in Yoast SEO:

• some controls might need an alternate source for the label to display, for example when there's the need to show a shorter text, and there's already the data-label attribute that can be used in such way
• it probably would need just some specific CSS overriding for the mobile view

A quick example after some in-browser editing:

For most of the icons, this would make a lot of sense. It would be a pretty important shift in the mobile UI so it probably needs to be pondered a bit. One potential issue could be that it's not possible to predict the length of the translated strings so maybe at some point the text should be truncated.

/cc for discussion and feedback @moorscode

[moorscode]

First I think we need to assume that on mobile, there will be virtually no 'hovering' of objects. This removes the context which might be crucial to understanding the item when used for the first time.

Also a user will most likely only switch between landscape and portrait mode on a mobile device, so we shouldn't try to keep the desktop and mobile implementations match 100% visually.

I'm used to keeping the divider at 640 or 800 pixels wide, to switch to touch view. This might have become a little bit more complicated with the high-resolution tablets and phones going around nowadays.

We need to think about the places where it really is needed to explain more about the action a button icon will result in.

Mark The example with the 'eye' to 'Mark' is a great one, because the marking will happen off-screen 100% of the time on mobile. I also don't think that 'Mark' will be clear enough in explaining what actually is going to happen.

Menu items The labels for the menu items on top are a lot less needed, in part because the items are clear enough and once activated, it is very clear what they do and what can be found under them. Making those items more "touchable" would result in a better understanding to begin with.

I'm seeing at least two different types of labels here and if we can identify what a label is trying to accomplish we can chose to either display it by default, improve the object which is being explained or both.

@afercia do you have an insight if we have more than these types of label use?

This is one of the reasons why 'mobile first' design principles have been created.

[afercia]

We need to think about the places where it really is needed to explain more about the action a button icon will result in.

Totally agree.

Mark icon: yep it should be improved

Menu items icons: So and so :) Apart from the traffic light, which is part of the brand, to me the "Social" icon is always unclear. The "Advanced" one seems a bit wrong, since the "gear" is usually associated with something related to "settings". Worth noting in the taxonomy meta box, this section is named "Settings" and not "Advanced".

Googling a bit, I've found this on the usertesting.com blog https://www.usertesting.com/blog/2015/08/04/user-friendly-ui-icons/ see the section about "labels vs. no labels", the results of their study are pretty interesting.

do you have an insight if we have more than these types of label use?

Other icons without text? Hm apart from the ones in the meta box, I think we have:

• the SEO score icons, I mean also the ones used in the toolbar and in the posts list table columns
• the ones in the notification center (see below)

[jdevalk]

Didn't we have another meta box design coming @omarreiss ?

[priscillamc]

The tooltips also get cut off in the Post overview screen if it's the last column.