Considerações sobre Web Design Ficheiro

Web Design: algumas considerações
IPCA / EST
Abril 2013
Considerações
 Considerações importantes em design de interação:
 Quanta informação deve ser apresentada;
 Como a informação deve ser distribuída;
 Qual a linguagem que deve ser utilizada;
 Quão estética é a apresentação da informação;
 Quão consistente é um ecrã em relação aos demais.
Considerações
 Expectativas mais comuns dos utilizadores:
 Aparência ordenada, clara e bem distribuída da
informação exibida;
 Indicação clara da informação que está sendo exibido e
do que fazer com ela;
 Apresentação da informação exatamente onde o
utilizador a esperaria;
 Indicação evidente das relações entre opções,
cabeçalhos, dados, dicas, legendas, etc.
Considerações
 Expectativas mais comuns dos utilizadores:
 Modo simples de acesso a todas as funcionalidades
presentes no sistema e de saída de cada uma delas;
 Indicação clara de quando uma ação pode causar uma
alteração permanente nos dados ou no sistema.
Considerações
 Metas de Design de Interfaces:
 Redução da carga de trabalho visual;
 Redução da carga de trabalho intelectual;
 Aumenta da produtividade;
 Aumento do grau de satisfação.
Considerações
 Organização Clara e Significativa dos Elementos
 Consistência;
 Ordenação dos Dados e do Conteúdo do ecrã;
 Navegação entre ecrãs;
 Composição Visualmente Agradável;
 Quantidade de Informação.
Falhas Típicas
 Inconsistência
 Ambiguidade relativamente à percepção humana
 Sobrevalorização das capacidades de raciocínio do
utilizador
 Dificuldade de uso
 Deficiência quanto à clareza visual
 Desrespeito ao conforto visual do utilizador
Novas Tecnologias
 Não tentar atrair o utilizador com o uso da
última tecnologia de ponta;
 Nem todos os browsers têm o mesmo
comportamento para algumas tecnologias;
 O browser do utilizador pode não suportar a
nova tecnologia;
 A máquina do utilizador pode não suportar a
nova tecnologia.
Animações
 Evitar incluir elementos que se movem
incessantemente;
 Mover imagens tem um efeito de
sobrecarga na visão humana;
 Interfere na concentração para a leitura do
texto.
Páginas
 Todas as páginas devem apresentar de
forma clara a sua relação com as demais;
 Uma página pode ter sido localizada por um
motor de busca, e portanto o utilizador pode
pretender aceder a páginas relacionadas;
 Cada página deve conter um link para a
homepage e alguma indicação da
hierarquia desta página com as demais.
Scroll
 Nem todos os utilizadores usam o scroll
para visualizar partes abaixo da página;
 Todas as opções, controles de navegação e
conteúdos mais importantes devem ficar no
topo da página.
Informações atualizadas
 Informações atualizadas mostram que o
responsável pela sua manutenção está
atento ao seu conteúdo;
 Páginas com informações desatualizadas
dão uma ideia de abandono;
 Remover informações que já caducaram.
Ação Retroceder
 O botão Retroceder é muito usado num
browser;
 Ocorrem problemas com a navegação pelo
botão Retroceder quando:
– se usa frames;
– se abre uma nova janela;
– se desativa o seu funcionamento para evitar
voltar às páginas anterior.
Ações de Publicidade
 O número de clicks em mecanismos de
publicidade é cada vez menor;
 Inconscientemente os utilizadores:
– ignoram os banners;
– ignoram tudo o que pisca, animações;
– fecham janelas de publicidade, mesmo antes
das mesmas estarem completamente
carregadas.
Scroll Horizontal
 Evitar o uso de scroll Horizontal;
 Necessário quando a resolução usada pelo
utilizador não é a mesma imaginada pelo
responsável da página.
Datar a Informação
 Os dados disponibilizados devem ter uma data
associada;
 Artigos, textos e outras informações sem
data associada, pode induzir dúvidas acerca da validade
da informação.
Links Visíveis
 Os links reprensentam o primeiro elemento de
interação na web;
– A presença de links deverá ser óbvia;
– Diferenciar os links visitados dos links não
visitados;
– Evitar abrir novas páginas em novas janelas a
partir de um link (usar novos separadores).
Fundamental no Web Design
 Os utilizadores valorizam as melhorias seguintes:
– Textos que podem ser lidos;
– Conteúdo e respostas para suas questões;
– Navegação e procura que os ajudem a
encontrar o que procuram;
– Formulários pequenos e simples;
– Ausência de links desatualizados, conteúdos
desatualizados.
Fundamental no Web Design
 Apresentar a estrutura do hiperdocumento e
a posição corrente de navegação;
 lay-out gráfico visando conforto visual
(distribuição, coerência e cores);
 Uso de metáforas adequadas para facilitar a
navegação (ex: casa, pastas, setas);
 Uso de auxiliar de navegação e orientação.