Task #5009

Review menu icons

Added by Peter Van Garderen about 9 years ago. Updated almost 9 years ago.

Status:VerifiedStart date:04/27/2013
Priority:HighDue date:
Assignee:Dan Gillean% Done:

100%

Category:UsabilityEstimated time:5.00 hours
Target version:Release 2.0.0
Google Code Legacy ID: Tested version:
Sponsored:No Requires documentation:

Description

RE: icons introduced in Revision 3899340a. It's great and necessary to have icons. Lets review options available in our icon library to choose the most appropriate. e.g. pencil icon typically reserved for 'edit' not 'add'; magnifying glass over folder typically reserved for 'search in folder' not 'manage'. Related issue: review names of top-level menus, e.g. 'Admin' menu is using gear icon which is typically used for 'settings'. The icon seems appropriate but is 'Admin' still the best name for that menu group? (rather than 'settings' or 'preferences').


Related issues

Related to Access to Memory (AtoM) - Bug #5149: Improve usability of search bar icons Invalid 05/30/2013
Duplicated by Access to Memory (AtoM) - Feature #5383: ICONS for 2.0 Duplicate 07/22/2013

History

#1 Updated by Peter Van Garderen about 9 years ago

  • Tracker changed from Bug to Task

#2 Updated by Dan Gillean about 9 years ago

Notes:

First of all, I recommend that, if we are not already doing so, we implement an icon web font, rather than simply using individual icon images, as it will be easier to manage over time.

Fun page about Icon Fonts: http://css-tricks.com/examples/IconFont/

There are several free ones available. Ideally, we could use Font Awesome, since it has been designed specifically for use with Twitter Bootstrap, and works with IE7. See: http://fortawesome.github.io/Font-Awesome/

Using this as a template to easily talk about icon choices, here are some thoughts on the following for the toolbar in 2.0. I will give thoughts on the menus, then list the icon names found on Font Awesome’s home page as examples/options.

Add: Traditionally involves a plus sign of some sort rather than the current pencil in use. See: icon-plus-sign (preferred), or icon-plus. Option not available: document image with plus sign in corner.

Manage: Tricky, since it’s hard to find an icon that sums this up. The icon in use is certainly not what is commonly used, but what is commonly used for “Manage?”

I think we could use a pencil for this – people will learn quickly – but it’s not the most intuitive, either. Pencil used on paper could also work for this, and might be the best option, since editing is a part of manage. The icons often used for inboxes might actually work in this instance, since it implies work. Folder (open or closed) is an option as well. See: icon-edit (preferred), icon-pencil, icon-inbox, icon-folder-open-alt (next choice), icon-folder-open-closed, icon-folder-open, icon-folder-close, icon-file-alt

Import: Again, no ideal icon is available in Font Awesome, though the download icons could serve this purpose. See: icon-download-alt (preferred), icon-download, or possibly icon-sign-in.

The download icons in Font Awesome are not that great for use for this purpose, but other font sets have better ones. I would also be into using something such as the following, only flat: http://www.clker.com/clipart-270884.html

Language I think the globe icon works for this, personally. Speech bubbles could work for this as well. In Font Awesome, see: icon-globe, icon-comments-alt, icon-comment-alt, icon-comment, icon-comments.

Also, there is an initiative to standardize the language icon used in applications. See: http://www.languageicon.org/ Unfortunately, the icon they have chosen is opaque in terms of meaning (to me at least), and their blog has not been updated since 2009, so not a good sign – but I thought I would share.

Other Icon Resources

On Re-Naming Admin:

We could possibly do this, but let’s not forget that currently “Settings” is an option under the Admin menu. Using the gear symbol makes it rather universally understood that it is settings. If we did want to change the name to Settings, we could call settings “Site Settings,” since this is what you see as the header when you navigate to the settings page in 1.3. Is “global search/replace” really a setting?

As a final point, I think it would be useful to have tooltips appear when the icons are hovered over, if possible. The information is included at the top of the menu when clicked, but it might simplify the initial confusion, and fear users have of clicking a button without knowing what it is going to do, if we provide simple tooltips.

#3 Updated by David Juhasz about 9 years ago

  • Target version changed from Release 2.0.0 to Release 2.0 - interim 1

#4 Updated by Jesús García Crespo about 9 years ago

  • Target version changed from Release 2.0 - interim 1 to Release 2.0.0

#5 Updated by Jesús García Crespo about 9 years ago

  • Estimated time set to 5.00

#6 Updated by Jesús García Crespo almost 9 years ago

  • Status changed from New to QA/Review
  • % Done changed from 0 to 100

Applied in changeset atom|commit:ca52a951ae35748c234194df5e0cb03a6f4ce75d.

#7 Updated by Dan Gillean almost 9 years ago

Jesus, I think the icons look great. Before I verify this issue, I wanted to ask: is it possible to add labels to the icons, so when a user hovers, they get the little pop-up text that says "Add", "Manage" etc? I'm hoping that adding labels is something easier to do than actually adding full tooltips. If it's not that easy we can let it go - the docs will outline each tab and its uses in the "Access Content" section, with links to relevant sections of the docs for actually using the functionality of each tab.

#8 Updated by Jessica Bushey almost 9 years ago

  • Status changed from QA/Review to Feedback

#9 Updated by Jesús García Crespo almost 9 years ago

  • Status changed from Feedback to Verified

It would be possible. Feel free to file a new issue, :) - this one had its own scope and it's clearly different of what you're asking now, a time estimation, etc...

Also available in: Atom PDF