Foreman Icon Usage Guideline Proposal

HI, All

Recently I have been working on the Foreman Icon Usage Analysis and created a proposal for the icon usage.
In this proposal, we addressed some things as following:

1, Icon usage guideline - Icons must first and foremost communicate meaning in a graphical user interface
2, Proposal for when to use icon alone - Icons alone should only be permitted when at least two out of the following three conditions apply
* Space is very limited (i.e., too small for text alone).
* The icons are mostly universal recognition from users (e.g., Home, Search, Edit)
* The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes).
Tooltips are required for icons when they are used alone.
3, Proposal for when to use icon+label, and label alone
* 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.
* 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.
4, Proposal for how to use icon
* In a button group, it should keep consistent for all buttons with or without icons.
* Not suggest to use icon on the navigation menu ( nav bar, tab ) unless adding the status icons such as warning or error icons.
5, Proposal for some common icons in Foreman
6, Proposal for some status icons in Foreman.

The detail information is in the PDF file, please have a review.
Before I begin to work on the next action[1], I’d love to get everyone’s feedback.

[1]Next action: 1, Create xwiki page for the guideline
2, Send PR to fix the inconsistent icon with PatternFly

Thanks
June - UXD Team

foreman Icon proposal.pdf (11.3 KB)

Looks good to me. +1
I'm wondering if we could add proposed items to indicate that something is activated / deactivated.

  • Timo
··· > On 13 Mar 2017, at 04:45, June Zhang wrote: > > HI, All > > Recently I have been working on the Foreman Icon Usage Analysis and created a proposal for the icon usage. > In this proposal, we addressed some things as following: > > 1, Icon usage guideline - Icons must first and foremost communicate meaning in a graphical user interface > 2, Proposal for when to use icon alone - Icons alone should only be permitted when at least two out of the following three conditions apply > * Space is very limited (i.e., too small for text alone). > * The icons are mostly universal recognition from users (e.g., Home, Search, Edit) > * The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes). > Tooltips are required for icons when they are used alone. > 3, Proposal for when to use icon+label, and label alone > * 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. > * 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. > 4, Proposal for how to use icon > * In a button group, it should keep consistent for all buttons with or without icons. > * Not suggest to use icon on the navigation menu ( nav bar, tab ) unless adding the status icons such as warning or error icons. > 5, Proposal for some common icons in Foreman > 6, Proposal for some status icons in Foreman. > > The detail information is in the PDF file, please have a review. > Before I begin to work on the next action[1], I’d love to get everyone’s feedback. > > [1]Next action: 1, Create xwiki page for the guideline > 2, Send PR to fix the inconsistent icon with PatternFly > > Thanks > June - UXD Team > > > > -- > You received this message because you are subscribed to the Google Groups "foreman-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an email to foreman-dev+unsubscribe@googlegroups.com. > For more options, visit https://groups.google.com/d/optout. >

@Timo, Thanks for your feedback, That’s a good suggestion. Will do!

··· > On Mar 13, 2017, at 2:19 PM, Timo Goebel wrote: > > Looks good to me. +1 > I'm wondering if we could add proposed items to indicate that something is activated / deactivated. > > - Timo > >> On 13 Mar 2017, at 04:45, June Zhang wrote: >> >> HI, All >> >> Recently I have been working on the Foreman Icon Usage Analysis and created a proposal for the icon usage. >> In this proposal, we addressed some things as following: >> >> 1, Icon usage guideline - Icons must first and foremost communicate meaning in a graphical user interface >> 2, Proposal for when to use icon alone - Icons alone should only be permitted when at least two out of the following three conditions apply >> * Space is very limited (i.e., too small for text alone). >> * The icons are mostly universal recognition from users (e.g., Home, Search, Edit) >> * The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes). >> Tooltips are required for icons when they are used alone. >> 3, Proposal for when to use icon+label, and label alone >> * 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. >> * 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. >> 4, Proposal for how to use icon >> * In a button group, it should keep consistent for all buttons with or without icons. >> * Not suggest to use icon on the navigation menu ( nav bar, tab ) unless adding the status icons such as warning or error icons. >> 5, Proposal for some common icons in Foreman >> 6, Proposal for some status icons in Foreman. >> >> The detail information is in the PDF file, please have a review. >> Before I begin to work on the next action[1], I’d love to get everyone’s feedback. >> >> [1]Next action: 1, Create xwiki page for the guideline >> 2, Send PR to fix the inconsistent icon with PatternFly >> >> Thanks >> June - UXD Team >> >> >> >> -- >> You received this message because you are subscribed to the Google Groups "foreman-dev" group. >> To unsubscribe from this group and stop receiving emails from it, send an email to foreman-dev+unsubscribe@googlegroups.com. >> For more options, visit https://groups.google.com/d/optout. >> > > -- > You received this message because you are subscribed to the Google Groups "foreman-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an email to foreman-dev+unsubscribe@googlegroups.com. > For more options, visit https://groups.google.com/d/optout.

JUNE ZHANG
ASSOCIATE MANAGER, UXD TEAM
junzhang@redhat.com mailto:junzhang@redhat.com T: 8388231 https://redhatbrand.github.io/redhat-email-signature/

https://red.ht/sig
TRIED. TESTED. TRUSTED. https://redhat.com/trusted