Is a hover tip with a slide out drawer that reveals labels enough to consider the cognitive load hit acceptable?

Question

I'm exploring using icon only navigation for tasks/sub-nav on an education app. The interaction would provide a hover tip and also an arrow at the bottom would expand the menu to show the icon text. I've seen sites like Treehouse and Confluence use this pattern. I've attached a shot of the Confluence implementation.

I question the usability stats on this pattern because of how new it is, but I also know that we may be okay with our users having to 'learn' our site once they are paid subscribers. I'm just getting into user testing, so I am considering testing the icons to see how intuitive they are for our user base.

The other option is having small labels under the icons. I don't prefer the look of this, but I feel it may be more user friendly for first time users. I also wonder if people might be okay with hovering for info or with being able to slide out the menu to see the labels.

I've read other related posts here, but wanted to take a chance asking my own way with slightly different points. I welcome any critique on my question as I am fairly new to ux stackexchange.

Answer 1

To pull in the content of that related question, this is basically a re-discovery of application toolbars that were so popular in the 90's. A Microsoft study/paper found that once the user was familiar with the UI, text was useful as an additional visual marker, to help distinguish the shapes of the buttons.
So, a horizontal toolbar with labels to the side may be far more usable than a vertical toolbar with small labels underneath, as locations in a variable-sized grid are more distinguishable than those in an evenly-sized one.

I would actually avoid going full-icon, as most sites have custom theming (custom icons), which users won't instantaneously recognize as being the same as, say, the Microsoft "help" icon that you see consistently in every Microsoft app. That delay in recognition would be maddening (the question mark in the Treehouse screenshot comes to mind), unless I visited the site often enough to recognize it.

Answer 2

I would recommend the icon-with-caption option. Your visual treatment of the captions is sound, so don't worry that it "doesn't look good."

A big reason why I suggest this is there are not instantly recognizable icons that mean "syllabus", "quiz", and "feedback", etc. So you will never be able to communicate those features with a bare icon.

Moreover, the icons you are using are instantly recognizable (top-to-bottom) as "document", "edit", "list", "help", and "mail" - so without captions the cognitive load (and cognitive dissonance) will be very high, and your user will never be trained to know what those stand for specifically in your product.

So for the trade off of a slightly less clean visual, by adding captions you get a friendly, instantly understood interface, and you're good to go.

Answer 3

The first version without text looks like things I can do as a user "Write a new document, edit a document, make a list, get help, etc..." and the context in the second version made me realize it's where different types of class related documents or tests live.

In short: The icon and text combination really ties in the theme and the idea of the site's mission and will reduce the guesswork. Since the site is class related, there may already be a lot of stress related to the student just doing the work or finding the work to do, so add another layer of stress may not be the best.

There can also be a setting option for icon only, icon and text, or text only so that the user may decide which one they prefer. The default setting, in this case, should then be text or text and icon together, with text showing up on hover if icon only is selected.

It increases cognitive load to hover the mouse over each and every icon until they find one that might work for their needs instead of just quickly scanning and sending the mouse directly over to the appropriate icon.

Answer 4

I agree with both Evan and trapezoid, since there aren't standardized icons such the ones we find on roads(road signs), icon and caption will be a more suitable adaptation.