Olá caro leitor. Passei por um blog americano e li sobre um assunto muito buscado e utilizado por desenvolvedores. Vou demonstrar como você pode criar e exibir caixas de mensagens estilosas na tela do usuários, utilizando CSS.

Vamos primeiro tomar um rápido olhar para tipos de mensagens.

1. Mensagens de Informações

O objetivo das mensagens de informação é informar o usuário sobre algo relevante. Isto deve ser apresentado em azul, porque as pessoas associam esta cor com a informação, independentemente do conteúdo. Isto poderia ser qualquer informação pertinente para uma ação do usuário.

Por exemplo, pode mostrar alguma mensagem info ajudar informações relativas usuário atual acção ou algumas dicas.

2. Mensagens de sucesso

Mensagens de sucesso devem ser exibidas após o usuário realizar uma operação com sucesso. Quero dizer, uma operação completa - não houve algum erro. Por exemplo, a mensagem pode dizer: "Seu perfil foi salva com êxito e confirmação mail foi enviado para o endereço de e-mail fornecido".

3. Mensagens de alerta

Mensagens de alerta deve ser exibido para um usuário quando uma operação não pôde ser concluída em um todo. Por exemplo, "Seu perfil foi salva com sucesso, mas a confirmação de email não poderia ser enviado para o endereço de e-mail fornecido.".

4. Mensagens de erro

Mensagens de erro deve ser exibida quando uma operação não pôde ser concluída em tudo. Por exemplo, "Seu perfil não pôde ser salvo." Vermelho é muito adequado para isto, uma vez que as pessoas associam esta cor com um alerta de qualquer tipo.

---

Agora, que se sabe a maneira de apresentar mensagens para os usuários, vamos ver a melhor forma de aplicar isto usando um CSS. Vamos ver rapidamente como exibir na tela.

Irei fazer tão simples quanto possível. O objetivo é ter uma única div que implementa uma única classe CSS. Por isso, o código HTML terá a seguinte aparência:
<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

A classe CSS irá adicionar uma imagem de fundo para o div que irá ser posicionado top-esquerda.Também irá criar um padding dentro da div de modo que o texto pode ter espaço suficiente branco em volta dele. Note que tem de ser deixado padding mais amplo para evitar sobreposição do texto com a imagem de fundo.


E aqui estão as classes CSS para todos os quatro (cinco com validação) diferentes tipos de mensagens:
body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

Conclusão

As mensagens são uma parte importante da experiência do usuário que é muitas vezes omitido. Existem muitos artigos que mostram muito bem decoradas as caixas de mensagem, mas não é só uma questão de design. Ela deverá prestar um serviço ao usuário com informações significativas, semanticamente e visualmente.

Artigo traduzido de: http://www.jankoatwarpspeed.com

compartilhe