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

Softwares Interativos

Lílian Simão Oliveira

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

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

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

9

Princípios de Usabilidade

1. Learnability (facilidade de aprendizado)

2. Flexibility (flexibilidade)

3. Robustness (robustez)

10


• 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

• 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

• 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

• 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)

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


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)


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

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

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

http://www.amazon.com/gp/product/0120958104/104-7821680-2375115?v=glance&n=283155



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

Protótipo de Papel

• Protótipo de Papel

Protótipo

• baixa definição

• média definição

• alta definição

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

Técnica do Mágico de OZ

Vantagens de Uso

• Custo

• Rapidez no desenvolvimento

• Fácil feedback do usuário

Softwares

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

Balsamiq

balsamiq.com

Axure

balsamiq.com

WireframeSketcher

http://wireframesketcher.com

Google SketchUP

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.

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.

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.

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.

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.

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)

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)

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.

A Situação (TURINE, 2002)

Você

O Controle Remoto da Garagem

X

Esquema de Situação (antes)

Esquema de Situação (depois)

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

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

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.

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

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

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.

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

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

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

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

Vantagens

As vantagens de fazer um protótipo em papel são:Lápis e papel é barato e não requer especialista ou programadorVocê 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.

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.

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

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”

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

Exemplos de Prototipação em Papel

• Home


• Busca Avançada


• Cadastro de Pessoa Física


• Central de Atendimento


• Compras

64

65

Web

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

67

CheckList UsabilidadeA 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

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

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


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


Fonte: http://www.usereffect.com/topic/25-point-website-usability-checklist

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: http://revolucao.etc.br/archives/robotreplay-testes-de-usabilidade-com-usuarios-reais-e-de-graca/

http://www.robotreplay.com/

72

Exemplos de Interface

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

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

Acessibilidade

• Vídeo

83

Acessibilidade

• Acessibilidade envolve fazer compensações para características que uma pessoa não pode mudar facilmente. (Joe Clark - http://joeclark.org/)

• Mais em: http://revolucao.etc.br/archives/vamos-falar-de-acessibilidade/

• Bengala Legal - http://www.bengalalegal.com/

http://revolucao.etc.br/archives/vamos-falar-de-acessibilidade/



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

Documents

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