11

I am working on a groupware application running as a desktop application (not in the browser). I wanted to keep the interface really simple and minimalistic so my users will not get distracted by a rather big and noisy menu bar (because I do not think my users will not be that familiar with the computer and typical navigation menus).

I looked at several (web) applications which feature icon navigation. However, they always use labeled buttons beneath them which serve other purposes.

My question is: Is it possible to create an intuitive and easy-to-use navigation bar with icons only (where a description is shown on mouseover)? Is this possible by just making it so obvious what a button does just by its icon?

A screenshot of my current design:

enter image description here

EDIT: The top icons work as tabs. They change the current context in the application. For example wall, tasks, mail and so on. The lower buttons work as action buttons which allow users to interact with elements in the current context. So I actually have two separate navigation bars (combined) which I think make the situation a little "worse".

2
  • Possible related question: ux.stackexchange.com/questions/1795/… Can you provide a bit more context to the goal of your application? From the screenshot I cannot determine based on the icons alone what purpose the overall application serves. It might be possible to have your icons in context are clear enough, but it's hard to evaluate without that context.
    – GotDibbs
    Commented May 4, 2012 at 17:49
  • How often do you suspect people will use it? If you use something daily it's easy to get used to and remember labels (memorability). If you use something infrequently, clear labels become more important.
    – Zelda
    Commented May 4, 2012 at 18:02

2 Answers 2

8

In your specific situation, as long as the context of the application is known, the icons look as though they currently could be enough to decipher which icon is for what -- in its current state with minimal actions. In short -- I think you could get away with it, but forcing the user to have no labels might not be the best route to go down without some additional affordances.

Going down your proposed path would increase the cognitive load on new users though where the user may have to do a bit more hunting to find the right area/action for the first couple of uses. If it is something that will be heavily used however, I could see it being easily learned, and the cognitive load thus reduced over time (as would be true with repeated use of any application).

Note also that if you start adding new or more complex features, you could find yourself having problems with differentiating buttons like edit vs. bulk-edit or something similar.

I would also definitely keep in mind the caveats listed in this answer to a previous related question, as they all apply and are definitely something to weigh in on your decision.

Suggestions: In order to reduce the cognitive load upfront, I might recommend having the labels included up front and allowing the user to switch to the label-less (compact) interface at a later time. Another option would be to force the user through an introductory series of screens intended to reassure the users of what major components are represented by which icon etc. You probably would one way or another want to have hover-text on your buttons to display their action.

2
  • Your second suggestion sounds like a good deal to me. I don't think that because of the rather big number of different contexts the interface may grow dramatically in size because of the additional labels.
    – Paul
    Commented May 4, 2012 at 19:49
  • " would increase the cognitive load on new users though where the user may have to do a bit more hunting to find the right area/action for the first couple of uses" Good example of this: Okcupid.com
    – Adam Grant
    Commented May 5, 2012 at 2:03
3

Regardless of context as noted by @GotDibbs, I don't think forcing label-less icons is a good approach.

First and foremost, I can tell what a few of the icons mean, but the others I'm pretty clueless on - this is incredibly frustrating, and actually is a sorespot with me and Apple's Mail.app.

A few make perfect sense - but if you're going to keep them without labels, the user should be able to add labels to them very easily. And this is, of course, in addition to very clear and responsive hover information. This won't wreck your design at all - just some sort of copy under the icon would look great. My design mentality thinks something in a dark gray with a drop shadow would work perfectly and help your users out.

1
  • That is also what I thought of. Allowing the user to hover over the icon and see where it leads him is probably a good idea too. Combining this with an introductory screen would be the ultimate solution, I guess.
    – Paul
    Commented May 4, 2012 at 19:51

Your Answer

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

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