Project

General

Profile

Icon Usage Guideline » History » Version 3

June Zhang, 03/30/2017 02:23 AM

1 1 June Zhang
h1. Icon Usage Guideline
2
3
4
h2. Icons must first and foremost communicate meaning in a graphical user interface.
5
6
Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy—confusing, frustrating, eye candy—and to visual noise that hinders people from completing a task. 
7
8
h2. Proposal for when using icons alone
9
10
Icons alone should only be permitted when at least two out of the following three conditions apply:
11
*  Space is very limited (i.e., too small for text alone). 
12
*  The icons are mostly universal recognition from users (e.g., Home, Search, Edit) 
13
*  The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes). 
14
15
Tooltips are required for icons when they are used alone. 
16
17
h2. Proposal for when using Icon+Label, Label
18
19
If space allows, icons combined with text is best. Selective use of icons with text makes certain items stand out more or add visual interest. It may also improve the scanability of the items.
20
21
As mentioned in the previous page, Icons must first and foremost communicate meaning, if there is an icon that can deliver this meaning, then we will use Icon+Label, if not, use Label alone.
22
23
h2. Proposal for how to use Icon
24
25
* In a button group, it should keep consistent for all buttons with or without icons. 
26 2 June Zhang
* Not suggest to use icon on the navigation menu ( nav bar, tab ) unless adding the status icons such as warning or error icons.
27 1 June Zhang
28 3 June Zhang
h2. Proposal for the common icons
29
30
Please check the attachment.