Seminário GVcev Varejo Virtual e Multicanal

Transcrição

1 Seminário GVcev Varejo Virtual e Multicanal Usabilidade em Ambientes Virtuais Simone Bacellar Leal Ferreira - simone@uniriotec.br UNIRIO

2 Características de uma Boa Interface com o Usuário Simone Bacellar Leal Ferreira - simone@uniriotec.br UNIRIO

3 Usabilidade Característica que determina se o manuseio de um produto é fácil e rapidamente aprendido dificilmente esquecido não provoca erros operacionais oferece um alto grau de satisfação para seus usuários eficientemente resolve as tarefas para as quais ele foi projetado..

4 Usabilidade Continuação Importância da usabilidade Para Sistemas Web

5 Usabilidade Continuação Usabilidade X Estética

6 Requisitos de um Sistema Funcionais: descrevem o que o sistema faz Não Funcionais: dizem respeito à qualidade do sistema Requisitos de Usabilidade

7 Taxonomia de Usabilidade Taxonomia baseada nos Requisitos Não Funcionais de Usabilidade (RNF ) Entrada de Dados Exibição de Informação

8 Requisitos Relacionados à Exibição da Informação Consistência Feedback Percepção Humana Metáforas Minimização de Carga de Memória Níveis de Habilidade e Comportamento Humano Classificação Funcional dos Comandos Manipulação direta Exibição apenas da informação relevante ao contexto Uso de Rótulos, abreviações Uso Adequado de Janelas Projeto independente da resolução do monitor

9 Requisitos Relacionados à Entrada de Dados Mecanismos de Ajuda Prevenção de Erros Tratamento de Erros

10 Requisitos Relacionados à Exibição de Informação

11 Consistência Vantagens Reduz frustação causada por comportamentos inesperados. Permite generalização de um aspecto do sistema para outros.

12 Consistência A interface deve apresentae sempre da mesma forma X X X

13 Consistência Continuação Algumas Diretrizes 1. Manter a mesma apresentação visual e comportamento

14 Consistência Continuação 2. Utilizar sempre a mesma codificação

15 Consistência Continuação 3. Padronizar o uso de letras maiúsculas e minúsculas 4. As metáforas devem ser sempre consistentes 5. Não usar um mesmo ícone para representar coisas distintas

16 Consistência Continuação 6. Não usar ícones diferentes para a mesma função 7. Exibir mensagens sempre na mesma posição lógica 8. Posicionar itens de menu sempre na mesma posição relativa 9. Disponibilizar comandos globais durante todo tempo Exemplo: Help e Sair

17 Consistência Continuação 10. Dispor os mesmos itens na mesma ordem

18 Consistência Continuação 11.Usar combinação de cores de forma adequada Identidade Visual

19 Consistência Continuação 12. Não usar diferentes nomes para um mesmo assunto Ajuda Ao Vivo Atendimento On-Line

20 Consistência Continuação 13. Evitar comportamentos inesperados Busca por Artista Busca por Autor

21 Consistência Continuação 13. Evitar comportamentos inesperados (continuação)

22 Consistência Continuação 14. Não omitir algumas características em partes do site

23 Consistência Continuação 14. Não omitir algumas características em partes do site (continuação)

24 Consistência Continuação 15. Não usar Frames inconstantemente Frames (A) (B)

25 Consistência Continuação Inconsistências podem ser desejáveis. Deve-se usar o bom senso!

26 Feedback Deve-se sempre usar bons Feedbacks Boas Práticas de Feedbacks

27 Feedback Continuação Algumas Falhas de Feedbacks Solução

28 Níveis de Habilidade e Comportamento Humano

29 Níveis de Habilidade e Comportamento Humano Continuação Fatores que devem ser considerados 1. Diferenças de habilidades computacionais dos usuários Usuários principiantes: menus, formulários e prompts Usuários experientes: aceleradores (combinações de teclas) 2. Tipo de formação dos usuários 3. Meio social dos usuários 4. Variações de personalidades

30 Níveis de Habilidade e Comportamento Humano Continuação Uso de Recursos Visuais facilita atender diferentes níveis Uso de fotografias Uso de ícones

31 Níveis de Habilidade e Comportamento Humano Continuação Projeto de Ícones Reconhecimento Recordação Discriminação

32 Níveis de Habilidade e Comportamento Humano Problemas com alguns ícones Continuação Já são usados em outras aplicações para: Sair da aplicação Desfazer (Undo)

33 Percepção Humana Deve-se ter uma atenção com fatores que afetam a facilidade com a qual a informação é percebida: tamanho do texto, tipo de fonte, comprimento de uma linha, uso de letras maiúsculas/minúsculas, localização e cor Uma boa interface deve possibilitar alteração do tamanho de fontes (via browser)

34 Uso de Heurísticas Consistentes A maioria das pessoas, diante de um problema, aplica uma série de heurísticas (diretrizes, regras e estratégias) baseadas na compreensão de situações do mundo real.uma boa interface deve permitir que seu usuário interaja com ela através de heurísticas consistentes

35 Metáforas Deve-se usar metáforas de modo a se aproveitar o conhecimento que o usuário possui a respeito do mundo que o cerca. Exemplos de Bom Uso de Metáfora

36 Metáforas Continuação Exemplo de uso inapropriado de metáfora Só o faxineiro limpa um carrinho Proposta Esvaziar Carrinho

37 Minimização de carga de Memória As IUs devem reduzir ao máximo o esforço necessário pelo usuário para memorizar seus aspectos. Sempre que possível, deve permitir a manipulação de ícones. Os signos (ícones, comandos textuais etc.) devem ser bem produzidos; não devem induzir dúvidas e devem expressar bem seus objetivos.

38 Eficiência no Diálogo, Movimento e Pensamento As combinações de teclas devem ser minimizadas. Exemplo: Cortar [Ctrl] [X] Copiar [Ctrl] [V] Exceção: Ctrl Alt Del Deve ser evitado que o usuário encontre uma situação em que ele fique em dúvida sobre o significado de alguma coisa

39 Classificação Funcional dos Comandos Regra de Miller: estabelecida por George A. Miller no livro The Psychological Review determina o valor de sete, mais ou menos dois itens como o número máximo de opções em um menu que as pessoas conseguem lidar Em um menu não usar mais do que 7 ± 2 itens. Itens de menus devem ser organizados de acordo com sua função; menus pull-down devem ser usados pois otimizam essa tarefa

40 Manipualação Direta A manipulação direta dá às pessoas a sensação de que estão controlando os objetos representados no computador. O objeto manipulado deve permanecer visível enquanto sobre ele estiver sendo realizada uma operação e o efeito dessa operação deve ser imediatamente notado Objeto Clicado Destacado

41 Exibição apenas da Informação Relevante ao Contexto

42 Uso de Rótulos, abreviações Devem ser usados rótulos consistentes, abreviações padronizadas e cores predizíveis. Não se deve alterar o significado de itens já padronizados. Itens novos não devem ser representados por signos arbitrários; pelo contrário, devem ser cuidadosamente escolhidos de modo que seus significados sejam claros

43 Uso de Mensagens As mensagens geradas devem ser claras e objetivas. Se forem mensagens de erro, nunca devem fazer com que o usuário se sinta culpado. Exemplo de mensagem ruim: Erro fatal! O Sistema vai ser abortado.

44 Uso de Janelas Se possível, devem ser utilizadas janelas distintas para mostrar informações de diferentes tipos. O espaço da tela deve ser utilizado de modo eficiente. A informação deve ser exibida em telas que sejam mais facilmente assimiladas com a forma de representação. Por exemplo, para representar a temperatura o impacto seria maior se fosse exibido um termômetro A combinação de cores deve ser cuidadosamente escolhida

45 Projeto Independente do Monitor Os elementos da interface são projetados com uma largura de tamanho fixo, determinada por um número de pixels; deve-se defini-los através de percentagens do espaço disponível. Itens não aparecem

46 Requisitos Relacionados à Entrada de Dados

47 Mecanismos de Ajuda Fornecer um help para toda ação de entrada

48 Mecanismos de Ajuda Continuação Indicar campos cujo preenchimento é obrigatório

49 Prevenção de Erros Desabilitar itens que não podem ser selecionados e inibir comandos não válidos em determinado contexto.

50 Prevenção de Erros Continuação Quando o n o. de caracteres a ser entrado for limitado, indicar ao usuário antes dele digitar

51 Prevenção de Erros Continuação Minimizar o número de ações necessárias para entrada de dados O sexo deve ser escolhido de uma lista de opções (listboxs). Preencher automaticamente um endereço eletrônico já antes digitado. Como o site submarino (.br) foi projetado para residentes no Brasil, o default deve ser definido Brasil, uma vez que a grande maioria das pessoas que acessam esse site residem no Brasil.

52 Tratamento de Erros 1. Erro sintático 2. Erro funcional