Review menu icons
|Assignee:||Dan Gillean||% Done:|
|Category:||Usability||Estimated time:||5.00 hours|
|Target version:||Release 2.0.0|
|Google Code Legacy ID:||Tested version:|
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').
#2 Updated by Dan Gillean about 9 years ago
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
- IcoMoon: http://icomoon.io/#preview-free
- Free Icon Fonts on FontSquirrel: http://www.fontsquirrel.com/fonts/list/keyword/icons
- Blogs with lists of other free icon sets
- Not all free, but comprehensive for flat icons and icon font resources: http://css-tricks.com/flat-icons-icon-fonts/
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.
#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.