SlideShare uma empresa Scribd logo
As Interfaces Tecnológicas
com Design Acessível para a Baixa Visão
Cínthia C. Kulpa e Eluza T. Pinheiro
CURSO DE CAPACITAÇÃO PARA GESTORES PÚBLICOS:
Políticas de Acessibilidade e Direitos Humanos.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Quantas vezes você já acessou
algum site pela 1ª vez
e não era clara a forma de utilizá-lo?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site da Universidade Federal de Pernambuco.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface Computacional do Usuário
Parte visível de um sistema
onde o usuário se comunica e realiza tarefas.
Vários elementos são percebidos pelo usuário!
(Carvalho e Daltrini, 1994)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Cor, Imagem, Brilho...
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Contraste, Forma...
Interface do site Ubisoft.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Quantas vezes você entrou em sites
onde as informações geram dúvidas
ou insegurança na realização das tarefas?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Banco do Brasil.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interfaces Bem Projetadas
Sentimentos positivos de sucesso,
competência e clareza para o usuário.
(Carvalho e Daltrini, 1994)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Banrisul.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Quanto tempo se perde tentando
compreender como funciona determinado site?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Google.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Deezer.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Usabilidade
Atributo de qualidade relacionado
à facilidade do uso da interface.
(Nielsen e Loranger, 2007)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do Nielsen Norman Group.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
O quanto as cores contribuem
na usabilidade de uma interface web?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Cor
Chamar a atenção do usuário
Direcionar a leitura
Indicar aspectos da interface
Criar planos de fundo
Facilitar a memorização
(Carneiro, 2003)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do Nielsen Norman Group.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do Software Cinema 4D.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site atlantis.com
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Ubisoft.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Quem é o Deficiente de Baixa Visão?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Baixa Visão
Perda severa da visão, não é corrigida
por tratamento clínico ou cirúrgico,
nem por óculos convencionais.
Visão entre 20/40 e 20/200, após correção.
(Carvalho, 1994)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
- 24% da população possui algum tipo de deficiência,
ou seja, 45 milhões de brasileiros.
- 35 milhões de pessoas: deficientes de Baixa Visão.
Perspectiva de realizar a inclusão
social/digital destas pessoas passa a ser um desafio.
(IBGE Brasil, 2010)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Posição intermediária entre as pessoas
que enxergam normalmente e
as pessoas deficientes visuais totais.
Condição marginal = Dificuldades de ajuste à sociedade.
Excluídos num nível maior que pessoas
cegas e pessoas de visão normal.
(Paschoal, 1993)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Resíduo Visual não utilizado:
Possui visão útil.
Diminui progressivamente a visão funcional.
Poderiam Navegar na Web: Interfaces Ajustadas.
Sem os Programas de Voz ou Ampliadores de Telas.
(Amiralian, 2004)
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Como saber se uma Interface
está adequada ao usuário de Baixa Visão?
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Site Banco do Brasil
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Site Jornal Zero Hora
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Site Google
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface Protótipo para Teste com Usuário de Baixa Visão.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Contrastes eficientes para Usuário de Baixa Visão.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Contrastes eficientes para Usuário de Baixa Visão.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Site prevendo usabilidade, interface principal: links para acessibilidade.
Interface do site Instituto Federal do Rio Grande do Sul
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface com contraste, ampliação prevista na página e nas letras dos textos em geral.
Interface do site Instituto Federal do Rio Grande do Sul
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface com contraste, ampliação prevista na página e nas letras dos textos em geral.
Interface do site Instituto Federal do Rio Grande do Sul
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site blackmountainbicycle.com
Apresentação da interface sem usabilidade.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site blackmountainbicycle.com
Apresentação da interface visando usabilidade.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Design Unisinos.
Textos imperceptíveis e contrastes inadequados.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Scuola Politecnica di Design
Textos imperceptíveis e contrastes inadequados.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Submarino.
Cores de alto contraste.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Sitedaw.
Menus contrastantes, sem Flash, etc.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Apple.
Evitar imagens em Flash.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Unibanco..
Menus com formas simplificadas.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
Interface do site Planeta Educação.
Interfaces limpas e bem organizadas.
As Interfaces Tecnológicas com
Design Acessível para a Baixa Visão
OBRIGADA!
cinthia.kulpa@gmail.com
eluzapinheiro@gmail.com

Mais conteúdo relacionado

PDF
As interfaces tecnologicas com design acessivel para a baixa visao
PDF
Programas para deficiente visual lorena
PPT
Tecnologia para deficientes visuais
PDF
Acessibilidade na WEB parte 1
PPT
Judging at Grand Prix
PPTX
Acessibilidade Digital (19/02/2013)
PDF
Acessibilidade na web: como adaptar sites para deficientes online
PPT
Acessibilidade Web 2015
As interfaces tecnologicas com design acessivel para a baixa visao
Programas para deficiente visual lorena
Tecnologia para deficientes visuais
Acessibilidade na WEB parte 1
Judging at Grand Prix
Acessibilidade Digital (19/02/2013)
Acessibilidade na web: como adaptar sites para deficientes online
Acessibilidade Web 2015

Destaque (10)

PPT
Acessibilidade web
PPT
Acessibilidade na Web: Boas práticas
PDF
Acessibilidade
PPT
Acessibilidade com Desenho Universal
PPTX
Acessibilidade
PPT
Mobilidade e Acessibilidade Urbana
PPT
Guia de acessibilidade e mobilidade para todos
PDF
Acessibilidade na Web: Principais problemas e Soluções - FISL14
PPT
ApresentaçãO Acessibilidade
Acessibilidade web
Acessibilidade na Web: Boas práticas
Acessibilidade
Acessibilidade com Desenho Universal
Acessibilidade
Mobilidade e Acessibilidade Urbana
Guia de acessibilidade e mobilidade para todos
Acessibilidade na Web: Principais problemas e Soluções - FISL14
ApresentaçãO Acessibilidade
Anúncio

Semelhante a Acessibilidade na WEB parte 02 (20)

PDF
Design para a web - da interface ao branding
PDF
Workshop - Design de Interfaces para Dispositivos Móveis
PPT
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
PPS
Arquitetura da Informacao e Webdesign
PDF
Mobile User Experience: Compilando pessoas e codificando cores
PPT
Apresentação PCC - Rodrigo Santiago
PDF
Arquitetura da Informação e Webdesign
PDF
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
PPS
Televisão Digital Interativa: Aspectos de Produção e Demanda
PPT
A importancia de IHC no desenvolvimento de software
PDF
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
PPT
Interface Humano-Computador (IHC)
PPT
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
PDF
Apresentaçao Aula 1
PDF
PDF
Seminário Final
PPTX
Design: Necessidade ou desperdício de tempo
PPTX
Design da interface do usuário
PPT
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
PPTX
A Web para todos - Acessibilidade na web
Design para a web - da interface ao branding
Workshop - Design de Interfaces para Dispositivos Móveis
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
Arquitetura da Informacao e Webdesign
Mobile User Experience: Compilando pessoas e codificando cores
Apresentação PCC - Rodrigo Santiago
Arquitetura da Informação e Webdesign
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Televisão Digital Interativa: Aspectos de Produção e Demanda
A importancia de IHC no desenvolvimento de software
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Interface Humano-Computador (IHC)
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Apresentaçao Aula 1
Seminário Final
Design: Necessidade ou desperdício de tempo
Design da interface do usuário
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
A Web para todos - Acessibilidade na web
Anúncio

Mais de Universidade Federal do Rio Grande do Sul (11)

PPTX
Vamos Falar sobre Baixa Visão
PDF
Guia para Desenvolver Interfaces Digitais Acessíveis
PDF
PDF
Introdução ao Design - Usabilidade, DCU e UX
PDF
A cor como quero ver - 2018
PDF
Acessibilidade em Cursos a Distância
PDF
Jogo Digital Pedagógico Te-3D Tetris
PDF
PPT
Cores para Deficientes de Baixa Visão
PDF
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
PDF
O design com foco na gamification
Vamos Falar sobre Baixa Visão
Guia para Desenvolver Interfaces Digitais Acessíveis
Introdução ao Design - Usabilidade, DCU e UX
A cor como quero ver - 2018
Acessibilidade em Cursos a Distância
Jogo Digital Pedagógico Te-3D Tetris
Cores para Deficientes de Baixa Visão
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
O design com foco na gamification

Último (10)

PDF
PROJETO DE PESQUISA PRONTO FONOAUDIOLOGIA 2025 ABNT.pdf
PDF
Apostila_de_Laboratorio_de_Quimica_Inorg.pdf
PDF
Certificado de Conclusão Jornada Inteligência Artificial
PPTX
TURMA modelo de modelo apresentação 4DE.pptx
PDF
Agosto-Lilas-Conscientizacao-e-Combate-a-Violencia-contra-a-Mulher.pdf
PDF
A sua pontuação aumenta ao escolher uma categoria, preencher uma descrição lo...
PDF
Metodologias ágeis - Slides - aulas 1 a 5.pdf
PPTX
Classifirrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrcação_IPAQ.pptx
PPTX
Fundamentos do Desenvolvimento Web. Fundamentos do Desenvolvimento Web.Fundam...
PDF
PROJETO DE PESQUISA PRONTO ESTÉTICA 2025 ABNT.pdf
PROJETO DE PESQUISA PRONTO FONOAUDIOLOGIA 2025 ABNT.pdf
Apostila_de_Laboratorio_de_Quimica_Inorg.pdf
Certificado de Conclusão Jornada Inteligência Artificial
TURMA modelo de modelo apresentação 4DE.pptx
Agosto-Lilas-Conscientizacao-e-Combate-a-Violencia-contra-a-Mulher.pdf
A sua pontuação aumenta ao escolher uma categoria, preencher uma descrição lo...
Metodologias ágeis - Slides - aulas 1 a 5.pdf
Classifirrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrcação_IPAQ.pptx
Fundamentos do Desenvolvimento Web. Fundamentos do Desenvolvimento Web.Fundam...
PROJETO DE PESQUISA PRONTO ESTÉTICA 2025 ABNT.pdf

Acessibilidade na WEB parte 02

  • 1. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Cínthia C. Kulpa e Eluza T. Pinheiro CURSO DE CAPACITAÇÃO PARA GESTORES PÚBLICOS: Políticas de Acessibilidade e Direitos Humanos.
  • 2. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Quantas vezes você já acessou algum site pela 1ª vez e não era clara a forma de utilizá-lo?
  • 3. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site da Universidade Federal de Pernambuco.
  • 4. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface Computacional do Usuário Parte visível de um sistema onde o usuário se comunica e realiza tarefas. Vários elementos são percebidos pelo usuário! (Carvalho e Daltrini, 1994)
  • 5. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Cor, Imagem, Brilho...
  • 6. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Contraste, Forma... Interface do site Ubisoft.
  • 7. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Quantas vezes você entrou em sites onde as informações geram dúvidas ou insegurança na realização das tarefas?
  • 8. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Banco do Brasil.
  • 9. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interfaces Bem Projetadas Sentimentos positivos de sucesso, competência e clareza para o usuário. (Carvalho e Daltrini, 1994)
  • 10. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Banrisul.
  • 11. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Quanto tempo se perde tentando compreender como funciona determinado site?
  • 12. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Google.
  • 13. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Deezer.
  • 14. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Usabilidade Atributo de qualidade relacionado à facilidade do uso da interface. (Nielsen e Loranger, 2007)
  • 15. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do Nielsen Norman Group.
  • 16. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão O quanto as cores contribuem na usabilidade de uma interface web?
  • 17. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Cor Chamar a atenção do usuário Direcionar a leitura Indicar aspectos da interface Criar planos de fundo Facilitar a memorização (Carneiro, 2003)
  • 18. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do Nielsen Norman Group.
  • 19. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do Software Cinema 4D.
  • 20. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site atlantis.com
  • 21. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Ubisoft.
  • 22. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão
  • 23. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Quem é o Deficiente de Baixa Visão?
  • 24. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Baixa Visão Perda severa da visão, não é corrigida por tratamento clínico ou cirúrgico, nem por óculos convencionais. Visão entre 20/40 e 20/200, após correção. (Carvalho, 1994)
  • 25. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão - 24% da população possui algum tipo de deficiência, ou seja, 45 milhões de brasileiros. - 35 milhões de pessoas: deficientes de Baixa Visão. Perspectiva de realizar a inclusão social/digital destas pessoas passa a ser um desafio. (IBGE Brasil, 2010)
  • 26. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão
  • 27. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Posição intermediária entre as pessoas que enxergam normalmente e as pessoas deficientes visuais totais. Condição marginal = Dificuldades de ajuste à sociedade. Excluídos num nível maior que pessoas cegas e pessoas de visão normal. (Paschoal, 1993)
  • 28. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Resíduo Visual não utilizado: Possui visão útil. Diminui progressivamente a visão funcional. Poderiam Navegar na Web: Interfaces Ajustadas. Sem os Programas de Voz ou Ampliadores de Telas. (Amiralian, 2004)
  • 29. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Como saber se uma Interface está adequada ao usuário de Baixa Visão?
  • 30. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Site Banco do Brasil
  • 31. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Site Jornal Zero Hora
  • 32. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Site Google
  • 33. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface Protótipo para Teste com Usuário de Baixa Visão.
  • 34. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Contrastes eficientes para Usuário de Baixa Visão.
  • 35. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Contrastes eficientes para Usuário de Baixa Visão.
  • 36. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Site prevendo usabilidade, interface principal: links para acessibilidade. Interface do site Instituto Federal do Rio Grande do Sul
  • 37. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface com contraste, ampliação prevista na página e nas letras dos textos em geral. Interface do site Instituto Federal do Rio Grande do Sul
  • 38. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface com contraste, ampliação prevista na página e nas letras dos textos em geral. Interface do site Instituto Federal do Rio Grande do Sul
  • 39. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site blackmountainbicycle.com Apresentação da interface sem usabilidade.
  • 40. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site blackmountainbicycle.com Apresentação da interface visando usabilidade.
  • 41. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Design Unisinos. Textos imperceptíveis e contrastes inadequados.
  • 42. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Scuola Politecnica di Design Textos imperceptíveis e contrastes inadequados.
  • 43. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Submarino. Cores de alto contraste.
  • 44. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Sitedaw. Menus contrastantes, sem Flash, etc.
  • 45. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Apple. Evitar imagens em Flash.
  • 46. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Unibanco.. Menus com formas simplificadas.
  • 47. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão Interface do site Planeta Educação. Interfaces limpas e bem organizadas.
  • 48. As Interfaces Tecnológicas com Design Acessível para a Baixa Visão OBRIGADA! cinthia.kulpa@gmail.com eluzapinheiro@gmail.com