fundamentos de design web usabilidade, interatividade e

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

Upload: others

Post on 03-Feb-2022

2 views

Category:

Documents


0 download

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

&RPXQLFDomR)XQFLRQDO,QWHUDomR

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

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

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

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:

– 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

?

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

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

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

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

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

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

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

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

�! "�!#$�% &')("*�+-,./("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?

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

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���

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

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.

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

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