Doubt about icons in UX (Font-awesome)

Asked

Viewed 55 times

1

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

These controls are accounting, tax, 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 given control needs to receive extra attention, or even that it needs less attention than the others.

Those flags may be:

From my point of view, those icons don’t match what flag must mean, but I cannot find something 'more correct', except the fa-info that is correct, good:

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

  1. Intermediary: Level of need to do something within this control, being to change the deadline, or to notify that the deadline has expired, etc., but that is of intermediate level the need to perform this action.

  2. Important: Level of need to perform something high, the deadlines being verification actions (the system can generate this flag alone if the company is prioritized and the completion deadline expires for example), this flag cannot be unchecked as the '1', it concludes itself when the action is concluded;

  3. Problem: When there was some technical problem in the control, was made a release of a document that does not exist (launched wrong), or some information was saved by a user of operational level and he needs to signal a moderator so that he gives you permission to rewrite, etc, this flag is simple, can be made and undone at any time;

  4. Informative: When user X wants to link information to flag that should not entail any action by any other user or itself in the future.

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

gui ux

  • The way the question stands, the answers will tend to be opinionated. You talk about UX, but you don’t comment on the context of your system (for example, what rays are "controls"? What will these icons indicate? They will be used for a notification, or for an action button? etc). I suggest you edit the question to improve it. If your only need is to ask for icon tips, use [chat].

  • Without knowing details of the context, I can opine that good icons (and assuming they are notifications) might be a yellow star for "important" and a red exclamation for "problem". For "intermediary" you can not even give an opinion because I do not know what it is about (is it intermediate between what? Big and small? Good and bad? Hard and soft? ). Maybe the "intermediate" text/label itself is bad (although I don’t understand what a "level of need to do something means").

  • 1

    @Luizvieira I will insert some examples and give a reformulated question, really is very subjective.

  • I think with respect to the interface, there is no more standard form possible, it is up to you which icon to insert for each flag. For example: If you want to put a "pineapple" icon on the "Problem" flag, eventually you’ll get used to it and users too, will it take a while? Go, just because it’s not in the pattern.

1 answer

2


In the context of need, I understood something like tasks to be performed, following this logic, intermediate task is very close to important task, to differentiate can use a hourglass-half (giving the impression that this task is partly relevant), or better still a exchange aiming at a simple change/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 don’t have an in-depth view of how the user sees it these days, maybe @Luizvieira can point this out, my answer only encompasses a view of the GUI.

  • I ended up leaving it this way for now: https://imgur.com/a/A4Mbb this exclamation suggestion got much better than it was before.

  • Got good that way, but this middleman still hasn’t convinced me kk.

  • 1

    The fa-exchange was the only one that was not 100% I think, but compared to the icon 'fa-flag' that was before, it was very good kk, I’ll give another study, if I find something better put an image here.

Browser other questions tagged gui ux

You are not signed in. Login or sign up in order to post.