What Is the Best Approach To Minimalist Buttons (Icons)?

Question

My web app, like most, is trying to utilize as much space as possible by trying to use an icon as a button to perform specific tasks. I have quite a few that would make for a pretty obscure button, such as "mark as hidden". I can come up with icons that make sense if already know what you're looking at/for.

I have two problems with this approach:

1. To figure out what a button is, the user either has to:

   • [Mobile Devices]: Click the button and hope it have any adverse effects.
   • [Desktop]: Hover over the element which is acceptable, but doesn't allow for quick recognition of features. (This is on the lower end of my focus)

2. It forces users to become intimately familiar with your app. I realize any complex application will force users to do some learning to take full advantage of every feature, but it's my experience that users want to be able to play around with the basic functionality right off the bat.

Answer 1

I really like what Facebook and other online apps do when showcasing their features... They have a balloon with a description pointing to a button and invite users to click through the app (if needed) with a delimited and evident number of steps... Meaning, they will showcase 5 use-cases and they make you click on it. This is a one-time only feature... Once you've clicked is gone. Some games did the same, World of Warcraft, and Warcraft III had it.

Answer 2

This can be tricky.

What I've done is follow a simple rule: If it's not readily apparent what an icon might do, don't allow it to do anything permanent or drastic in one click. If you think a user might not be able to tell what an icon is going to do, bring up a menu for the user or at least make sure wherever they're headed it's both 1) easy to return to where they were, and 2) not going to alter or change anything just because they went there.

Some examples:

Menu probably needed

• Envelope icon: Okay, so you're sending or sharing or something, I get the idea. But sending or sharing what? And via what? This one probably requires some sort of menu, even if it's a "Share this via email? Yes No" sort of thing.
• Gears icon: So it seems like some sort of settings or something? That's a menu. Or you could just take them to the settings area, as long as they're not going to permanently alter anything just by going there.

No menu necessary

• Trash can icon: just about everyone knows what this is going to do, delete something. So (probably) no text necessary. (You still probably want a confirm on a delete, though, so maybe this is a bad example).
• Edit Pencil: If you have an edit pencil on a screen or in an area where there's only one thing it could be editing, it's probably okay just to take the user to the edit form on the first click.

Fuzzy ground

• Plus sign icon: Okay, depending on the app, this might not require text, but what if there are multiple things you can add? Then you might need to menu to choose what to add.

EDIT: Another thing to consider for usability's sake is the idea of having a dialog that warns them what the icon is about to do with a checkbox to suppress further warnings. Depending on what you have the icon doing and how frequently it's used. You don't want to hassle your experienced users.

Answer 3

here is my suggestion

• keep your icons simple and visually appealing , make sure you use the most common symbols(icons) so that users could easily recognize what their functionality is. If not simply disperse the idea of using icons
• Help feature - provide a help feature which documents the UI functionality for the users to use, especially if you have relative new ideas. (you can include a feature as told by @edgarator also)
• absense of icons doesnt necessary take much of UI space, best example is this UX.stackexchange site. Hence, use links, labels etc.
• users will take their own time to recognize new features and functionality in any new application. Hence, their is nothing much we can do about it, except to put our best effort in designing UI as simple as possible.

Answer 4

I would accompany each icon with a label. If you track interaction, you can monitor users as they interact with your app and become familiar with the icons associated behaviors. Reduce the size and/or contrast of the labels gradually, then remove them entirely.