SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
Copyright Sirius Interativa - 2007 - Todos direitos reservados
Sirius interativa
Aplicação de métodos de usabilidade
em projetos web
Quais são os
     componentes de uma
     experiência interativa
        bem sucedida ?

                                                                 2


Copyright Sirius Interativa - 2008 - Todos direitos reservados
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
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
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
Desejável
                                                   x
                                                 Usável

                                                                 6


Copyright Sirius Interativa - 2008 - Todos direitos reservados
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
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
Ambiente visual




Decisões são emocionais.
Depois, nós criamos
justificativas racionais.                                                          9


Copyright Sirius Interativa - 2008 - Todos direitos reservados
Acessibilidade




                           Acessibilidade



                                                                                  10


Copyright Sirius Interativa - 2008 - Todos direitos reservados
Acessibilidade




                                                                  Para atingir os
                                                            objetivos do projeto

                                                                   tem que ser

                                                                 Acessível
                                                                                               11


Copyright Sirius Interativa - 2008 - Todos direitos reservados
Acessibilidade


                                                                 Mundo
                                        650                          milhões

                                                                 Brasil
                                  24,5                                milhões
                                                                                            12


Copyright Sirius Interativa - 2008 - Todos direitos reservados
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
Acessibilidade




                           Acessibilidade
                                 Alguns exemplos



                                                                                  14


Copyright Sirius Interativa - 2008 - Todos direitos reservados
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
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
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
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
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
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
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
Usabilidade



                                                                 22


Copyright Sirius Interativa - 2008 - Todos direitos reservados
“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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Usabilidade




                                                                 Exemplo de página de um relatório

                                                                                                                   44


Copyright Sirius Interativa - 2008 - Todos direitos reservados
Usabilidade




                                                                 Exemplo de página de um relatório

                                                                                                                   45


Copyright Sirius Interativa - 2008 - Todos direitos reservados
Obrigado
                                                                 46


Copyright Sirius Interativa - 2008 - Todos direitos reservados

Mais conteúdo relacionado

Semelhante a Métodos de usabilidade em projetos web

Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Mourylise Heymer
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação CogIgnition
 
Otimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceOtimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceTuia
 

Semelhante a Métodos de usabilidade em projetos web (6)

Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação
 
Otimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceOtimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User Experience
 
O retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuárioO retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuário
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
 

Métodos de usabilidade em projetos web

  • 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

Notas do Editor

  1. Em 2000, havia 1 bilhão de páginas indexadas pelo Google. Em Agosto de 2005 são 8.5 bilhões;
  2. Em 2000, havia 1 bilhão de páginas indexadas pelo Google. Em Agosto de 2005 são 8.5 bilhões;
  3. Quais os elementos que compoem uma experiência bem sucedida?
  4. 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.).
  5. 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.
  6. Porque alguém compra um i-pod? O que diferencia um -pod
  7. 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
  8. 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
  9. 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.
  10. 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.
  11. 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.
  12. 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)
  13. 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.
  14. 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.
  15. 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.
  16. 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."
  17. 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
  18. 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?
  19. 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
  20. 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
  21. 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