No quinto post sobre padrões de interação, falaremos sobre algumas maneiras comuns de apresentação de informações que precisam ser compreendidas pelo usuário (ou ao menos fazerem sentido) quando ele “passa o olho” por elas.
São três principais: cabeçalhos, visualizações interativas e painéis (dashboards).
20. Cabeçalho: usado quando o usuário precisa de um contexto mais abrangente que apenas um título de página para entender a informação apresentada. Nesses casos, o topo da página mostra uma área com dados relacionados ao conteúdo. O cabeçalho também pode fornecer ações relevantes para a página e que, quando utilizadas, interferem no conteúdo sendo apresentado. É interessante disponibilizar o recurso de expandir/ocultar a área do cabeçalho para que o usuário utilize o espaço da forma mais conveniente.
O cabeçalho mostra alguns dados que identificam o projeto que está sendo manipulado na página e também possibilita a navegação por projetos existentes. Ao navegar de um projeto ao outro, automaticamente o conteúdo da página é atualizado. Aqui o usuário pode esconder (hide) o cabeçalho.
21. Visualização interativa: use este padrão quando a informação fica muito confusa se apresentada apenas com textos. Os dados mostrados graficamente e com opções interativas ajudam na compreensão do que está sendo visualizado.
Apresentação de informações usando gráficos. Clicando em um ano são mostrados os dados mês a mês. E em cada mês, também é possível interagir para obter mais informações sobre o assunto.
Exemplo com mapas. Na primeira imagem você visualiza no mapa a rota de um ponto a outro, feita de carro. É possível interagir, arrastando a rota para alterá-la ou escolhendo algumas ações diretamente no mapa. Na segunda imagem, a rota feita com transporte público. Em ambos os casos, o trajeto é apresentado textualmente e também representado visualmente no mapa.
22. Painel: esse tipo de padrão resolve o problema de ter que fornecer visões distintas de vários tipos de informação. A solução é agrupar essas informações em uma única tela que mostre os dados-chave de uma forma visual apropriada, como se fosse uma fotografia. Escolher a apresentação gráfica mais adequada para cada tipo de informação, aliás, é um ponto crucial para a eficiência do painel. Alguns pontos de atenção para não errar no uso desse padrão:
- Painéis normalmente possuem visualizações interativas de dados;
- Muitos erram ao mostrar dados que não são úteis ao usuário ou colocam gráficos e outros elementos sem um contexto que dê sentido a eles;
- O uso de mecanismos inapropriados prejudica a comunicação do conteúdo;
- Elementos 3-D frequentemente são problemáticos.
Alguns exemplos de painéis, utilizando gráficos de vários tipos, mapas. Em algumas situações, o uso de tabelas ainda é o mais indicado.
No próximo post, padrões para Guias (mensagens, helps, instruções).
Veja os padrões anteriores: