Softwares Interativos

Apresentação em tema: "Softwares Interativos"— 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

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

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

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
Learnability (facilidade de aprendizado) Flexibility (flexibilidade) Robustness (robustez)

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)

11 1. Learnability (facilidade de aprendizado)
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

12 1. Learnability (facilidade de aprendizado)
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!

13 2. Flexibility (Flexibilidade)
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)

14 2. Flexibility (Flexibilidade)
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)

15 2. Flexibility (Flexibilidade)
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)

16 3. Robustness (robustez)
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

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

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

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 Sucesso de uma Interface

32 Sucesso de uma Interface

33 Sucesso de uma Interface

34 Sucesso de uma Interface

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 Questionário
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ê X O Controle Remoto da Garagem

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 Membros da equipe trabalhando para gerar os protótipos em papel
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 Usuários testando o protótipo de uma página web
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 Protótipo em papel - abas manipulado por um membro da equipe
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 o protótipo em papel de um dispositivo móvel Usuários testando a fidelidade de uma homepage do protótipo em papel

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 .

58 Mitos “Não vou obter informações suficientes de um método que é tão simples e tão barato” 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.

59 Mitos “Devemos esperar até que tenhamos uma melhor interface de usuário antes de mostrar aos clientes“ 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.

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

65 Web Evolução Web Web 2.0 Web 3.0

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

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 404

68 CheckList Usabilidade
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

69 CheckList Usabilidade
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

70 CheckList Usabilidade
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 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. Fonte:

72 Exemplos de Interface

73

74

75

76 Site Promocional

77 Exemplos ruins

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

79

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

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: Bengala Legal -