Pergunta

Estou construindo uma aplicação web, onde uma das características que faz com que os usuários sejam notificados em tempo real quando um alerta pertencentes a eles ocorre, semelhante à grande barra laranja no Estouro de Pilha.

Eu tenho algumas opções, e eu estava me perguntando se havia uma usabilidade orientação sobre a melhor forma de fazer isto.Uma opção é ter um pequeno notificações de caixa na tela que pisca em cores quando aparece um alerta, mas eu estou preocupado que um simples, repetido alteração na cor, não será suficiente para atrair a atenção do usuário.

Outra opção é ter uma janela vêm flutuando pela tela, exigindo a atenção do usuário, mas eu sempre achei aqueles a ser importuno.Talvez uma outra forma de animação poderia ser menos irritante, mas igualmente susceptíveis de atrair a atenção do usuário?

Eu realmente não estou olhando para um parecer tanto quanto eu estou olhando para uma usabilidade discussão/recursos que possam cobrir esse tipo de decisão.

Foi útil?

Solução

A resposta depende de quão importante é que o usuário preste atenção e quão importante é que eles tomem alguma ação? Por exemplo, o alerta do tipo "seu servidor acabou de travar" ou "você tem um novo e-mail da tia Zelda"?

Para o primeiro tipo, algo invasivo é o melhor - sua opção de flutuar uma janela ou pode ser alterar o fundo da página para a cor chamativa (e piscar ??? Não me bata, por favor!). Outra maneira agradável de chamar a atenção que vi foi alterar a página (e, portanto, uma janela do navegador) para um conjunto de " * * * * * * * *" - que não é o suficiente para atrair atenção às vezes.

Para algo menos invasivo para menos-tóxicos críticos, a barra de notificação principal de So é uma das melhores soluções do ponto de vista da usabilidade (se não o melhor), seguindo as principais métricas (quanto trabalho o usuário precisa fazer para lidar com isso e olhar para ele, e quão intuitivo é seu comportamento):

  • Os olhos do usuário viajam para o topo da tela com mais frequência e mais probabilidade do que em outros lugares

  • É muito fácil se livrar depois de perceber - a barra é larga (fácil de acertar com o mouse, não é necessário ajustes horisontais) e no topo (não é muito fino trabalho de mouse para obter o ponteiro lá).

Outras dicas

IMHO, o nível de aborrecimento deve refletir o nível de erro ... para um erro, uma camada com a mensagem de erro, impedindo que o usuário faça qualquer outra coisa deve ser melhor. Para uma notificação, uma caixa que aparece na parte superior da página (como um navegador pedindo para salvar uma senha) é bom.

Então eu não acho que exista uma solução melhor ... depende apenas do tipo de alerta ... :)

Verificação de saída Jgrowl, é uma ótima estrutura para notificações discretas, você pode encontrar algumas capturas de tela de amostra aqui.

Se você está procurando recursos, sugiro Não me faça pensar Por Steve Krug. Seu site, Senso comum avançado, também é uma ótima fonte.

Outro ótimo site para dicas e diretrizes de usabilidade é o Jakob Nielsen's useit.com

Eu estava em um site outro dia que tinha um botão de download do produto. Eu cliquei nele, parecia que nada aconteceu. Cliquei nele novamente e o link de download que o primeiro botão criado fez um pouco para mim. Muito eficaz e riu:

http://haanstra.eu/putty/

Meu sistema tem três tipos de notificações.Cada tipo de notificação é o estilo com uma borda e cor de fundo:

  • Sucesso:Verde
  • Aviso:Amarelo
  • Erro:Vermelho

Alertas, como "Você não preencha esse campo corretamente!" são tratados inline, de modo que não há pop-ups para irritar o usuário.

Eu projetei o meu sistema para o fade out notificações de alguns segundos - isso significa que os usuários estão acostumados a ver a caixa verde, que desaparece após alguns segundos.No entanto, quando um erro ou de aviso ocorre a caixa permanece na tela para a direita na frente do usuário, exigindo atenção.

Eu acredito avisos e erros devem ser usados somente quando absolutamente necessário, de modo que quando eles são usados, eles mantêm um nível significativo de impacto.No meu sistema, avisos e erros não fade out - eles ficam lá para lembrá-lo de que ALGO NÃO ESTÁ MUITO CERTO.

Na minha experiência, se você estiver indo para interagir com um usuário, torná-lo grande e em seu rosto, mas não torná-lo muito para que ele impeça o resto da página.Então, não pede, ou do visuallightbox sobreposições de estilo (na minha opinião).

Acho que a função de efeito de destaque da interface do usuário do jQuery é boa para alertar discretamente os usuários de que algo mudou; No entanto, como outros disseram, depende da importância da mensagem - às vezes você só precisa ser invasivo!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top