1

Possuo uma tabela (DataTables), e essa tabela lista controles:

Esses controles são atividades contábeis, fiscais, documentais e outras, todo mes um empresa recebe um controle pra cada setor, e esse controle de cada mês, pode receber uma flag.

No contexto em questão, a flag é para notificar o usuário que determinado controle necessita receber uma atenção extra, ou mesmo que precisa de menos atenção que os demais.

Essas flags podem ser:

Do meu ponto de vista, eses icones não condizem com o que flag deve significar, mas não consigo encontrar algo 'mais correto', exceto o fa-info que está correto, bom:

Do ponto de vista de UX/UI, da forma mais padrão possível, quais seriam os icones recomendados para estes pontos a seguir:

  1. Intermediário: Nível de necessidade de efetuar algo dentro deste controle, sendo mudar o prazo, ou notificar que o prazo venceu, etc, mas que é de nivel intermediário a necessidade de efetuar essa ação.

  2. Importante: Nível de necessidade de efetuar algo elevado, sendo as prazos, ações de verificação (o sistema pode gerar essa flag sozinho caso a empresa seja prioritária e o prazo de conclusão vencer por exemplo), essa flag não pode ser desmarcada como a '1', ela se conclui sozinha quando a ação for concluida;

  3. Problema: Quando houve algum problema técnico no controle, foi feito um lançamento de um documento que não existe(lançado errado), ou alguma informação foi salva por um usuário de nivel operacional e ele precisa sinalizar um moderador pra que ele lhe de permissão de reescrever, etc, essa flag é simples, pode ser feita e desfeita a qualquer momento;

  4. Informativo: Quando o usuário X deseja atrelar um informação a flag que não deva acarretar em nenhuma ação por nenhum outro usuário ou ele mesmo no futuro.

PS: Cores não importam neste contexto, o sistema ja possui o padrão, estou com problemas apenas com icones.

4
  • Do jeito que a pergunta está, as respostas tenderão a ser opinativas. Vc fala de UX, mas não comenta nada sobre o contexto do seu sistema (por exemplo, que raios são "controles"? O que esses ícones irão indicar? Eles serão usados para uma notificação, ou para um botão de ação? etc). Sugiro que edite a pergunta para melhorá-la. Se a sua necessidade é somente pedir dicas de ícones, use o Chat do Stack Overflow em Português. Commented 7/11/2017 às 15:48
  • Sem saber detalhes do contexto, eu posso opinar que ícone bons (e supondo que se tratam de notificações) talvez seriam uma estrela amarela para "importante" e uma exclamação vermelha para "problema". Para "intermediário" não dá pra sequer opinar porque não sei sobre o que ele trata (é intermediário entre o que? Grande e pequeno? Bom e ruim? Duro e mole?). Talvez o próprio texto/rótulo "intermediário" esteja ruim (embora eu não entenda o que quer dizer um "nível de necessidade de efetuar algo"). Commented 7/11/2017 às 15:51
  • 1
    @LuizVieira vou inserir uns exemplos e dar um reformulada na pergunta, realmente está muito subjetiva. Commented 7/11/2017 às 16:03
  • Acho que com relação a interface, não existe forma mais padrão possível, fica a seu critério qual ícone inserir para cada flag. Por ex: Se você quiser colocar o ícone de um "abacaxi" na flag "Problema", uma hora você vai se acostumar e os usuários também, vai demorar um pouco? Vai, só porque não está no padrão. Commented 7/11/2017 às 16:18

1 Resposta 1

2

No contexto de necessidade, entendi algo como tarefas a serem realizadas, seguindo essa lógica, tarefa intermediária fica muito próximo de tarefa importante, para diferenciar pode-se usar um hourglass-half (dando a impressão de que essa tarefa é parcialmente relevante), ou melhor ainda um exchange visando uma simples troca/alteração simples com pouca necessidade.

Seguindo a ordem da pergunta ficaria algo mais ou menos assim.

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>

Não tenho uma visão aprofundada de como o usuário encara isso nos dias de hoje, talvez @LuizVieira possa salientar isso, minha resposta só engloba uma visão da GUI.

3
  • Acabei deixando dessa maneira por hora: imgur.com/a/A4Mbb , essa sugestão com o exclamation ficou muito melhor de como estava. Commented 7/11/2017 às 16:45
  • Ficou bom dessa forma, mas esse intermediário ainda não me convenceu kk. Commented 7/11/2017 às 16:56
  • 1
    O 'fa-exchange' foi o unico que não ficou 100% acho, mas comparado com o icon 'fa-flag' que estava antes, ficou muito bom kk, vou dar mais uma estudada, se eu achar algo melhor coloco uma imagem aqui. Commented 7/11/2017 às 17:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .