Fundamentos de Design Web Usabilidade, Interatividade e Comunicabilidade na Web &RQFHLWXDO “Dimensões” do sistema z Conceitual – Modelo conceitual da aplicação. z Funcional – Funções que o sistema oferece ao usuário z Interação – Forma como o usuário interage com o sistema z Comunicação – Comunicação do modelo conceitual para o usuário &RPXQLFDomR )XQFLRQDO ,QWHUDomR
21
Embed
Fundamentos de Design Web Usabilidade, Interatividade e
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Fundamentos de Design Web
Usabilidade, Interatividade e Comunicabilidade na Web
������������� �������� �������� ����� � !�"
&RQFHLWXDO
“ Dimensões” do sistema
z Conceitual– Modelo conceitual da aplicação.
z Funcional– Funções que o sistema oferece ao usuário
z Interação– Forma como o usuário interage com o sistema
z Comunicação– Comunicação do modelo conceitual para o usuário
– O que o usuário pode fazer.– O sistema oferece o que os usuários precisam?– Todas as tarefas podem ser realizadas?
z Interatividade– Como o usuário pode fazer– É fácil fazer? (tempo para realizar, número de erros)– É fácil aprender? (tempo para entender, memorização)
z Comunicabilidade– Como o sistemas comunica o que o usuário pode fazer e como ele
pode fazer.– É fácil ler a interface? O usuário entende todas as palavras,
ícones?– O usuário consegue construir o modelo conceitual (funcionalidade +
interatividade)
������������� �������� ���� ��� ������� ���
“ Dimensões” do d esign
z Design Conceitual– Modelo conceitual do sistemas: idéias, conceitos, relacionamento
z Design Fu ncional– Funções do sistema
z Design d a Interação (diálogo )– Entrada de dados e comandos– Respostas do sistema
z Design d a Comunicação (apresentação)– Representação
�escolha dos elementos que melhor comuniquem conceitos, relacionamentos, funções, comandos, resultados ações.
– Layout de telas�
organiza os elementos de interface em telas
– Arquitetura da Interface�
organização de páginas, telas ou janelas
������������� �������� ���� ��� ������� ���
Interatividade
z Possibilidades de interação que o sistema oferece ao usuário
z Estilos de interação– Linguagens de Comandos, Menus, Manipulação direta,
Preenchimento de formulário, Hipertexto
z Aspectos de Usabilidade– Desempenho e Produtividade– Número de erros– Aprendizado e Memorização– Distância Cognitiva e Semiótica
������������� �������� ���� ��� ������� ���
Problemas de interatividade – exemplo 1
�O usuário tem dificuldade em clicar na área de um link ou widget? Teste o número de erros e acerto
�O usuário precisa alternar muito entre digitação e teclado?
�Verifique se o tipo e o tamanho do widget está adequado à informação que o usuário deve fornecer
������������� �������� ���� ��� ������� ���
Problemas de interatividade – exemplo 2
z Problemas:z Usuário acha
que é um menu.
z Usuário não sabe se deve clicar ou não
z Áreas de clicar muito pequena
������������� �������� ���� ��� ������� ���
Comunicabili dade
z Qualidade da comunicação designer-usuárioz Avalia se o designer conseguiu ser bem sucedido
na tarefa de comunicar para o usuário suas intenções de design: – quais são as soluções para o problema do usuário– como o usuário pode interagir com o sistema
������������� �������� ���� ��� ������� ���
Comunicabilidade
z Eficácia da comunicação designer-usuárioz O designer deve informar ao usuário:
z Distância Articulatória– Esforço mental para percorrer a distância entre a formulação da
intenção e a especificação das ações�
Ativar comando de “salvar como” um outro arquivo�
Vários passos: Escolher comando, escolher pasta, digitar nome, pressionar botão.
�Ativar comando de salvar
�Único passo: Pressionar Ctrl+S ou ícone disquete
�!�"�"�#$�%�& '�(�)�*�& +�*, *�- .�*�/�& 0�1
Exemplo de distância semântica
z Tarefa: “Tirar a conta-corrente do vermelho”1. Verificar qual o meu débito na conta-corrente2. Verificar se eu tenho dinheiro em contas de investimentos
3. Fazer a transferência entre as contas
������������� �������� ���� ��� ������� ���
Exemplo de distância articulatória
1. Verificar qual o meu débito na conta-corrente1. Selecionar comando de extrato
1. Clicar Menu Consultar2. Clicar Opção extrato
2. Comandar função de extrato1. Decidir mês atual ou mês anterior
1. Se mês atual, fornecer dia
2. Se mês anterior, escolher mês do menu pull-down
2. Fornecer senha1. Clicar nos seis numeros2. Confirmar
������������� �������� ���� ��� ������� ���
DesignInteração
Mensagem
A abordagem da Engenharia Semiótica
z A Engenharia Semiótica é uma abordagem na qual os sistemas computacionais são vistos como artefatos de meta-comunicação, através do qual o designer envia uma mensagem para o usuário, cujo conteúdo é a funcionalidade (o que o usuário pode fazer) e a interatividade (como o usuário pode interagir) [de Souza, 1993].
SistemaDesigner Usuário
������������� �������� ���� ��� ������� ���
Design com interatividade e comunicabilidade
z Escolher os elementos de interfaces mais adequados para:– o usuário utilizar melhor o sistema– comunicar melhor o que fazer e como utilizar o sistema
z Ao interagir com qualquer sistema, uma pessoa possui um modelo conceitual do que o sistema é, o que ele faz, quais os seus componentes e propriedades, como interagir, etc.
z O modelo conceitual diz respeito a elementos abstratos –conceitos – e não a elementos de interface ou código fonte.
z Ele está relacionado com o conhecimento e experiências anteriores dos usuários com o próprio sistema, com outros sistema e com o mundo.
z Um modelo simples, claro, compreensível, coerente e consistente é fundamental para a usabilidade.
������������� �������� ���� ��� ������� ���
Representando o modelo conceitual
Categorias deinformações do domínio
Informaçõesprocuradas
Informaçõescomplementares
������������� �������� ���� ��� ������� ���
Representando Informações: exemplos
������������� �������� ���� ��� ������� ���
Diretrizes para representar conceitos
z Use o vocabulário do usuárioz Categorize as informações adequadamente
z Evite deixar as informações desatualizadasz Use técnicas de layout e estruturação para
organizar as informaçõesz Textos longos devem ser escritos por pessoas que
saibam escrever bem
������������� �������� ���� ��� ������� ���
Design com comunicabilidade
z Analise do perfil do usuário– Conheça o vocabulário do usuário
�Lingüístico, Visual, Sonoro
– Conheça os símbolos de sua cultura
z Ajuste a mensagem ao meio– De acordo com tamanho e resolução da tela, p.ex.
z Utilize a “linguagem das interfaces”– Janelas, menus, botões, caixas, rolagem,...– Arquivo, Editar, Exibir,... Ajuda– Padrões de layout na Web
�Cabeçalho, menu, corpo,...
������������� �������� ���� ��� ������� ���
Elementos de interfaces para interação
Acionar
Visualizar
Digitar informação
EscolherInformação
������������� �������� ���� ��� ������� ���
Falta de consistência na interação
�Problemas:
�Botão tem como significado preferencial ativar comandos
�Link deve ser usado para navegação
Botão usado para navegação
Link usado para função
������������� �������� ���� ��� ������� ���
Problema de comunicação de funcionalidade
z Exemplo de uma função mal comunicada
Significado realInterpretação do usuário
Compra de bilhete para uma data específica
Compra para que já tem reserva
Compra de bilhete sem data específica – tarifa total
Compra para quem ainda não tem reserva
������������� �������� ���� ��� ������� ���
Nova propo sta da TAM. Melhorou? Por que?
������������� �������� ���� ��� ������� ���
Nova propo sta da Varig. Ainda tem problemas...
������������� �������� ���� ��� ������� ���
Diretrizes para interação
z Naturalidade: Organize a seqüência de interações da maneira mais natural para o usuário
z Flexibilidade: Permita alternativas de interações para um mesmo comando
z Não-modal: Permita ao usuário consultar outras informações durante o comando e depois retornar ao ponto onde estava
z Perdão: permita ao usuário corrigir ou voltar atrász Unidade: Procure colocar os comandos em um
única janela. Se tiver mais de um comando na mesma janela, construa grupos separados
������������� �������� ���� ��� ������� ���
Diretrizes para interação
z Escolha o objeto de interação adequado para a ação que o usuário deve fazer
z Objeto adequado é aquele com o qual o usuário está familiarizado
z Use rotulação para comunicar a ação que o usuário deve fazer
������������� �������� ���� ��� ������� ���
Resultados de Interação
�Resultados de interação são as respostas que o sistema envia sobre comandos e interações básica.
�Podem ser resultados de processamento de informações do domínio
�Podem ser mensagens de erros, advertências, confirmações, etc.
�Resultado de uma busca: listagem de produtos
�Aviso informando que um produto procurado não foi encontrado
�Aviso informando que o usuário não preencheu todos os campo e umformulário
������������� �������� ���� ��� ������� ���
Resultados de interação: exemplo 2
z Deixando o usuário ciente do que está acontecendo
������������� �������� ���� ��� ������� ���
Comunicabili dade em resultados de interação
Mensagem boa
Mensagem ruim
������������� �������� ���� ��� ������� ���
Problemas em resultados de interação
z Resposta a uma senha digitada incorreta: o usuário não entende o vocabulário
������������� �������� ���� ��� ������� ���
Diretrizes para resultados
z Use o vocabulário do domínio do usuário. Evite termos técnicos.
z Resultados devem fazer referências às informações passadas no comando.
z Advertências e avisos deve ser colocados em primeiro plano para chamar a atenção do usuário.
z Cores fortes e diferenciadas de outros elementos chamam atenção. Sons também podem ser utilizados.
z Os resultados de função devem ser destacados de outros elementos da página (banners, menus,...).
������������� �������� ���� ��� ������� ���
Princípios Norman revistos pela Eng. Semiótica
z Mensagem do designer para o usuário– Visibilidade e Affordance
�Tudo na interface deve comunicar ao usuário o que fazer e como fazer.
– Feedback�
A resposta faz parte da mensagem
z Significado da mensagem do designer– Mapeamento
�Associação entre a mensagem e o seu significado
– Modelo conceitual�
Significado da mensagem do designer – lógica do sistema –funções e objetos do domínio