A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar.

Apresentações semelhantes


Apresentação em tema: "Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar."— Transcrição da apresentação:

1 Softwares Interativos Lílian Simão Oliveira

2 Usabilidade??? • Vídeo – Lifted - Pixar

3 User-Centered Design = UCD • Projeto centrado no usuário • Análise dos objetivos e das tarefas do usuários • Criar opções de projetos • Avaliar opções • Implementar protótipo • Testar • Refinar • Implementar produto 3

4 Conhecer o usuário • Habilidades ou necessidades especiais: físicas e cognitivas • Cultura • Conhecimentos • Motivações 4

5 Erros Fatais • Assumir que todos os usuários são iguais • Assumir que os usuários são como o projetista 5

6 Princípios de Norman • Modelo conceitual • Visibilidade • Mapeamento • Restrição • Feedback • Affordances - quanto potencial a forma de um objeto tem para que ele seja manipulado da maneira que pensado para funcionar. • Errar é humano • Projeto centrado no usuário

7 Princípios e Metas da Usabilidade (adaptado de PREECE et al., 2005)

8

9 Princípios de Usabilidade 1.Learnability (facilidade de aprendizado) 2.Flexibility (flexibilidade) 3.Robustness (robustez) 9

10 1. Learnability (facilidade de aprendizado) • 1a. Predictability - Previsibilidade (facilidade de prever o resultado da interação) • 1b. Synthesizability - (facilidade de inferir como a interação funciona depois de utilizar um pouco) • 1c. Familiarity - (familiaridade) • 1d. Generalizability - (facilidade de generalizar o mecanismo geral de interação depois de utilizar um pouco) • 1e. Consistency - (consistência) 10

11 • 1a. Predictability (facilidade de predizer o resultado da interação com base no passado) – antes de interagir, apenas observando, o usuário já sabe o que vai acontecer como resultado de uma interação – Pode inferir o que e possível fazer • 1b. Synthesizability (facilidade de avaliar o efeito das ações passadas no estado atual) – O usuário consegue formar um modelo mental do comportamento do sistema, e consegue concluir como a interação ocorre depois de utilizar um pouco o sistema e perceber os resultados de ações passadas – Forma um modelo mental da operação que permite avaliar o efeito de ações passadas no estado atual do sistema Learnability (facilidade de aprendizado)

12 • 1c. Familiarity (familiaridade) – O usuário entende a interação porque ela e parecida com outras as quais ele esta acostumado a usar em outros sistemas ou no mundo real • 1d. Generalizability (facilidade de generalizar o resultado da interação) – O usuário consegue aplicar soluções semelhantes em varias situacoes ou sistemas que sao semelhantes de alguma forma • 1e. Consistency (consistência) – O quanto o comportamento e similar em situação similares – O mais importante dos princípios da categoria de facilidade de aprendizado; os demais dependem deste! Learnability (facilidade de aprendizado)

13 • 2a. Dialog Initiative - (iniciativa do dialogo) • 2b. Multi-threading - (suporte a multiplas tarefas/dialogos) • 2c. Task Migratability - (transferencia de controle entre sistema e usuario para execucao de tarefas) • 2d. Substitutivity - (formas alternativas de entrar/exibir informacao) • 2e. Customizability - (capacidade de adaptacao da interface) Flexibility (Flexibilidade)

14 • 2a. Dialog Initiative (iniciativa do dialogo) – Dependendo da situação, o usuário ou o sistema inicia a interação – Preferencia do usuário deve ser maximizada, do sistema minimizada • 2b. Multi-threading – O usuário deve poder fazer varias coisas ao mesmo tempo; – múltiplos diálogos em andamento – Ex : multimodalidade: usar vários canais de comunicação • 2c. Task migratability (migração do controle de tarefas) – Possibilidade de transferir o controle de uma tarefa entre sistema e usuário e vice-versa – ex: correção ortográfica (ser humano pode fazer, mas software pode ajudar) Flexibility (Flexibilidade)

15 • 2d. Substitutivity – uma ação (entrada ou saída) pode ser realizada de mais de um modo – mostrar resultado de vários modos diferentes • 2e. Customizability (personalização) – o usuário deve poder personalizar a interação (e a interface) de acordo com suas necessidades ou preferencias – Adaptabilidade x adaptatividade gerenciada pelo usuário x pelo sistema (automática) Flexibility (Flexibilidade)

16 • 3a. Observability – Capacidade que o usuário tem de avaliar o estado interno do sistema a partir da representação perceptível da interface • 3b. Recoverability – Habilidade do usuário realizar uma ação corretiva uma vez que tenha percebido que um erro aconteceu • 3c. Responsiveness – Como o usuário percebe o taxa de comunicação com o sistema, tempo necessário para perceber mudanças de estado no sistema em resposta a ações • 3d. Task conformance – O quanto os serviços do sistema suportam todas as tarefas que o usuário precisa realizar, da maneira que o usuário espera Robustness (robustez)

17 Usabilidade x Custo • Em 1994, Deborah Mayhew e Randolph Bias lançaram o livro Cost- Justifying Usability, mostrando que envolver usuários desde o início de um projeto gera uma economia de 20% em relação àqueles que só envolvem o usuário depois que tudo está quase pronto.Cost- Justifying Usability • Isso acontece porque, pegando o feedback durante o processo, os redesenhos acontecem ainda nas fases preliminares. É muito mais rápido – e, portanto, barato – mexer em um wireframe do que em um HTML pronto. Qualquer idéia que esteja ainda no papel é mais fácil de ser modificada do que após o produto executado. 17

18 ISO 9241 • Usability:the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments – Effectiveness: the accuracy and completeness with which specified users can achieve specified goals in particular environments – Efficiency: The resources expended in relation to the accuracy and completeness of goals achieved – Satisfaction: The comfort and acceptability of the work system to its users and other people affected by its use 18

19 Protótipo de Papel • Protótipo de Papel

20 Protótipo • baixa definição • média definição • alta definição

21 Pensando em voz alta (Think Aloud) • Usuário verbaliza o que está pensando enquanto usa o sistema • Expectativa é que os pensamentos mostrem como o usuário interpreta cada item da interface • Inadequada quando o objetivo é obter medidas de desempenho • Usuários tendem a ficar mais lentos e cometer mais erros • Requer experimentador bem-preparado • Estimular o usuário a falar • Não interferir no uso do sistema • Vantagem: mostra o que o usuário está fazendo e porque está fazendo, enquanto está fazendo • Boa estratégia: usuários trabalhando aos pares • Outra alternativa: pedir que os usuários comentem depois suas ações gravadas em vídeo

22 Técnica do Mágico de OZ

23 Vantagens de Uso • Custo • Rapidez no desenvolvimento • Fácil feedback do usuário

24 Softwares • Alguns softwares que podem auxiliar no desenvolvimento dos protótipos.

25 Balsamiq balsamiq.com

26 Axure balsamiq.com

27 WireframeSketcher

28 Google SketchUP

29 Sucesso de uma Interface • Um interface só é bem sucedida se ela der o suporte adequado aos objetivos e ao comportamento do usuário real. • Conhecer o usuário é fundamental. Buscando saber o que o usuário pensa, o que quer e como age, aplicando técnicas de pesquisa como grupos de foco ou testes de usabilidade.

30 Sucesso de uma Interface

31 S UCESSO DE UMA I NTERFACE

32

33

34

35 Sucesso de uma Interface • O processo de projeto de interação consta dos seguintes passos: – Elicitação e Análise, – Modelagem de Tarefas, – Modelagem de Interação, – Prototipação.

36 Elicitação e Análise • Faz o levantamento e análise de: – Usuários: “Nenhum estilo de interface serve para todos os tipos de usuário”. – Ambiente de trabalho dos usuários: • Conhecimento e experiência no seu trabalho • Suas características psicológicas e físicas • Suas preferências e expectativas – Tarefas dos Usuários.

37 Elicitação e Análise • Técnicas mais utilizadas: – Entrevista • Tem acesso ao local de trabalho? • Melhor usar entrevistas individuais? – Questionário • Utilizado quando existe um grupo de usuários muito grande.

38 Modelagem de Tarefas “Compreende os pensamentos do usuário em seu trabalho para projetar uma aplicação que o apóie nestas tarefas” • Qual é a sequência de ações que o usuário precisa executar? – Caminho simples através de um único passo para completar a tarefa.

39 Modelagem de Tarefas • Técnicas mais utilizadas: – Entrevistas, reuniões e observação direta – Questionamento sobre cenários (CARROLL et al., 1994) – Análise das tarefas (ANNET E DUNCAN, 1967; PREECE et al., 1994)

40 Modelagem de Interação • Aproveitar os objetos utilizados no mundo real para que seja de fácil percepção do usuário. – Ex: Lixeira, Calendário, etc. “Interação é o processo de comunicação entre pessoas e sistemas interativos.” (PREECE et al., 1994)

41 Prototipação • Um protótipo de software consiste em uma versão limitada do sistema, realmente implementada, com a qual os usuários podem interagir. • Tem como objetivo esclarecer: – Funcionalidades, – Sequências de operação, – Necessidades de apoio aos usuários, – Aparência da interface.

42 A Situação (TURINE, 2002) Você O Controle Remoto da Garagem X

43 Esquema de Situação (antes)

44 Esquema de Situação (depois)

45 O que contribuiu para a situação? • Falha de projeto: – Não é possível identificar os botões rapidamente, através do tato ou contato visual breve. • Pressa para acionar o botão, que pode ser causada por diversas razões: – Estar atrapalhando o trânsito – Medo de assaltos – Nervosismo – Ansiedade

46 Como evitar e sobreviver ao erro. • Diferenciar botões: – Cores (botão verde / vermelho) – Formas (botão triangular / redondo) – Textos (Entrada / Saída) – Teclas iluminadas • Desenho do controle: – Formato diferenciado – Botões distanciados

47 Prototipação em papel - Conceito • Pode ser considerado como um método de brainstorming, designing, criação, teste e comunicação de interfaces de usuário. • Prototipação em papel é uma variação de teste de usabilidade onde usuários representativos realizam uma tarefa real pré-definida, por meio da interação com a versão em papel da interface, que é manipulada por uma pessoa que finge ser o próprio computador, e não explica como a interface é destinada ao trabalho.

48 Como se trabalha? • Reunião com os membros da equipe de produto para definir o tipo de usuário que representa a maior parte dos usuários para aquelas interfaces. • Determinam-se algumas tarefas típicas que se espera que o usuário faça com apoio do sistema a ser projetado. Membros da equipe trabalhando para gerar os protótipos em papel

49 Como se trabalha? • Faz-se captura de telas e/ou versões de esboço a mão de todas as janelas, menus, caixas de diálogo, páginas, dados, mensagens pop-up, e assim sucessivamente até que se reúna o necessário para permitir ao usuário desempenhar as funções da tarefa. Protótipo em papel de formulários típicos para ingressar texto

50 Como se trabalha? • Pode-se esboçar usando a lousa digital, ou pode fazer o protótipo em papel. O protótipo em papel de um esboço a mão de uma tela da página Web ChocoArt.

51 Como se trabalha? • Depois de criar o protótipo, se tem que fazer um teste de usabilidade: – Trazer a uma pessoa representativa da audiência, você e os membros de seu equipe. Laboratório de usabilidade preparando uma sessão de teste com prototipação em papel

52 Como se trabalha? – Falar ao usuário que tente realizar a tarefa mediante interação direta com o protótipo, fazendo “click” por meio de tocar os botões do protótipo o links, e “type” por meio de escrever a data certa no protótipo. Usuários testando o protótipo de uma página web

53 Como se trabalha? – Um ou dois dos membros de equipe tem que cumprir o papel de “computador”, manipulando as peças de papel para simular como a interface se comporta, mas sem explicar qual é o propósito do trabalho. Protótipo em papel - abas manipulado por um membro da equipe

54 Como se trabalha? – O facilitador (usualmente alguém treinado em usabilidade) dirige a sessão enquanto os demais membros da equipe atuam como observadores. Usuários testando a fidelidade de uma homepage do protótipo em papel Usuários testando o protótipo em papel de um dispositivo móvel

55 Vantagens As vantagens de fazer um protótipo em papel são:  Lápis e papel é barato e não requer especialista ou programador  Você pode rapidamente descobrir qual parte da interface trabalha bem e quais dão problemas.  Como o protótipo é tudo em papel, você pode facilmente fazer modificações imediatamente depois - ou algumas vezes durante - cada teste de usabilidade.  Podem ser realizados vários testes de usabilidade em um ou dois dias, e não há demora para receber o feedback do usuário.  O protótipo em papel permite refinar e melhorar o design muito rápido baseado em entradas reais do usuário, e pode acontecer antes de escrever a primeira linha de código da interface.

56 Benefícios • Benefícios da prototipação em papel – Os benefícios de considerar a usabilidade no começo do projeto são pelo menos dez vezes superiores a considerar depois do projeto. Estudos de realizar o teste de usabilidade depois de um projeto freqüentemente acrescentam cerca de 100% de benefício no valor final do projeto, mas considerar a usabilidade desde o início de um projeto pode beneficiar em 1.000% ou mais o seu valor. – Provê um feedback do usuário consistente com tempo no processo de desenvolvimento, antes de investir esforço na implementação. – Promove desenvolvimento iterativo rápido. Pode se experimentar diferentes idéias antes de apostar em uma.

57 Benefícios • Benefícios da prototipação em papel – Facilita a comunicação dentro do equipe de desenvolvimento e entre os equipes de desenvolvimento e os clientes. – Inspira criatividade no processo de desenvolvimento do produto. – Não requer nenhuma habilidade técnica, assim a equipe multidisciplinar pode trabalhar junto, pois todos dominam essa ferramenta desde criança. 57

58 Mitos • Falso. A prototipação em papel é uma das técnicas mais rápidas e mais baratas que você pode empregar em um processo de concepção. Permite determinar problemas de usabilidade antes de gastar dinheiro implementando algo que não é o trabalho desejado. “Não vou obter informações suficientes de um método que é tão simples e tão barato”

59 Mitos • Falso. Se você espera, pode ser tarde demais para desenvolver todas as interfaces e ir modificando- as de acordo com o feedback do usuário sobre o design. “Devemos esperar até que tenhamos uma melhor interface de usuário antes de mostrar aos clientes“ 59

60 Exemplos de Prototipação em Papel • Home

61 Exemplos de Prototipação em Papel • Busca Avançada

62 Exemplos de Prototipação em Papel • Cadastro de Pessoa Física

63 Exemplos de Prototipação em Papel • Central de Atendimento

64 Exemplos de Prototipação em Papel • Compras 64

65 Web 65 Web 2.0 Web 3.0 Evolução Web

66 Um bom projeto • NÃO é apenas aplicar diretrizes e checklists – Eles ajudam, mas projeto centrado no usuário (UCD) é mais que isso: é uma filosofia • NÃO é usar o projetista como usuário modelo – É necessário conhecer os usuários reais – É necessário conhecer as variações entre diferentes seres humanos • NÃO é apenas senso comum – Saber como projetar um alarme de incêndio garantindo que ele será ouvido sobre quaisquer outros sons ambientes é algo que nem todos sabem fazer – Um especialista em fatores humanos sabe aonde ou como obter as informações necessárias para responder a questões de projeto 66

67 CheckList Usabilidade A lista abaixo é o básico que pode (e deve) ser usado em qualquer análise heurística. Existem várias listas similares, no entanto essa lista do Dr. Peter Meyers serve a qualquer propósito. Acessibilidade • Tempo de abertura do site é razoável • Contraste entre texto e fundo é adequado • Tamanho de fonte / espaçamento facilita a leitura • Flash e add-ons são usados moderadamente • Imagens possuem ALT tags • Site tem uma página de Erro

68 Identidade • Logo do site está bem posicionado • Tagline da empresa é clara • Propósito do site é entendido em 5 segundos • Acesso rápido a informação da empresa • Acesso rápido a contato com a empresa 68 CheckList Usabilidade

69 Navegação • Navegação principal é facilmente identificável • Itens de navegação são claros e concisos • Quantidade de botões e links é razoável • Logo do site é linkado à página inicial • Links são consistentes e fáceis de serem identificados • Caixa de busca é de fácil acesso 69 CheckList Usabilidade

70 Conteúdo • Títulos são claros e descritivos • Conteúdo crítico está acima da dobra • Estilos e cores são consistentes • Ênfase (bold, etc) é usado de forma moderada e adequada • Anúncios e pop-ups são não obstrutivos • Texto é conciso e explicativo • URLs são amigáveis • Títulos HTML são explicativos 70 CheckList Usabilidade Fonte:

71 RobotReplay • Serviço gratuito que permite gravar a interação dos usuários no seu site para assistir depois • O serviço funciona da seguinte maneira: depois de criar sua conta e adicionar o script do RobotReplay no seu site, ele grava TODOS os movimentos do mouse, incluindo os cliques, e permite você os ver em ação. Depois você poderá assistir literalmente a navegação dos usuários dentro do seu site com um cursor animado fazendo exatamente todos os movimentos que o usuário fez. É possível vê-lo navegando pelas páginas, clicando em trechos do site, o scroll da página etc.RobotReplay 71 Fonte: testes-de-usabilidade-com-usuarios-reais-e-de-graca/

72 Exemplos de Interface 72

73 73

74 74

75 75

76 76 Site Promocional

77 Exemplos ruins 77

78 Exemplos ruins 78 Cliente: “Eu quero um site simples, sem muita frescura…quero que destaque meus produtos. Todos eles.”

79 79

80 80

81 Dicas para desenvolvimento Web • Cuidado com músicas em site • Contraste é importante, mas lembre-se que tem que ser agradável • Imagem é melhor que mil palavras, mas uma boa imagem! • Ícones com legenda é interessante • Teste em todos os browsers!! • Defina bem seu público • Navegação intuitiva, mas não deixe de ter mapa do site • Busca eficiente 81

82 Acessibilidade • Vídeo

83 Acessibilidade • Acessibilidade envolve fazer compensações para características que uma pessoa não pode mudar facilmente. (Joe Clark - • Mais em: de-acessibilidade/ de-acessibilidade/ • Bengala Legal - 83


Carregar ppt "Softwares Interativos Lílian Simão Oliveira. Usabilidade??? • Vídeo – Lifted - Pixar."

Apresentações semelhantes


Anúncios Google