Métodos de usabilidade em projetos web

  • 5,179 views
Uploaded on

Apresentação rápida de alguns dos métodos de usabilidade que podem ser aplicados em projetos digitais.

Apresentação rápida de alguns dos métodos de usabilidade que podem ser aplicados em projetos digitais.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,179
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
411
Comments
0
Likes
21

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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 "submit" 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, "click here" and "more" mean nothing when read out of context.
  • Wesley Woodson in 1981 as "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."
  • 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

Transcript

  • 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
  • 10. Acessibilidade Acessibilidade 10 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
  • 22. Usabilidade 22 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
  • 46. Obrigado 46 Copyright Sirius Interativa - 2008 - Todos direitos reservados