Este documento fornece informações sobre métodos de usabilidade que podem ser aplicados em projetos web. Em três frases ou menos:
O documento discute como a aplicação de métodos de usabilidade como testes de usabilidade e inspeções heurísticas podem melhorar a experiência do usuário e trazer benefícios para projetos web, como maior satisfação do usuário e vendas, menor custo de desenvolvimento e demanda de suporte. É apresentado um exemplo de tarefa de teste de usabilidade para localizar o site de um jornal online e suspender a assinatura durante
1. Copyright Sirius Interativa - 2007 - Todos direitos reservados
Sirius interativa
Aplicação de métodos de usabilidade
em projetos web
2. Quais são os
componentes de uma
experiência interativa
bem sucedida ?
2
Copyright Sirius Interativa - 2008 - Todos direitos reservados
3. Uma experiência efetiva reflete uma
adequada combinação de ingredientes
de acordo com o contexto, conteúdo e
públicos-alvo do projeto
3
Copyright Sirius Interativa - 2008 - Todos direitos reservados
4. Atributos de um projeto interativo
A construção do conteúdo deve refletir necessidades reais de
seus usuários. Deve-se buscar o equilíbrio entre a estratégia do
site e a sua utilidade para o público-alvo
Útil
Projetos usáveis melhoram a
eficácia (achar o que procura), O Design gráfico encanta, reflete os
eficiência (tempo necessário para Usável Desejável valores da marca. os requisitos do
achar o que procura) e satisfação projeto e cria um ambiente confortável
dos usuários e seguro de interação
Valioso
Uma arquitetura de informação A acessibilidade é uma exigência de
consistente, flexível e evolutiva Achável Acessível lei, que deve fazer parte de uma
potencializa a taxa de conversão do estratégia para alcance universal e
projeto e sua meia-vida multi-dispositivo do projeto
Crível
Todos os elementos da interface reforçam ou enfraquecem
credibilidade de projetos web
4
Copyright Sirius Interativa - 2008 - Todos direitos reservados Modelo de User experience proposto por Peter Morville
5. Atributos de um projeto interativo
Projetos desequilibrados – atributos ausentes
Projetos equilibrados – todos atributos presentes com
pesos contextualizados ao projeto
5
Copyright Sirius Interativa - 2008 - Todos direitos reservados
6. Desejável
x
Usável
6
Copyright Sirius Interativa - 2008 - Todos direitos reservados
7. Ambiente visual
O design reflete os atributos e requerimentos
do projeto, agrega credibilidade a marca, gera
conforto ao usuário, potencializa a relação do site
com seu usuário, ajuda a estabelecer senso de
receptividade e pertencimento e é fundamental
para criar um ambiente navegacional consistente e
claro.
7
Copyright Sirius Interativa - 2008 - Todos direitos reservados
8. Ambiente visual
50 ms
"O resultado indica que a estética, ou apelo visual, é um
fator que pode influenciar o julgamento [posterior] da
sua experiência" - (Lindgaard 2006)
Em um estudo realizado, se mostrou que a exibição por apenas 50 milisegundos de telas de
website permite que os usuários emitam um juízo de valor quase instantâneo sobre um projeto
8
Copyright Sirius Interativa - 2008 - Todos direitos reservados
9. Ambiente visual
Decisões são emocionais.
Depois, nós criamos
justificativas racionais. 9
Copyright Sirius Interativa - 2008 - Todos direitos reservados
11. Acessibilidade
Para atingir os
objetivos do projeto
tem que ser
Acessível
11
Copyright Sirius Interativa - 2008 - Todos direitos reservados
12. Acessibilidade
Mundo
650 milhões
Brasil
24,5 milhões
12
Copyright Sirius Interativa - 2008 - Todos direitos reservados
13. Acessibilidade
Benefícios para o projeto
• Reforça a credibilidade
• Aumenta a audiência
• Reflete cuidado com a responsabilidade social
• Atende a requisitos legais
• Melhora o retorno em engenhos de busca
• Maior compatibilidade com outros dispositivos
• Diminui o esforço de manutenção
• Melhora a usabilidade
• Melhora a performance
13
Copyright Sirius Interativa - 2008 - Todos direitos reservados
14. Acessibilidade
Acessibilidade
Alguns exemplos
14
Copyright Sirius Interativa - 2008 - Todos direitos reservados
15. Acessibilidade
1.1 Fornecer um equivalente em texto para cada
elemento não textual
Imagens
Vídeos
Animações flash
15
Copyright Sirius Interativa - 2008 - Todos direitos reservados
16. Acessibilidade
2.1 Assegurar que todas as informações veiculadas
com cor estejam também disponíveis sem cor
Neste exemplo do lado esquerdo vemos que o modelo de
clique é comunicado pela cor azul. No lado direito vemos que
o acesso por um usuário com deficiência de cor não poderá
identificar os pontos de clique
16
Copyright Sirius Interativa - 2008 - Todos direitos reservados
17. Acessibilidade
2.1 Assegurar que todas as informações veiculadas
com cor estejam também disponíveis sem cor
Percepção normal de cores Deficiência de cor: verde
Verde Verde
Vermelho Verde Amarelo citro Vermelho Verde Amarelo citro
Verde Verde Marrom Verde Verde Marrom
escuro marrom escuro escuro escuro marrom escuro escuro
Azul Azul
Azul Violeta celeste Rosa Azul Violeta celeste Rosa
Quando se comunica informações através de cores, se incorre no
risco de que usuários com deficiência de cor percam esta informação
17
Copyright Sirius Interativa - 2008 - Todos direitos reservados
18. Acessibilidade
14.1 Utilizar a linguagem mais simples e clara possível,
logicamente, apropriada para um dado conteúdo
Analfabeto 7%
30%
Alfabetizado Nível Rudimentar
Alfabetizado Nível Básico 38%
Alfabetizado Nível Pleno 26%
Segundo o estudo INAF (Indicador Nacional de Alfabetismo Funcional)
apenas 26% dos Brasileiros tem nível pleno de alfabetização. Logo, os textos
de um projeto web devem ser criados levando esta realidade em conta
18
Copyright Sirius Interativa - 2008 - Todos direitos reservados
19. Acessibilidade
2.2 Garantir que a combinação de cores ofereça um
bom contraste entre o texto e o fundo
Neste exemplo, um site direcionado ao conjunto da população Brasileira
oferece uma razão de contraste abaixo do ideal o que pode comprometer a
experiência de navegação de parte dos usuários
19
Copyright Sirius Interativa - 2008 - Todos direitos reservados
20. Acessibilidade
9.4
Criar uma seqüência lógica de
tabulação para percorrer
links, controles de
formulários e objetos
Para um usuário que utiliza um software de leitura de tela, chegar a um dos links
internos da página o obriga a passar por todo o longo menu lateral (quando a
navegação for feita pela sequência de cliques disponível.
20
Copyright Sirius Interativa - 2008 - Todos direitos reservados
21. Acessibilidade
13.1
Identificar
claramente o
destino de um link
O uso de “Veja mais” perde o contexto quando lido através de
um leitor de tela. Os links devem ter um texto relevante que
reflita o seu destino.
21
Copyright Sirius Interativa - 2008 - Todos direitos reservados
23. “Usabilidade é a extensão na qual usuários
pertencentes a um determinado público-alvo
atinjam objetivos específicos com efetividade,
eficiência e satisfação em um contexto de
uso particular ”
ISO 9241-11
23
Copyright Sirius Interativa - 2008 - Todos direitos reservados
24. Usabilidade
Benefícios para o projeto
Maiores vendas e Satisfação do consumidor – A aplicação de
metodologia de Usabilidade aumenta a satisfação do usuário em 40%
(Gartner Group).
24
Copyright Sirius Interativa - 2008 - Todos direitos reservados
25. Usabilidade
Benefícios para o projeto
Menor custo de desenvolvimento e manutenção – A aplicação de
técnicas de usabilidade reduziu o tempo de desenvolvimento em 40%
(Bosert, J. L -1991)
25
Copyright Sirius Interativa - 2008 - Todos direitos reservados
26. Usabilidade
Benefícios para o projeto
Maior produtividade e eficiência operacional – Uma companhia
reportou uma redução de 25% em erros de usuários depois de cuidados
com a usabilidade (Cost-Justifying Usability)
26
Copyright Sirius Interativa - 2008 - Todos direitos reservados
27. Usabilidade
Benefícios para o projeto
Menor demanda de suporte – Um recurso do Word que gerava longos
atendimentos de suporte (45 min.) foi drasticamente reduzido após
um estudo de usabilidade (Cost-Justifying Usability).
27
Copyright Sirius Interativa - 2008 - Todos direitos reservados
28. Usabilidade
A disciplina de Human Factors iniciou durante a guerra
no século XX para melhorar a usabilidade de aviões...
“Se não podia ser usada, os objetivos militares não
podiam ser alcançados” 28
Copyright Sirius Interativa - 2008 - Todos direitos reservados
29. Usabilidade
...e no século XXI a usabilidade de quase tudo desde produtos até
websites. Mas nem sempre é aplicada seja em carros...(o exemplo
abaixo apresenta um dispositivo de controle de um carro que que exige grande perícia
do usuário)
• 28 de 30 usuários desistiram de ligar o carro;
• Comprador potencial precisa de 20 minutos de treinamento;
• O campeão de corridas Geoff Brabham conseguiu mover o carro
para frente...
• ...mas não para trás
29
Copyright Sirius Interativa - 2008 - Todos direitos reservados
30. Usabilidade
...seja em impressos de votação. (o exemplo abaixo mostra o
cartão de voto onde muitos usuários que pretendiam votar no candidato democrata Al
Gore acabaram votando no conservador Pat Buchanan por conta da disposição do
impresso)
30
Copyright Sirius Interativa - 2008 - Todos direitos reservados
31. Usabilidade
Em projetos web, temos um conjunto de metodologias para
avaliar a usabilidade onde se busca...
...levantar informações demográficas, comportamentais e
aspiracionais dos usuários e identificar boas práticas do
segmento em que atua.
31
Copyright Sirius Interativa - 2008 - Todos direitos reservados
32. Usabilidade
As metodologias podem ser aplicadas em várias fases do
projeto (exemplos de alguns métodos e as etapas de um projeto onde podem ser
aplicadas)
Exploração
Evolução
Interação
experiência
Desenho da
Implementação
Transferência
Publicação
MA DI DG
Teste de Usabilidade
Questionário on-line
Análise Comparativa de Usabilidade
Expert review
Análise Contextual
Avaliação de acessibilidade
Card Sorting
Inspeção heurística
Entrevistas Estruturadas 32
Copyright Sirius Interativa - 2008 - Todos direitos reservados
33. Usabilidade
Teste
de usabilidade
Obs: este é um teste piloto feito para propósitos de demonstração.
O teste de Usabilidade é um método qualitativo que envolve a
entrevista individual com um número de usuários pertencentes ao
público-alvo do projeto que realizam tarefas específicas com o
objetivo de identificar pontos de melhoria. Por ser uma análise
qualitativa, o número necessário de usuários pode ser relativamente
reduzido (entre 6 e 8 usuários por perfil). As atividades são
acompanhadas por um moderador e registradas digitalmente.
33
Copyright Sirius Interativa - 2008 - Todos direitos reservados
34. Usabilidade
Etapas
1. Entendimento do projeto;
2. Definição do escopo de teste;
3. Plano de teste: objetivo, roteiro de teste, questionário pré
e pós teste, tarefas;
4. Teste piloto;
5. Recrutamento de participantes;
6. Condução dos testes;
7. Compilação e análise de dados;
8. Relatório final.
34
Copyright Sirius Interativa - 2008 - Todos direitos reservados
35. Usabilidade
Exemplo de tarefa: localizar o site
Cenário
Você não recebeu seu exemplar do jornal XYZ hoje e decidiu
fazer uma reclamação utilizando a Internet. Gostaria que você
localizasse o site do jornal XYZ
Perfis de Participantes: Todos
Duração da tarefa: Máximo de 2 minutos
Critérios de avaliação: Tempo para encontrar o acesso ao
website, Quantos participantes localizaram o website, índice
de desistência.
35
Copyright Sirius Interativa - 2008 - Todos direitos reservados
36. Usabilidade
Exemplo de tarefa: localizar o site
Recomendações para condução do teste: Deve-se deixar o
computador com o Internet Explorer aberto numa página
neutra, branca (configurando o IE com a opção branca), deixar
um exemplar do jornal XYZ ao lado
O que observar: O assinante acha facilmente a opção de
Suspensão de Entrega? Como reage em relação às restrições
do serviço?
Procedimentos esperados: No espaço do assinante localizar o
serviço de Suspensão de Entrega, Preencher dados, Confirmar
dados, Enviar dados.
36
Copyright Sirius Interativa - 2008 - Todos direitos reservados
37. Usabilidade
Exemplo de tarefa: Suspensão assinatura
Cenário
Você passará 1 mês viajando e gostaria de interromper a
entrega do jornal XYZ durante esse período. Verifique se é
possível fazer isso no espaço do Assinante, e, em caso positivo,
faça esta alteração
Perfis de Participantes: Todos
Duração da tarefa: 10 minutos
Critérios de avaliação: Tempo para encontrar o recurso de
Suspensão de Entrega, Quantos assinantes fizeram a suspensão
da assinatura, índice de desistência
37
Copyright Sirius Interativa - 2008 - Todos direitos reservados
38. Usabilidade
1 2
O laboratório móvel tem na sala 1 o
moderador e o participante. Na sala
2 os clientes podem observar cada
movimento de tela e acompanhar as
feições e observações dos usuários.
Obs: este é um teste piloto feito para propósitos de
demonstração. Não é um teste de cliente da Sirius.
O usuário autorizou esta exibição neste
apresentação.
38
Copyright Sirius Interativa - 2008 - Todos direitos reservados
39. Usabilidade
Expert
review
INT EXP DES IMP TRA PUB EVO
Profissionais de Usabilidade julgam o
sistema interativo de acordo com um
conjunto de boas práticas
estabelecidas e segundo facetas do
sistema interativo como: sistema de
informação, titulação, busca,
navegação, design, acessibilidade e
arquitetura de conteúdo. O relatório
lista os pontos de melhoria
identificados e faz recomendações de
correção
39
Copyright Sirius Interativa - 2008 - Todos direitos reservados
40. Usabilidade
Etapas
1. Entendimento do projeto;
2. Definição do escopo de teste;
3. Plano de teste: critérios e procedimento de avaliação ;
4. Avaliação (2 a 3 analistas);
5. Compilação e avaliação qualitativa dos pontos de melhoria;
6. Relatório final.
40
Copyright Sirius Interativa - 2008 - Todos direitos reservados
41. Usabilidade
Card
Sorting
Card-sorting é uma técnica utilizada para levantar como as pessoas agrupam os
conteúdos de um projeto de uma forma que melhor reflita suas necessidades e
modelo mental. Pode ser realizada antes ou depois do processo de arquitetura
de informação do projeto.
Atividade 1 Atividade 2 Atividade 3
Comunicação COMUNICAÇÃO NEGÓCIOS A EMPRESA
“informações associadas a Arquivo de
produtos Missão
imagens
Cadastro
campanhas e notícias” Notícias
Assessoria fornecedor
Compras Relatório
Imprensa on-line Social
Livre associação Card-Sorting Validação de fluxo
41
Copyright Sirius Interativa - 2008 - Todos direitos reservados
42. Usabilidade
Etapas
1. Entendimento do projeto;
2. Definição do escopo de teste;
3. Plano de teste;
4. Teste piloto;
5. Recrutamento de participantes;
6. Condução dos testes;
7. Compilação e análise de dados;
8. Relatório final.
42
Copyright Sirius Interativa - 2008 - Todos direitos reservados
43. Usabilidade
Análise
Comparativa de usabilidade
O Mapeamento de projetos que tenham um posicionamento web similar,
através de um conjunto de critérios que compõe um sistema de interação,
permite que sejam levantadas de forma sistemática suas melhores práticas e
que sejam identificados conteúdos e recursos que possam ser incorporados ao
projeto.
43
Copyright Sirius Interativa - 2008 - Todos direitos reservados
44. Usabilidade
Exemplo de página de um relatório
44
Copyright Sirius Interativa - 2008 - Todos direitos reservados
45. Usabilidade
Exemplo de página de um relatório
45
Copyright Sirius Interativa - 2008 - Todos direitos reservados
Em 2000, havia 1 bilhão de páginas indexadas pelo Google. Em Agosto de 2005 são 8.5 bilhões;
Em 2000, havia 1 bilhão de páginas indexadas pelo Google. Em Agosto de 2005 são 8.5 bilhões;
Quais os elementos que compoem uma experiência bem sucedida?
Senso de receptividade : o design explora a cultura do país, estado ou município em questão, reconectando o cidadão ou visitante a geografia e cultura do país/estado/município. Senso de pertencimento : o design estabelece uma identidade de grupo por símbolos visuais, gráficos e de comunicação escrita para criar um ambiente confortável para cada grupo de usuários (mulheres, idosos, jovens, crianças, empreendedores, índios, artistas, etc.).
7 critérios sobre uma página são validados ao apresenta-los por 50 milisegundos. As percepções iniciais tendem a ser confirmadas posteriormente por conta do que pode ser descrito como efeito halo que é um tipo de viés de cofirmação.
Porque alguém compra um i-pod? O que diferencia um -pod
Site da Receita Hoje. Ganha sempre prêmios, mas é um site com graves problemas de usabilidade com uso de linguagem técnica no texto e nomenclatura e recursos de suporte ao usuário pouco práticos
Site da Receita Hoje. Ganha sempre prêmios, mas é um site com graves problemas de usabilidade com uso de linguagem técnica no texto e nomenclatura e recursos de suporte ao usuário pouco práticos
The alt attribute should typically : Be accurate and equivalent in presenting the same content and function as presented by the image. Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. NOT be redundant or provide the exact same information as text within the context of the image. NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text.
Verificação manual da página por elementos de navegação e informações que possam ser comunicadas por cor. Elementos de navegação devem visualmente diferir dos outros elementos mesmo em preto e branco. Verificar gráficos que possam ter legenda baseada em cor. Not everyone can easily perceive differences in colour and they would find it difficult to understand information which is communicated by colour alone. For example, imagine two buttons on a screen, both are identical in terms of size and shape. One is green, the other red. Clicking the red button will destroy the user's computer. If the user can't distinguish between the colours and there are no labels on the buttons, they can't make the correct choice.
Verificação manual da página por elementos de navegação e informações que possam ser comunicadas por cor. Elementos de navegação devem visualmente diferir dos outros elementos mesmo em preto e branco. Verificar gráficos que possam ter legenda baseada em cor. Not everyone can easily perceive differences in colour and they would find it difficult to understand information which is communicated by colour alone. For example, imagine two buttons on a screen, both are identical in terms of size and shape. One is green, the other red. Clicking the red button will destroy the user's computer. If the user can't distinguish between the colours and there are no labels on the buttons, they can't make the correct choice.
The purpose of this guideline is to prompt the web author to create text which is readable by everyone. Tanto pessoas com nível de aprendizado baixo quanto pessoas com deficiências cognitivas. O ìndice Nacional de Alfabetismo Funcional do Governo Federal em 2005 mostra que apenas 26% da população tem nível pleno (sendo que no Sudeste este nível fica em 30%). Os níveis estabelecidos são: Analfabeto: não consegue realizar tarefas simples que envolvem decodificação de palavras e frases; Nível 1 - Alfabetismo nível rudimentar: corresponde à capacidade de localizar informações explícitas em textos muito curtos Por exemplo, identificar o título de uma revista ou, em um anúncio. Nível 2 - Alfabetismo nível básico: corresponde à capacidade de localizar informações em textos curtos (por exemplo, em uma carta reclamando de um defeito em uma geladeira comprada, identificar o defeito apresentado; localizar informações em textos de extensão média); e Nível 3 - Alfabetismo nível pleno: corresponde à capacidade de ler textos longos, orientando-se por subtítulos, localizando mais de uma informação, de acordo com condições estabelecidas, relacionando partes de um texto, comparando dois textos, realizando inferências e sínteses. Importante também notar que em vários países se estabelece um nível de leitura associado com nível escolar (na Irlanda este seria o quinto nível)
Validação automática de imagens através do Contrast analyser pelo algorítmo de luminosidade para projetos convencionais. Validação manual através de visualização da página em preto e branco através de barra de acessibilidade do Firefox e IE Porquê Not everyone can easily distinguish between close colour combinations and tones. Some users find it difficult to read content, recognise objects or select items from a list when the item and the background are similar in tone, even if the colours are different. This particularly affects older users or those who have some form of colour-blindness. Colour schemes which achieve clear differentiation in all three attributes provide the greatest contrast. Peoples' perception of the contrast of colour is bound up in their ability to perceive any or all of the three attributes, and this varies greatly. You should never assume that if you can clearly perceive a colour combination as being a good contrast then others will too.
Valiação Validação manual pelo uso do atributo <tabindex> e pelo uso de navegação via teclado. Porquê Many users rely on the keyboard as their primary device for navigating and interacting with websites. Many laptop and notebook users, screen reader users and users with limited dexterity favour keyboard navigation. Internet kiosks don't always provide the user with a mouse. If a user fills in an online form where the logical tabbing order is incorrectly defined, they could easily submit the form without filling in all the required fields because the cursor jumps to the &quot;submit&quot; button before they are finished. Failing to provide a logical tab order is highly confusing and makes the task of navigating and using websites very difficult, especially for users of screen readers who may fail to notice that the cursor is not following the correct order.
Valiação Validação manual das seguintes situações: a página destino de um link, se o link leva para outro site, se o link abre uma nova janela, se o link solicita arquivos e se remete uma informação a um banco de dado. O link deve ser preciso e relevante com relação ao destino da ação. Deve-se evitar o uso de um mesmo link para dois destinos diferentes. Porquê Clear link titles are helpful for screen reader users, who will often review the list of links on a page before investing the time to read through the content in detail. This is the equivalent of visually scanning a page to get an overview of what it contains and what options are available. Because the list of link titles are read out of context, it's important to provide link titles that do not require the user to read the surrounding information. For example, &quot;click here&quot; and &quot;more&quot; mean nothing when read out of context.
Wesley Woodson in 1981 as &quot;the practice of designing products so that users can perform required use, operation, service and supportive tasks with a minimum of stress and maximum of efficiency.&quot;
Conceito vem da disciplina de Human Factors (ergonomia) Métodos começaram surgir na segundas guerra para tornar as armas de guerra mais efetivas: Foco em performance, problemas no reconhecimento e apresentação de informações, controles, disposição dos elementos e nível de habilidades requeridas
O Idrive da BMW com mais de 700 funções através de um único controle. O comprador efetivo precisa de uma hora de treinamento. Um teste em estacionamentos com guardador: 10 entre 10 não conseguiram. O que aconteceu, como se deixou chegar a esta situação em que se compromete um projeto por conta de falta de validação com o usuário final?
Estes profissionais fazem parte da empresa porque estes conhecimentos fazem parte do nosso processo de trabalho. Isso é muito importante, pois uma das principais barreiras que vemos em outros modelos que é que acaba havendo muito ruído de comunicação na hora de comunicar as recomendações de uma análise de usabilidade para uma equipe de projeto que não tem a compreensão da importância deste conhecimento para o sucesso de suas atividades – seja de design, seja de porgramação
Os métodos de design centrados no usuário devem estar integrados ao processo o que minimiza ruídos, ajuda na disseminação do conhecimento, facilita a comunicação dos resultados e potencializa soluções consistentes, adequadas e efetivas
A gente sempre realiza esta atividade em um laboratório montado com duas salas e sempre gravamos para análise posterior não apenas da gente, mas também do cliente
