Fundamentos de Design Web

Transcrição

1 Fundamentos de Design Web Usabilidade, Interatividade e Comunicabilidade na Web Dimensões do sistema &RQFHLWXDO )XQFLRQDO,QWHUDomR &RPXQLFDomR Conceitual Modelo conceitual da aplicação. Funcional Funções que o sistema oferece ao usuário Interação Forma como o usuário interage com o sistema Comunicação Comunicação do modelo conceitual para o usuário! "

2 Aspectos da Usabilidade Usabilidade = Funcionalidade+Interatividade+Comunicabilidade Funcionalidade O que o usuário pode faer. O sistema oferece o que os usuários precisam? Todas as tarefas podem ser realiadas? Interatividade Como o usuário pode faer É fácil faer? (tempo para realiar, número de erros) É fácil aprender? (tempo para entender, memoriação) Comunicabilidade Como o sistemas comunica o que o usuário pode faer e como ele pode faer. É 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 design Design Conceitual Modelo conceitual do sistemas: idéias, conceitos, relacionamento Design Funcional Funções do sistema Design da Interação (diálogo) Entrada de dados e comandos Respostas do sistema Design da Comunicação (apresentação) Representação escolha dos elementos que melhor comuniquem conceitos, relacionamentos, funções, comandos, resultados ações. Layout de telas organia os elementos de interface em telas Arquitetura da Interface organiação de páginas, telas ou janelas

3 Interatividade Possibilidades de interação que o sistema oferece ao usuário Estilos de interação Linguagens de Comandos, Menus, Manipulação direta, Preenchimento de formulário, Hipertexto Aspectos de Usabilidade Desempenho e Produtividade Número de erros Aprendiado e Memoriaçã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

4 Problemas de interatividade exemplo 2 Problemas: Usuário acha que é um menu. Usuário não sabe se deve clicar ou não Áreas de clicar muito pequena Comunicabilidade Qualidade da comunicação designer-usuário 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

5 Comunicabilidade Eficácia da comunicação designer-usuário O designer deve informar ao usuário: O que faer Como faer Problema de Comunicabilidade! #"%$'&( *)(+-,.0/ #5 6#7 8:9;0< =#>@?=#>A='B09DC(EGFHE I(J%KLJDI(MANPO:JDQHRTS#M.U VXWLYDZ'[-\ ]0^#\ _\ `Ta%Z[ bz c Z[-Y#d bae(f#g h c a%f*w0ydz'z(y%w0ydz c \ a(g? ilj#ilkll mn O designer precisa comunicar o modelo de de interação para para o usuário

6 Falta de comunicação! #"%$'&' #"%$ (*),+.-%/1032 Modelo teórico para a interação Engenharia Cognitiva [Donald Norman, 1986] ['YIR \ Y ]M^ _#`MaVbdcZe#fVg execução especificação da seqüência de ações formulação da intenção Comece por aqui h ikjl*m.n%o1p%q percepção interpretação avaliação F'GIH J G KML > A B>C: D E : ;<=> :?>

7 Exemplo do processo de interação execução ß>àšá âvãåähã àæhã ç è]élêvë ìélíjélî%ï ðòñ ó]ñ ôõåöhõ] QøQùJõåú ñ ûülõ øj 'ý öhõ] QøQùJõåú ñ ûülõvþÿ 5!6#7 especificação da seqüência ² ³ µv! %³J ³H¹ º de»h¼j½ ações!¹% ¾Q¼»H J! J³ À ÁJÂHÃ%Ä%ÅVÆ#ÇQÇJÈ ÉšÊLÅJÊ Ä%ËÌ}ËJÃ#ÍJÅHÍJËVà Î]ÏHÐQÐJÏXÑÐJÒJÓHÔÕ formulação da / :2;<5 intenção = 0>@? 2 A B.52?+5 > C 0 0D?&8 96EF G&0DC 8 H 2? = 5<C 0? F?IB.8;<5! " # $&%' ()*+), -.) Ö ]ØÙAÚšÛ>ÜHÝ>Þ DFEHGJILKHM%KJNONPQG RHS TVUXWYJZ UQ[%S]\ ^V_J`a bvcedhb]fqghc h percepção ifj#kjlhkjmvj ljnjolphj%pjq rlhkjmvj s%tuulvhw xhtyhjvj{} ~JH % % Qƒ]H Q J- L ˆ interpretação! #" $% '&)(+*-,/. " VŠH %Œ]Š ŽL J H š Q Vœ% VžHŸ ] žqž Q ] žj V O J Jª ««J L «Q % ] % J± avaliação Princípios do Norman 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 realiar Modelo conceitual A aplicação deve ter um modelo conceitual consistente com a imagem do sistema Mapeamento As variáveis psicológicas devem ser mapeadas em variáveis físicas Feedback O usuário deve receber um feedback contínuo do sistema []\^ _`+acb de JLK MMNPO.QR SUTWVYXR Z6X

8 Distância Semântica e Articulatória 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 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 Exemplo de distância semântica Tarefa: Tirar a conta-corrente do vermelho 1. Verificar qual o meu débito na conta-corrente 2. Verificar se eu tenho dinheiro em contas de investimentos 3. Faer a transferência entre as contas, * -.*/& 0 1! " " # $% & '()* & +*

9 Exemplo de distância articulatória 1. Verificar qual o meu débito na conta-corrente 1. Selecionar comando de extrato 1. Clicar Menu Consultar 2. Clicar Opção extrato 2. Comandar função de extrato 1. 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 senha 1. Clicar nos seis numeros 2. Confirmar A abordagem da Engenharia Semiótica 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 faer) e a interatividade (como o usuário pode interagir) [de Soua, 1993]. Mensagem Design Interação Designer Sistema Usuário

10 Design com interatividade e comunicabilidade Escolher os elementos de interfaces mais adequados para: o usuário utiliar melhor o sistema comunicar melhor o que faer e como utiliar o sistema Elementos da Interface?=@BADC7E"F?=G;H=I@ ;:=<;> ')("*+-,./("0! "!# $ % & Elementos de interfaces Web É o repertório do designer: 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, voes,... Páginas, Quadros (frames), Tabelas, Caixas Espaço vaio Possibilitam......a interação usuário-sistema...a comunicação designer-usuário Em quais situações eles devem ser empregados? V T W XTYP Z [ J K L L M NO P QRST P UT

11 Elementos de Interfaces Web Figuras Menus Botões Links Texto Símbolos (Marcas) Design com mais comunicabilidade Designer envia para o usuário uma mensagem interativa e unidirecional O designer deve informar e orientar o que o usuário deve faer Comunicabilidade qualidade da comunicação com o usuário iajpk#lomhnpo k#q rhkojsmht8utrun v?w#xy{4 }{p~hv H {ƒ w : # vh v8ˆ # ŠŒ < OŽP < # a : O P H J H ŽPŠŒ :9<;=?>#@ A#;B 9 CED?FDHGCJI KD8L:MONPDHG QJRHSOTPU QEVHWYX Z [<\:W ]^<_a`bpchd ecofhg (*)#+,.- /0)#1 "!#"$ % & '

12 Interação com mais comunicabilidade P KQJ'F+?AB >1C?RSJ'@ B AOEGF M-?'@ T5C)F E5C K5>K5UGF B C #%$'&)(+*-,'.0/1,'2 3' '8'95:<;)=57 >1?'@?AB C)D5EGFH)I'?'JC)B > B D5A@ KGB F? L B D5EG@ M-?'DN? AOC)D5A@ KGB F! " Modelo Conceitual Ao interagir com qualquer sistema, uma pessoa possui um modelo conceitual do que o sistema é, o que ele fa, quais os seus componentes e propriedades, como interagir, etc. O modelo conceitual di respeito a elementos abstratos conceitos e não a elementos de interface ou código fonte. 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. Um modelo simples, claro, compreensível, coerente e consistente é fundamental para a usabilidade. b ` c d`e \ f g V W X X Y Z[ \ ]^_` \ a`

13 Representando o modelo conceitual Categorias de informações do domínio Informações procuradas Informações complementares Representando Informações: exemplos

14 Diretries para representar conceitos Use o vocabulário do usuário Categorie as informações adequadamente Evite deixar as informações desatualiadas Use técnicas de layout e estruturação para organiar as informações Textos longos devem ser escritos por pessoas que saibam escrever bem Design com comunicabilidade 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 Ajuste a mensagem ao meio De acordo com tamanho e resolução da tela, p.ex. Utilie a linguagem das interfaces Janelas, menus, botões, caixas, rolagem,... Arquivo, Editar, Exibir,... Ajuda Padrões de layout na Web Cabeçalho, menu, corpo,...

15 Elementos de interfaces para interação Acionar Visualiar Digitar informação Escolher Informação Falta de consistência na interação Problemas: Botão tem como significado preferencial ativar comandos Link deve ser usado para navegação Link usado para função Botão usado para navegação

16 Problema de comunicação de funcionalidade Exemplo de uma função mal comunicada Interpretação do usuário Compra para que já tem reserva Compra para quem ainda não tem reserva Significado real Compra de bilhete para uma data específica Compra de bilhete sem data específica tarifa total Nova proposta da TAM. Melhorou? Por que?

17 Nova proposta da Varig. Ainda tem problemas... Diretries para interação Naturalidade: Organie a seqüência de interações da maneira mais natural para o usuário Flexibilidade: Permita alternativas de interações para um mesmo comando Não-modal: Permita ao usuário consultar outras informações durante o comando e depois retornar ao ponto onde estava Perdão: permita ao usuário corrigir ou voltar atrás Unidade: Procure colocar os comandos em um única janela. Se tiver mais de um comando na mesma janela, construa grupos separados

18 Diretries para interação Escolha o objeto de interação adequado para a ação que o usuário deve faer Objeto adequado é aquele com o qual o usuário está familiariado Use rotulação para comunicar a ação que o usuário deve faer 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 um formulário

19 Resultados de interação: exemplo 2 Deixando o usuário ciente do que está acontecendo Comunicabilidade em resultados de interação Mensagem ruim Mensagem boa

20 Problemas em resultados de interação Resposta a uma senha digitada incorreta: o usuário não entende o vocabulário Diretries para resultados Use o vocabulário do domínio do usuário. Evite termos técnicos. Resultados devem faer referências às informações passadas no comando. Advertências e avisos deve ser colocados em primeiro plano para chamar a atenção do usuário. Cores fortes e diferenciadas de outros elementos chamam atenção. Sons também podem ser utiliados. Os resultados de função devem ser destacados de outros elementos da página (banners, menus,...).

21 Princípios Norman revistos pela Eng. Semiótica Mensagem do designer para o usuário Visibilidade e Affordance Tudo na interface deve comunicar ao usuário o que faer e como faer. Feedback A resposta fa parte da mensagem 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