parte ii usabilidade, interatividade e comunicabilidade na ...jair/diuweb/ws2002farn2.pdf · –...

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


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?


Usabilidade em Sistemas Web

2 TXH ID]HU"&RPR XVDU"


Problemas de Usabilidade – exemplo 1

4XHUR OLYURVVREUH /HLWH�(X QmR VRX GHSHUGHU WHPSR�9RX ID]HU XPD

SHVTXLVDUiSLGD�

XVXiULR


Problemas de Usabilidade – exemplo 22 TXH

VLJQLILFD HVWHUHVXOWDGR"(UD R TXH HX

TXHULD"

XVXiULR

?


Problemas de Usabilidade – exemplo 3

XVXiULR

2 TXHVLJQLILFD HVWHUHVXOWDGR"(UD R TXH HX

TXHULD"


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?


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!


Exemplo de problema de funcionamento

z Usuário fez uma busca sobre “Patins”


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


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


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


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


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


Informa ções do domínio: Exemplos

Categorias

Dados

Notícias


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


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


Funções da aplica ção: Exemplo

z O usuário quer comprar passagem, mas o sistema da VASP não oferece esta função


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


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?


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


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


Comandos de fun ção: Exemplo

z Comando de busca


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


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


Intera ções básicas: Exemplos

Acionar

Visualizar

Digitar informação

EscolherInformação


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


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


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.


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


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?


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

?


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


Signos em Interfaces Web

Widgets

Símbolos(Marcas)

Símbolos (índice)

Figuras

Texto

Cores


Mensagens interativas – exemplo (1)

XVXiULR

4XHUR ID]HU

XPD UHVHUYD

GH SDVVDJHP

DpUHD



(X TXHUR ID]HU

XPD FRQVXOWD

H DLQGD QmR

WHQKR UHVHUYD�

9RX HVFROKHU D

VHJXQGD



2 TXH p LVWR"

2QGH HVWmR

DV RSo}HV GH

Y{R"



e HVWH R Y{R

TXH HX TXHUR�

&RPR GHYR

HVFROKHU"

,K� 0DV HVWi

/27$'2�


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


Informa ções do domínio: Comunicabilidade

z Diversas técnicas de Visualização da Informação podem ser empregadas


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


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


Comandos de fun ção: Comunicabilidade 2


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


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


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


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


Resultados de intera ção: Comunicabilidade 1

Mensagem boa

Mensagem ruim



z Deixando o usuário ciente do que está acontecendo



z Resposta a uma senha digitada incorreta: o usuário não entende o vocabulário


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

parte ii usabilidade, interatividade e comunicabilidade na ...jair/diuweb/ws2002farn2.pdf · –...

Documents