SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
• ISDFUHDSIUHGDFHG
    A Experiência do Usuário no
    Desenvolvimento de Interfaces
    Digitais Acessíveis para
    Deficientes de Baixa Visão.




Click


               Cínthia C. Kulpa
               Eluza T. Pinheiro
               Régio P. da Silva
• ISDFUHDSIUHGDFHG




                 Direito ao acesso
                 de informações nas
Acessibilidade
   Click         interfaces.
                 Direito de eliminar as
                 barreiras na comunicação.
• ISDFUHDSIUHGDFHG




              Perda severa da visão.
Baixa Visão
Click         Sem correção por tratamento
              clínico/cirúrgico ou óculos
              convencionais.

                                  Carvalho, 1994
• ISDFUHDSIUHGDFHG




Baixa Visão
Click
              Visão entre 20/40 e 20/200,
              após correção.

                                   Carvalho, 1994
• ISDFUHDSIUHGDFHG




              Posição intermediária.
Baixa Visão
Click
              Exclusão em maior nível.
              TAs para Cegos.
              Acuidade Visual.
• ISDFUHDSIUHGDFHG




Baixa Visão
Click
              70% a 80% - visão útil.
              Visão Residual.
              Atrofia da visão.
• ISDFUHDSIUHGDFHG




Interface bem projetada?
            Click
                           Sentimentos positivos:
                           Sucesso, competência e
                           clareza no usuário.
• ISDFUHDSIUHGDFHG




            Experiência: é individual
            e única.
Click IHC
            Cada pessoa é única
            em sua bagagem de
            conhecimento e
            expectativas.
• ISDFUHDSIUHGDFHG




                      Eficiência no uso,
Design de Interação
       Click
                      Segurança e utilidade,
                      Fácil memorização,
                      Aprendizado.
• ISDFUHDSIUHGDFHG




                         Sentimento do usuário:
                         produto, sistema ou serviço.
Experiência Click
            do Usuário
                         Percepção: função, facilidade
                         de uso e eficiência do sistema.
                         Natureza subjetiva e dinâmica.
• ISDFUHDSIUHGDFHG




Usabilidade
Click
              Atributo de qualidade.
              Facilidade de uso.

                           Nielsen e Loranger, 2007
• ISDFUHDSIUHGDFHG




                       Dificuldades na navegação
Teste de Usabilidade
                       de um ambiente virtual.
         Click
                       Sem auxílio de TAs.
                       Questionário com
                       perguntas abertas.
• ISDFUHDSIUHGDFHG




Questionário
 Click

               Metas decorrentes da
               experiência do usuário.

                         Preece, Rogers e Sharp, 2005
• ISDFUHDSIUHGDFHG




                6 usuários de Baixa Visão.
                Independente do diagnóstico.
Participantes
 Click          Associação dos Pais e Amigos
                dos Deficientes Visuais
                (APADEV).
                Caxias do Sul, RS.
• ISDFUHDSIUHGDFHG




                       Ambiente do participante.
                       Ferramentas tecnológicas
Ambiente da testagem
          Click        familiares.
                       Liberdade de escolha do
                       horário.
• ISDFUHDSIUHGDFHG



            Entendimento,

            Leitura,

            Identificação e
Comprovar
Click
            Memorização.
• ISDFUHDSIUHGDFHG




Site do Banco do Brasil
            Click




                                  www.bb.com.br
• ISDFUHDSIUHGDFHG




                          Utilização do site pelos usuários
                          participantes.
Site do Banco do Brasil
            Click
                          Interface recém modificada.
                          Teste de Usabilidade da
                          interface antiga em 2009.
• ISDFUHDSIUHGDFHG




                                            Link de acessibilidade


O Teste de Usabilidade
           Click         Buscar link :
                         “Acessível para
                         Deficientes Visuais”
• ISDFUHDSIUHGDFHG
                         Nenhum participante
                          encontrou o link sem auxílio.

                          Falta de autonomia.

                          Participante rastreia a
                          interface em busca da
                          informação à 7cm de
                          distância.
Link de Acessibilidade
           Click
                          Baixo contraste: amarelo no
                          fundo e azul nas letras em
                          negrito.
• ISDFUHDSIUHGDFHG




                    Aumento de letra indicado só
      Click
Ferramentas A+ A-
                    funciona para cabeçalho,
                    mas tem problemas de
                    adequação da interface.
• ISDFUHDSIUHGDFHG


                             Autoatendimento.

                             Somente com cadastro
                             prévio na agência.

                             Contraste de cores entre
Entrando no Link Acessível
               Click         fundo 10% cinza e texto
                             azul.
• ISDFUHDSIUHGDFHG




Entrando no Link Acessível
               Click
• ISDFUHDSIUHGDFHG
                       Quadros de preenchimento
                       de dados da conta pessoal
                       legível.

                       Informações claras e
                       resumidas.

                       Preferência do fundo cinza,
Link Autoatendimento
           Click       devido ao cansaço visual
                       que o fundo branco
                       proporciona.
• ISDFUHDSIUHGDFHG
                  Participantes conseguiram
                   navegar no site.

                   Informações organizadas
                   ordenadamente.

                   As imagens em movimento:
                         - dentro de caixas
                         de formatação,
No site em Geral
      Click              - contribui para o
                         entendimento
                         da interface.
• ISDFUHDSIUHGDFHG




                   Ampliação do Windows do
                   computador: sem perda da
No site em Geral
      Click        qualidade dos textos.

                   Contrastes: adequados à
                   melhor leiturabilidade.
• ISDFUHDSIUHGDFHG




                   Contrastes: adequados à
                   melhor leiturabilidade.
No site em Geral
      Click
                   Proporciona conforto e
                   confiança do usuário no site.
• ISDFUHDSIUHGDFHG o site
                    Usuários consideram
                    seguro.

                    Contrastes adequados ao
                    entendimento.

                    Proporciona uma boa
                    memorização.

                    A formatação por blocos
No site em Geral
      Click         alinhados auxiliou muito na
                    busca, entendimento e
                    memorização da página
                    principal.
• ISDFUHDSIUHGDFHG
                   2 participantes consideraram
                   o site ineficaz.

                   Link de acessibilidade não
                   está em destaque, nem com
                   alto contraste de cores e
                   tamanho de letras maior.

                   Todos consideraram o site
No site em Geral
      Click        agradável, compensador,
                   satisfatório e esteticamente
                   apreciável.
• ISDFUHDSIUHGDFHG de
                       Parcela significativa
                         pessoas que continuam fora
                         desta realidade.

                          Utilizar-se de diretrizes no
                         desenvolvimento de um site,
                         contemplando usuários de
                         diferentes características,
                         auxilia no aumento da
Considerações Finais
         Click           garantia de acessibilidade e
                         usabilidade sem distinção.
• ISDFUHDSIUHGDFHG




OBRIGADA!
    Click


                   cinthia.kulpa@gmail.com

Weitere ähnliche Inhalte

Andere mochten auch

Design de interação e usabilidade
Design de interação e usabilidadeDesign de interação e usabilidade
Design de interação e usabilidadeInformantTalks
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosAlan Vasconcelos
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
 
Plataforma iOS
Plataforma iOSPlataforma iOS
Plataforma iOSernandesjr
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webDaniel Brandão
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & UsabilidadeLuiz China
 

Andere mochten auch (10)

Design de interação e usabilidade
Design de interação e usabilidadeDesign de interação e usabilidade
Design de interação e usabilidade
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
 
Plataforma iOS
Plataforma iOSPlataforma iOS
Plataforma iOS
 
Natural user interface
Natural user interfaceNatural user interface
Natural user interface
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & Usabilidade
 

Mehr von Universidade Federal do Rio Grande do Sul

Mehr von Universidade Federal do Rio Grande do Sul (13)

Vamos Falar sobre Baixa Visão
Vamos Falar sobre Baixa VisãoVamos Falar sobre Baixa Visão
Vamos Falar sobre Baixa Visão
 
Guia para Desenvolver Interfaces Digitais Acessíveis
Guia para Desenvolver Interfaces Digitais AcessíveisGuia para Desenvolver Interfaces Digitais Acessíveis
Guia para Desenvolver Interfaces Digitais Acessíveis
 
Acessibilidade web 2018
Acessibilidade web 2018Acessibilidade web 2018
Acessibilidade web 2018
 
Introdução ao Design - Usabilidade, DCU e UX
Introdução ao Design -  Usabilidade, DCU e UXIntrodução ao Design -  Usabilidade, DCU e UX
Introdução ao Design - Usabilidade, DCU e UX
 
A cor como quero ver - 2018
A cor como quero ver - 2018A cor como quero ver - 2018
A cor como quero ver - 2018
 
Acessibilidade em Cursos a Distância
Acessibilidade em Cursos a DistânciaAcessibilidade em Cursos a Distância
Acessibilidade em Cursos a Distância
 
Jogo Digital Pedagógico Te-3D Tetris
Jogo Digital Pedagógico Te-3D TetrisJogo Digital Pedagógico Te-3D Tetris
Jogo Digital Pedagógico Te-3D Tetris
 
Como Elaborar um Pôster
Como Elaborar um PôsterComo Elaborar um Pôster
Como Elaborar um Pôster
 
Acessibilidade na WEB parte 02
Acessibilidade na WEB parte 02Acessibilidade na WEB parte 02
Acessibilidade na WEB parte 02
 
Acessibilidade na WEB parte 1
Acessibilidade na WEB  parte 1Acessibilidade na WEB  parte 1
Acessibilidade na WEB parte 1
 
Cores para Deficientes de Baixa Visão
Cores para Deficientes de Baixa VisãoCores para Deficientes de Baixa Visão
Cores para Deficientes de Baixa Visão
 
O design com foco na gamification
O design com foco na gamificationO design com foco na gamification
O design com foco na gamification
 
As interfaces tecnologicas com design acessivel para a baixa visao
As interfaces tecnologicas com design acessivel para a baixa visaoAs interfaces tecnologicas com design acessivel para a baixa visao
As interfaces tecnologicas com design acessivel para a baixa visao
 

A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis para Deficientes de Baixa Visão

  • 1. • ISDFUHDSIUHGDFHG A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis para Deficientes de Baixa Visão. Click Cínthia C. Kulpa Eluza T. Pinheiro Régio P. da Silva
  • 2. • ISDFUHDSIUHGDFHG Direito ao acesso de informações nas Acessibilidade Click interfaces. Direito de eliminar as barreiras na comunicação.
  • 3. • ISDFUHDSIUHGDFHG Perda severa da visão. Baixa Visão Click Sem correção por tratamento clínico/cirúrgico ou óculos convencionais. Carvalho, 1994
  • 4. • ISDFUHDSIUHGDFHG Baixa Visão Click Visão entre 20/40 e 20/200, após correção. Carvalho, 1994
  • 5. • ISDFUHDSIUHGDFHG Posição intermediária. Baixa Visão Click Exclusão em maior nível. TAs para Cegos. Acuidade Visual.
  • 6. • ISDFUHDSIUHGDFHG Baixa Visão Click 70% a 80% - visão útil. Visão Residual. Atrofia da visão.
  • 7. • ISDFUHDSIUHGDFHG Interface bem projetada? Click Sentimentos positivos: Sucesso, competência e clareza no usuário.
  • 8. • ISDFUHDSIUHGDFHG Experiência: é individual e única. Click IHC Cada pessoa é única em sua bagagem de conhecimento e expectativas.
  • 9. • ISDFUHDSIUHGDFHG Eficiência no uso, Design de Interação Click Segurança e utilidade, Fácil memorização, Aprendizado.
  • 10. • ISDFUHDSIUHGDFHG Sentimento do usuário: produto, sistema ou serviço. Experiência Click do Usuário Percepção: função, facilidade de uso e eficiência do sistema. Natureza subjetiva e dinâmica.
  • 11. • ISDFUHDSIUHGDFHG Usabilidade Click Atributo de qualidade. Facilidade de uso. Nielsen e Loranger, 2007
  • 12. • ISDFUHDSIUHGDFHG Dificuldades na navegação Teste de Usabilidade de um ambiente virtual. Click Sem auxílio de TAs. Questionário com perguntas abertas.
  • 13. • ISDFUHDSIUHGDFHG Questionário Click Metas decorrentes da experiência do usuário. Preece, Rogers e Sharp, 2005
  • 14. • ISDFUHDSIUHGDFHG 6 usuários de Baixa Visão. Independente do diagnóstico. Participantes Click Associação dos Pais e Amigos dos Deficientes Visuais (APADEV). Caxias do Sul, RS.
  • 15. • ISDFUHDSIUHGDFHG Ambiente do participante. Ferramentas tecnológicas Ambiente da testagem Click familiares. Liberdade de escolha do horário.
  • 16. • ISDFUHDSIUHGDFHG Entendimento, Leitura, Identificação e Comprovar Click Memorização.
  • 17. • ISDFUHDSIUHGDFHG Site do Banco do Brasil Click www.bb.com.br
  • 18. • ISDFUHDSIUHGDFHG Utilização do site pelos usuários participantes. Site do Banco do Brasil Click Interface recém modificada. Teste de Usabilidade da interface antiga em 2009.
  • 19. • ISDFUHDSIUHGDFHG Link de acessibilidade O Teste de Usabilidade Click Buscar link : “Acessível para Deficientes Visuais”
  • 20. • ISDFUHDSIUHGDFHG Nenhum participante encontrou o link sem auxílio. Falta de autonomia. Participante rastreia a interface em busca da informação à 7cm de distância. Link de Acessibilidade Click Baixo contraste: amarelo no fundo e azul nas letras em negrito.
  • 21. • ISDFUHDSIUHGDFHG Aumento de letra indicado só Click Ferramentas A+ A- funciona para cabeçalho, mas tem problemas de adequação da interface.
  • 22. • ISDFUHDSIUHGDFHG Autoatendimento. Somente com cadastro prévio na agência. Contraste de cores entre Entrando no Link Acessível Click fundo 10% cinza e texto azul.
  • 23. • ISDFUHDSIUHGDFHG Entrando no Link Acessível Click
  • 24. • ISDFUHDSIUHGDFHG Quadros de preenchimento de dados da conta pessoal legível. Informações claras e resumidas. Preferência do fundo cinza, Link Autoatendimento Click devido ao cansaço visual que o fundo branco proporciona.
  • 25. • ISDFUHDSIUHGDFHG Participantes conseguiram navegar no site. Informações organizadas ordenadamente. As imagens em movimento: - dentro de caixas de formatação, No site em Geral Click - contribui para o entendimento da interface.
  • 26. • ISDFUHDSIUHGDFHG Ampliação do Windows do computador: sem perda da No site em Geral Click qualidade dos textos. Contrastes: adequados à melhor leiturabilidade.
  • 27. • ISDFUHDSIUHGDFHG Contrastes: adequados à melhor leiturabilidade. No site em Geral Click Proporciona conforto e confiança do usuário no site.
  • 28. • ISDFUHDSIUHGDFHG o site Usuários consideram seguro. Contrastes adequados ao entendimento. Proporciona uma boa memorização. A formatação por blocos No site em Geral Click alinhados auxiliou muito na busca, entendimento e memorização da página principal.
  • 29. • ISDFUHDSIUHGDFHG 2 participantes consideraram o site ineficaz. Link de acessibilidade não está em destaque, nem com alto contraste de cores e tamanho de letras maior. Todos consideraram o site No site em Geral Click agradável, compensador, satisfatório e esteticamente apreciável.
  • 30. • ISDFUHDSIUHGDFHG de Parcela significativa pessoas que continuam fora desta realidade. Utilizar-se de diretrizes no desenvolvimento de um site, contemplando usuários de diferentes características, auxilia no aumento da Considerações Finais Click garantia de acessibilidade e usabilidade sem distinção.
  • 31. • ISDFUHDSIUHGDFHG OBRIGADA! Click cinthia.kulpa@gmail.com