21
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

Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

Embed Size (px)

Citation preview

Page 1: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

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

Page 2: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Aspectos da Usabilidadez Usabilidade =

Funcionalidade+Interatividade+Comunicabilidadez Funcionalidade

– 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

Page 3: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 4: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 5: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Comunicabilidade

z Eficácia da comunicação designer-usuárioz O designer deve informar ao usuário:

– O que fazer

– Como fazer

������������� �������� ���� ��� ������� ���

Problema de Comunicabilidade

�! #"%$'&( *)(+-,. 0/ 0+132 1�4#5 6#7

8:9�;0< =#>@?�=#>A='B09DC(EGFHEI(J%KLJDI(MANPO:JDQHRTS#M.UVXWLYDZ'[-\ ]0^#\ _�\ `Ta%Z�[�b�Z

c Z�[-Y#d b�a�e(f#gh c a%f*W0YDZ'Z(Y%W0YDZ c \ a(g

iLj#iLkLl�m�n

O designer precisa comunicar o modelo de interação para o usuárioO designer precisa comunicar o modelo de interação para o usuário

?

Page 6: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Falta de comunicação

�! #"%$'&' #"%$(*),+.-%/1032

4�5�6�6�78�9�: ;�<�=�>�: ?�>@ >�A B�>�C�: D�E

Modelo teórico para a interação

z Engenharia Cognitiva [Donald Norman, 1986]

F'GIH J�G KML N�OQPQR�STPVUXWZY

['YIR \�Y ]M^ _#`MaVbdcZe#fVg

formulação da intenção

especificação da seqüência de ações

execução

avaliaçãointerpretaçãopercepção

h ikj�l*m.n%o1p%q

Comecepor aqui

Page 7: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Exemplo do process o de interação

�! #" $% '&)(+*-,/."10 .32�43

5!6#7 8%6'9):<;>=):3?A@3B�C/6

formulação da intenção

especificação da seqüência de ações

execução

avaliaçãointerpretaçãopercepção

DFEHGJILKHM%KJNON�PQGRHS�TVUXW�YJZ UQ[%S]\^V_J`�a bVcedHb]fQgHc�h

iFj#kJlHkJmVjlJnJoLpHj%pJq�r�lHkJmVjs%t�u�uLvHw�xHt�yHzJvJ{}|~J�H�%�%�Q�]�H�Q�J�-�L� ���

�V�H�%�]�����L�J���H�� ���������Q�V�%�V�H� ]¡ �Q� ¡Q ]¡ �J��� �V¢£�¤�¥O¦J§ ¨�©�¨Jª�«©�«J¬L¨�­�«Q®%¤]¥¯�° ®%¨ ¯�¯ ¤J±

²´³�µV¶!·%³J¸ ³H¹�º ¶�»H¼J½¶!¹%¶�¾Q¼�»H¿J¶!¿J³À�ÁJÂHÃ%Ä%ÅVÆ#ÇQÇJÈ�É�ÊLÅJÊÄ%Ë�Ì}ËJÃ#ÍJÅHÍJËVÃÎ]ÏHÐQÐJÏXÑ�ÐJÒJÓHÔ�Õ

Ö ×]Ø�ÙAÚ�Û>ÜHÝ>Þ

ß>à�á âVãåäHã�à�æHãç�è]éLêVë�ì�éLíJéLî%ïðòñ ó]ñ ô�õåöHõ]÷QøQùJõåú ñ û�üLõøJ÷'ý�öHõ]÷QøQùJõåú ñ û�üLõVþ�ÿ����� ����� ������ ���� �����

���������� ������������! " #���$&%'�(�)�*+)�, -.)

/1032�465�7�8�9:2;<5= 0>@?�2�A B.5�2�?+5�>�C�00D?&8�96EF G&0DC�8H 2�? = 5<C�0?�F ?IB.8;<5

JLK�M�M�NPO.Q�R SUTWVYX�R Z6X[]\�^ _`+acb d�e

Princípios do Norman

z Visibilidade e Affordance– As tarefas e ações devem estar visíveis para o usuário– Os controles devem indicar/estimular (afford) qual a ação que o

usuário deve realizar

z Modelo conceitual– A aplicação deve ter um modelo conceitual consistente com a

imagem do sistema

z Mapeamento– As variáveis psicológicas devem ser mapeadas em variáveis físicas

z Feedback– O usuário deve receber um feedback contínuo do sistema

Page 8: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Distância Semântica e Articulatória

z Distância Semântica– Esforço mental para percorrer a distância entre o estabelecimento

da meta e a formulação da intenção.– Exemplos:

�Meta: formatar um documento

�Vários passos: formatar página, formatar parágrafos,...

�Meta: salvar arquivo

�Único passo: Ativar comando de salvar

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

Page 9: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 10: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

�! "�!#$�% &')("*�+-,./("0

1 243�57698;:=<;>?=@BADC7E"F ?=G;H=I�@

Elementos daInterface

J�K�L�L�MN�O�P Q�R�S�T�P U�TV T�W X�T�Y�P Z�[

Elementos de interfaces Web

z É o repertório do designer:z Elementos

– Elos (Links)– Caixas de texto: uma linha, múltiplas linhas, numéricas, ...– Botões: comandos, check, opção, ...– Menus: select, listas, pop-up, ...– Linguagem: palavras, frases, texto, ...– Imagens: figuras, fotografias, gráficos, ...– Sons: “beeps”, músicas, vozes, ...– Páginas, Quadros (frames), Tabelas, Caixas– Espaço vazio

z Possibilitam... – ...a interação usuário-sistema– ...a comunicação designer-usuário

z Em quais situações eles devem ser empregados?

Page 11: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Elementos de Interfaces Web

Menus

Símbolos(Marcas)

Figuras

Texto

Links

Botões

������������� �������� ���� ��� ������� ���

Design com mais comunicabili dade�

Designer envia para o usuário uma mensagem interativa e unidirecional�

O designer deve informar e orientar o que o usuário deve fazer�

Comunicabilidade – qualidade da comunicação com o usuário

"!# "$%�& '(*)#+�,.-/0)#1

243�5�687:9<;�=?>#@ A#;�B 9CED?F�DHG�CJI K�D8L:MONPDHGQJRHSOTPU�QEVHWYX Z [<\:W]�^<_a`�bPcHd e�cOfhg

iajPk#lOmHnpo�k#q rHkOjsmHt8u�t�r�u�nv?w#xzy�{4|�}�{p~Hv

���H� {���w �:�#��� vH� v8� �#����<�O�P���<�#� �a�:�O�P�H��J�H���P���

Page 12: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� �������� ����� � !�"

Interação com mais comunicabil idade

#%$'&)(+*-,'.0/1,'2 3'45.6 7'8'95:<;)=57

>1?'@ ?�A�B C)D5EGF�H)I'?'J�C)B >B D5A�@ KGB F?

L B D5EG@ M-?'D�N ?AOC)D5A�@ KGB F

P KQJ'F+?�A�B >1C?�RSJ'@ B AOEGF

M-?'@ T5C)FE5CK5>�K5UGF B C

V�W�X�X�YZ�[�\ ]�^�_�`�\ a�`b `�c d�`�e \ f�g

Modelo Conceitual

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.

Page 13: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

Representando o modelo conceitual

Categorias deinformações do domínio

Informaçõesprocuradas

Informaçõescomplementares

������������� �������� ���� ��� ������� ���

Representando Informações: exemplos

Page 14: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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,...

Page 15: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 16: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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?

Page 17: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 18: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 19: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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

Page 20: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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,...).

Page 21: Fundamentos de Design Web Usabilidade, Interatividade e ...jair/webdesign/webfundamentos.pdf · z Aspectos de Usabilidade – Desempenho e Produtividade – Número de erros – Aprendizado

������������� �������� ���� ��� ������� ���

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