parte ii usabilidade, interatividade e comunicabilidade na ...jair/diuweb/ws2002farn2.pdf · –...
TRANSCRIPT
Parte II
Usabilidade, Interatividade e Comunicabilidade na Web
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Roteiro
z Usabilidade– Conceitos– Problemas
z Interatividade– Modelo teórico– Técnicas e diretrizes
z Comunicabilidade– Modelo teórico– Técnicas e diretrizes
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Usabilidade
z Qualidade que avalia a utilização de um sistema– O que fazer?– Como fazer?
z Facilidade de Uso– O usuário comete poucos erros durante a interação?
z Facilidade de Aprendizado– O usuário aprende rápido?– O usuário memoriza o que aprendeu?
z Produtividade– O usuário faz suas tarefas com rapidez?
z Flexibilidade– A interface oferece alternativas de interação?
z Satisfação– O usuário gosta de utilizar o sistema?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Usabilidade em Sistemas Web
2 TXH ID]HU"&RPR XVDU"
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Problemas de Usabilidade – exemplo 1
4XHUR OLYURVVREUH /HLWH�(X QmR VRX GHSHUGHU WHPSR�9RX ID]HU XPD
SHVTXLVDUiSLGD�
XVXiULR
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Problemas de Usabilidade – exemplo 22 TXH
VLJQLILFD HVWHUHVXOWDGR"(UD R TXH HX
TXHULD"
XVXiULR
?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Problemas de Usabilidade – exemplo 3
XVXiULR
2 TXHVLJQLILFD HVWHUHVXOWDGR"(UD R TXH HX
TXHULD"
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Exemplos de problemas de usabilidade
z O sistema tem a informação ou serviço que eu preciso?
z Onde posso encontrar a informação ou o serviço?z Como posso solicitar este serviço? Quais
informações devo fornecer?z Qual foi o resultado? Era o que eu queria?z Para que serve este elemento?z O que significa esta figura?z Para onde “leva” este link?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Outros problemas que afetam a Usabilidade
z Desempenho– A página demora a carregar!– O servidor não responde em tempo.– A página demora a ser exibida!
z Portabilidade– Não é exibido corretamente neste browser!– A linguagem script não funciona neste browser ou
servidor.
z Funcionamento– Eu mandei os dados, mas o sistema processou errado!
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Exemplo de problema de funcionamento
z Usuário fez uma busca sobre “Patins”
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Como resolver os problemas de usabilidade?
z Uso de modelos teóricos de IHCz Princípios, métodos e técnicas de design centrado
no usuárioz Técnicas de interação adequadas às tarefas e aos
usuáriosz Tecnologias de interface apropriadasz Métodos e técnicas de avaliação da usabilidade
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Engenharia Cognitiva
z Modelo de Norman [Norman, 1986]
*ROIR GH $YDOLDomR
*ROIR GH ([HFXomR
formulação da intenção
especificação da seqüência de ações
execução
avaliaçãointerpretaçãopercepção
LQWHUDomR
Comecepor aqui
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Exemplo do processo de intera ção
*ROIR GH $YDOLDomR
*ROIR GH ([HFXomR
formulação da intenção
especificação da seqüência de açõesexecução
avaliaçãointerpretaçãopercepção
$SDUHFHX XPDQRYD WHOD FRPYiULRV QRPHV�
2V GDGRVDSUHVHQWDGRVFRUUHVSRQGHPj EXVFD TXH HX
IL]"
(QFRQWUHL DVLQIRUPDo}HV
TXH HX TXHULD"&RPSOHWHL DWDUHID FRPVXFHVVR"
'HYR VHOHFLRQDUR FRPDQGR GH³EXVFD´ H HQWUDUFRP RV GDGRVTXH HX WHQKR�
LQWHUDomR
$WLYR ERWmR³3URFXUDU´�'LJLWR QRPH GR OLYURHP ³QRPH GR OLYUR´�6HOHFLRQR ³(QYLDU´
Comecepor aqui
4XHURFRPSUDUXP OLYURVREUH /HLWH
9RX ID]HU XPDFRQVXOWD XVDQGRR VHUYLoR GHEXVFD GRVLVWHPD
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Design da Intera ção na Engenharia Cognitiva
z Principais elementos da Interação – Informa ção do domínio
zRepresentações de objetos do domínio
– Funções da aplica çãozModificam os objetivos do domínio
– Comandos de fun çãozComandam as funções
– Intera ções BásicaszAções que formam um comando
– Resultados de intera çãozRespostas do sistema
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Informa ções do domínio: Conceito
z Conjunto de informações típicas de um domínio de aplicação que são processadas pelo sistema
z As informações do domínio pode ser:– Informações textuais estáticas, armazenadas em
páginas HTML– Informações geradas dinamicamente – Dados relacionais armazenados em bancos de dados
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Informa ções do domínio: Exemplos
Categorias
Dados
Notícias
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Informa ções do domínio: Diretrizes
z Use o vocabulário do usuárioz Categorize as informações adequadamentez Textos longos devem ser escritos por pessoas que
saibam escrever bemz Dados devem ser modelados com técnicas de
projetos de bancos de dadosz Evite deixar as informações desatualizadasz Se as informações são dinâmicas – notícias,
cotações, etc. – permita a recuperação futura.z Use técnicas de layout e estruturação para
organizar as informações
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Funções da aplica ção: Conceito
z Determina quais são as funções da aplicação necessárias para as tarefas
z Cada função determina um caso de usoz Opera sobre informaçõesz Uma função pode ser usada em mais de uma
tarefaz Uma tarefa pode precisar de mais de uma função
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Funções da aplica ção: Exemplo
z O usuário quer comprar passagem, mas o sistema da VASP não oferece esta função
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Funções da aplica ção são casos de uso
z Casos de Uso– Um caso de uso é uma
descrição de uma seqüência de eventos que ocorre quando um ator (agente externo) usa um sistema para realizar uma tarefa [Jacobson 92]
z Estrutura– “Nome do caso de uso”
– Atores
– Fluxo de eventos
– Pré-condições – Pós-condições
Cliente
Funcionário
Procurar livro
Colocar na sacola
Cancelar pedido
Cadastrar livros
Atualizar preços
Calcular Postagem
Sistema de vendas remotas
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Funções da aplica ção: Usabilidade
z Para diferentes tarefas, identifique o esforço de planejamento entre a meta do usuário e a função que o sistema oferece – distância semântica[Hutchins, Holland & Norman, 1986]
z Faça medições sobre o número de funções necessárias para cada tarefa
z Verifique se a função retorna resultados adequados para o usuário
z A função é flexível? Pode ser personalizada para casos específicos?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Funções da aplica ção: Diretrizes
z As funções da aplicação devem ser derivadas do modelo de tarefas
z Identifique no modelo de tarefas quais sub-tarefas são mais comuns a várias tarefas. Elas provavelmente serão funções da aplicação
z As informações do domínio são dinâmicas? Identifique quais funções modificam as informações
z O sistema armazena informações? Especifique funções para criar, ler, atualizar ou eliminar estas informações
z Se a função não modifica um estado funcional do sistema, então ela não é uma função da aplicação
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Conceito
z Um comando de função corresponde a um conjunto de interações básicas necessárias para controlar uma função da aplicação
z Exemplos:– Fornecer os dados em qualquer ordem– Clique em enviar apenas após fornecer os dados– Combinação de menus
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Exemplo
z Comando de busca
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Usabilidade
z Verifique o número de erros durante as interações de um comando
z Verifique se o usuário fornece todas as informações necessárias para o comando
z Verifique se o número de interações básicas é excessivo
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Conceito
z Definem atividades básicas que o usuário realiza com os elementos de interface– Clicar em botões ou links– Visualizar ou ler uma informação– Digitar dados– Escolher informação
z As interações básicas são utilizadas em comandos de função ou para navegação
z Um comando é composto por interações básicas
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Exemplos
Acionar
Visualizar
Digitar informação
EscolherInformação
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Problemas de Usabilidade em Intera ções básicas
z Um menu se sobrepõe ao outro
z O usuário precisa clicar exatamente na seta dourada
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Usabilidade
z O usuário tem dificuldade em clicar na área de um link ou widget? Teste o número de erros e acerto
z O usuário precisa alternar muito entre digitação e teclado?
z Verifique se o tipo e o tamanho do widget está adequado à informação que o usuário deve fornecer
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Conceito
z Resultados de interação são as respostas que o sistema envia sobre comandos e interações básica.
z Podem ser resultados de processamento de informações do domínio
z Podem ser mensagens de erros, advertências, confirmações, etc.
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de Intera ção: Exemplos
z Resultado de uma busca: listagem de produtosz Aviso informando que um produto procurado não
foi encontradoz Aviso informando que o usuário não preencheu
todos os campo e um formulário
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Usabilidade
z Existe feedback para todas as ações do usuário?z O usuário percebe cada resultado?z A mensagem de erro permite ao usuário voltar ao
ponto para corrigir?z Existem mensagens de aviso para os dados que o
sistema não pode processar?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Problemas de Comunica ção
1RPH GR DXWRU RXWtWXOR"
(QYLDU SDUD RQGH VH
HX TXHUR EXVFDU"2 TXH VLJQLILFD HVWH
UHVXOWDGR"
(UD R TXH HX TXHULD"
XVXiULR
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
?
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Engenharia Semiótica
z Sistemas Computacionais são artefatos de metacomunicação [de Souza, 1993]
z Designer envia para o usuário uma mensagem interativa e unidirecionalz Semiótica: disciplina que estuda os signos e os processo de significação,
codificação e comunicação
XVXiULRGHVLJQHU
(VWH IRUPXOiULR
PH SHUPLWH ID]HU
D EXVFD GR OLYUR
SRU ³/HLWH´�
8VDQGR FDL[DV GH WH[WR
H XP ERWmR GH
³SURFXUDU´ HOH YDL
FRQVHJXLU ID]HU D EXVFD
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Signos em Interfaces Web
Widgets
Símbolos(Marcas)
Símbolos (índice)
Figuras
Texto
Cores
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Mensagens interativas – exemplo (1)
XVXiULR
4XHUR ID]HU
XPD UHVHUYD
GH SDVVDJHP
DpUHD
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Mensagens interativas – exemplo (2)
(X TXHUR ID]HU
XPD FRQVXOWD
H DLQGD QmR
WHQKR UHVHUYD�
9RX HVFROKHU D
VHJXQGD
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Mensagens interativas – exemplo (3)
2 TXH p LVWR"
2QGH HVWmR
DV RSo}HV GH
Y{R"
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Mensagens interativas – exemplo (4)
e HVWH R Y{R
TXH HX TXHUR�
&RPR GHYR
HVFROKHU"
,K� 0DV HVWi
/27$'2�
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comunicabilidade
z O designer precisa comunicar ao usuário qual a sua solução para as necessidades dos usuários
z Quais signos escolher? Quais códigos?z A comunicabilidade visa avaliar este processo
metacomunicativoz [Prates, de Souza e Barbosa, 2000]
desenvolveram um método para avaliação da comunicabilidade
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Informa ções do domínio: Comunicabilidade
z Diversas técnicas de Visualização da Informação podem ser empregadas
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Função da aplica ção: Comunicabilidade
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
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Comunicabilidade 1
z O layout da página ajuda ao usuário entender a seqüência de ações
z Agrupamento, alinhamento, balanceamento, repetição, contraste e subordinação são técnicas de diagramação que orientam o usuário
Ruim Boa
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Comunicabilidade 2
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Comandos de fun ção: Diretrizes
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
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Comunicabilidade 1
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
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Comunicabilidade 2
z Problemas:
z Botão tem como significado preferencial ativar comandos
z Link deve ser usado para navegação
Botão usado para navegação
Link usado para função
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Intera ções básicas: Diretrizes
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
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Comunicabilidade 1
Mensagem boa
Mensagem ruim
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Comunicabilidade 2
z Deixando o usuário ciente do que está acontecendo
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Comunicabilidade 3
z Resposta a uma senha digitada incorreta: o usuário não entende o vocabulário
� ���� -DLU & /HLWH'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE
Resultados de intera ção: Diretrizes
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,...).