Doubt over icons in UX (Font-awesome)

1

I have a table (DataTables), and this table lists controls:

These controls are accounting, fiscal, documentary and other activities, every month a company receives a control for each sector, and this control of each month can receive a flag .

In the context in question, the flag is to notify the user that a particular control needs to receive extra attention, or even that it needs less attention than the others.

These flags can be:

From my point of view, these icons do not match what flag should mean, but I can not find something 'more correct' except the fa-info that is correct, good:

  

From the point of view of UX / UI, in the most standard way possible, which   would be the recommended icons for these points below:

  • Intermediate: Level of need to do something within this control, being to change the term, or notify that the term has expired, etc., but that is intermediate level the need to carry out this action.

  • Important: Level of need to do something high, being the deadlines, verification actions (the system can generate this flag alone if the company is a priority and the deadline wins for example), this flag can not be cleared as '1', it concludes itself when the action is completed;

  • Problem: When there was a technical problem in the control, a document was written that did not exist (cast wrong), or some information was saved by a user of operational level and he needs to signal a moderator so he can re-write, etc. , this flag is simple, can be made and undone at any time;

  • Informational: When user X wants to bind an information to the flag that should not entail in any action by any other user or himself in the future.

  • PS: Colors do not matter in this context, the system already has the default, I'm only having problems with icons.

        
    asked by anonymous 07.11.2017 / 16:11

    1 answer

    2

    In the context of necessity, I understood something like tasks to be performed, following this logic, intermediate task gets very close to important task, to differentiate one can use hourglass-half (giving the impression that this task is partially relevant ), or better yet a exchange for a simple exchange / simple change with little need.

    Following the order of the question would look something like this.

    i{
      padding: 15px;
      margin: 15px;
      background-color: #EEE;
    }
    .fa-exchange{
      color: #004D40;
    }
    .fa-exclamation {
      color: #FFC107;
    }
    .fa-exclamation-triangle {
      color: #F44336;
    }
    .fa-info {
      color: #3F51B5;
    }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <i class="fa fa-exchange" aria-hidden="true"></i>
    <i class="fa fa-exclamation" aria-hidden="true"></i>
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
    <i class="fa fa-info" aria-hidden="true"></i>

    I do not have an in-depth look at how the user looks at it these days, maybe @LuizVieira might point this out, my answer only encompasses a GUI view.

        
    07.11.2017 / 17:28