SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
A proposta de um Modelo de Cores surgiu a partir da
minha pesquisa de mestrado, com o objetivo principal
de identificar composições de cores para interfaces
digitais que permitam ao usuário com Baixa Visão ter
uma experiência positiva de navegação pela web, no
que diz respeito ao usoe acesso.
Além do Modelo de Cores, durante os testes da pesquisa, foram
observadas algumas práticas que contribuem para melhorar
essa experiência. Porém, cabe salientar, que estas
recomendações sozinhas não garantem uma melhor experiência
e nem são arbitrariamente necessárias na construção do layout
de uma interface. Sendo assim, elas são apenas recomendações
que contemplam o usuário com Baixa Visão.
BOAS PRÁTICAS PARA A BAIXA VISÃO
Página Inicial com o mínimo de informações
Incluir muitas informações em uma mesma interface
acarreta na demora pela busca, além de insegurança
para este usuário. Evite apresentar todo oconteúdo na
página inicial, para que o usuário tenha agilidade nas
suas buscas e não se sinta confuso.
Conteúdo em coluna organizada e bem definida
Evitar a apresentação do conteúdo de forma “solta” na
página, auxiliando na memorização das informações. O
usuário com Baixa Visão normalmente busca de forma
automática o menu principal na coluna da esquerda da
interface, demonstrando a importância de um padrão
de localização das informaçõesprincipais.
Preocupaçãocoma eficáciadosserviçosoferecidospelosite
Garantir que os serviços oferecidos funcionem na
prática. Certifique-se, também, de que asorientações
necessárias para a sua utilização sejam claras.
Navegação pelo Menuprincipal
Permitir o acesso a todo conteúdo a partir do
menu principal, oferecendo conforto e
velocidade de navegação.
Menu principal à esquerda da página
Auxiliar na busca mais rápida pela disposição dos
tópicos. O usuário com Baixa Visão normalmente inicia
a busca pelos tópicos no canto esquerdo da página.
Prever a ampliação oferecendo adequação daimagem.
Evite a barra horizontal para a leitura dos textos
ampliados. A ampliação da interface é uma prática
comum aos usuários com Baixa Visão.
Ampliação da tela sem a diminuição daqualidade
Ausência de imagens emmovimento
Evitar a utilização de imagens em movimento, para não
prejudicar a navegação deste usuário, uma vez que
interrompe e dificulta a leitura, levando ao cansaço visual.
Maior espaço nas“entre-letras”
Prever a ampliação dos textos aumentando o
espaçamento entre-letras automaticamente,
garantindo assim, que as letras de uma palavra não
se transformem em um bloco compacto,
impossibilitando a visualização.
Mudança de cor de fundo sempre que
o cursor passar por um link
Esta opção mostra-se bastante eficiente sempre que
há alto contraste entre o fundo e as letras ou não há
outra forma de evidenciar umlink.
Fonte sem serifa
As fontes sem serifa auxiliam na identificação das
informações. Enquanto as fontes com serifa
interferem na leitura do texto, pois este usuário tem a
sensação de que as letras “grudam” umas às outras
se a ampliação não for total.
Fonte em negrito
Manter em negrito principalmente os textos com fontes
em menor tamanho. Por exemplo: legendas das imagens.
Do contrário, o usuário com Baixa Visão não percebe que
há um texto localizado abaixo daimagem.
“Utilizar fontes em negrito, com alto contraste de cores e
em tamanho maior, asseguram a leitura, memorização,
velocidade de navegação e segurança nas escolhas
destes usuários.”
Fonte em tamanhomaior
O tamanho maior da fonte aumenta as possibilidades
de ampliações a serem feitas. O usuário com Baixa
Visão utiliza, muitas vezes, toda aampliação oferecida
pelo dispositivo, e mesmo assim, não é a ideal.
Alto contraste entre o fundo e o texto
Item indispensável para alcançar uma melhor
usabilidade da interface e garantir o acesso do usuário
com Baixa Visão.
Poucas cores em uma mesma página
Utilizar muitas cores em uma mesma interface
resulta na dificuldade de percepção do todo como
modelo mental para este usuário. Além disso, torna
lenta a sua adaptação visual à mudança de uma cor
para outra, diminuindo o interesse em explorá-la e
gerando sentimentos de frustração.
MODELO DE CORES PARA A BAIXA VISÃO
O objetivo destas combinações é possibilitar que o
usuário com Baixa Visão navegue pelo ambiente virtual
utilizando sua visão funcional de forma confortável e
satisfatória, sem o auxílio de tecnologiasassistivas.
Todas as combinações de cores que são apresentadas a
seguir foram testadas por usuários com Baixa Visão de
diferentes patologias. Ao lado de cada contraste de cores
é feito um breve comentário das experiências destes
usuários, além de sugerir em que situação utilizá-las.
As combinações são separadas pelos seguintes
elementos: menu principal, sub-menu, cabeçalho,
corpo de texto e rodapé.
A cor padrão de cada grupo é determinada pela cor de
fundo e a variação de cores se dá nas fontes que fazem
composição com o fundo, oferecendo mais alternativas.
Cabe destacar, que o contraste que proporciona uma melhor
experiência na navegação é o fundo azul escuro com fonte
branca. Este fato foi observado durante os testes da pesquisa.
Sempre que este contraste era aplicado na interface, os usuários
com Baixa Visão assumiam uma postura mais relaxada, mais
distante da tela e permaneciam mais tempo lendo. Ao contrário
do que afirma grande parte da literatura, onde o contraste fundo
preto com fonte amarela luminosa é o mais eficiente.
Contrastes mais
eficientes para leitura,
transmitem segurançae
são considerados
agradáveis para este
usuário.
Contrastes que
alcançam diversos
tipos de diagnósticos
de Baixa Visão.
Contrastes esteticamente
mais apreciados,
interessantes e bem
percebidos.
Contrastes que melhor
sinalizam e auxiliam
na identificação de
ícones, tópicos etítulos.
Contrastes que
permitem a utilização
de outrascombinações
na mesma interface e
não causam
interferências visuais
na composiçãogeral.
Contrastes que
auxiliam na leituraos
usuários com
sensibilidade à luz.
Contrastes que
sinalizam bem esão
considerados
discretos.
Contrastes que facilitam
a leitura de textos
longos com fontes de
letras pequenas.
Proporcionam
segurança, mas
dificultam a leiturado
usuário com
sensibilidade à luz.
Esta proposta de um modelo de cores para o
desenvolvimento de interfaces digitais voltadas aos
usuários com baixa visão, não despreza a importância
dos outros elementos dainterface.
Cinthia kulpa
cinthia.kulpa@gmail.com

Mais conteúdo relacionado

Semelhante a Guia para Desenvolver Interfaces Digitais Acessíveis

Principais diretrizes para a criação de conteúdos acessíveis
Principais diretrizes para a criação de conteúdos acessíveisPrincipais diretrizes para a criação de conteúdos acessíveis
Principais diretrizes para a criação de conteúdos acessíveisHenrique Salustiano
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interfaceOdair Cavichioli
 
Manual Para Site
Manual Para SiteManual Para Site
Manual Para SiteDomitri
 
A linguagem visual pronto
A linguagem visual prontoA linguagem visual pronto
A linguagem visual prontoViVi Silva
 
A linguagem visual pronto
A linguagem visual prontoA linguagem visual pronto
A linguagem visual prontoViVi Silva
 
Tarefa semana 2 Ambientes Virtuais e Mídias de Comunicação
Tarefa semana 2 Ambientes Virtuais e Mídias de ComunicaçãoTarefa semana 2 Ambientes Virtuais e Mídias de Comunicação
Tarefa semana 2 Ambientes Virtuais e Mídias de ComunicaçãoFeRaSo
 
Apresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para InternetApresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para Internetfmota2
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraenteSuzana Viana Mota
 
Melhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento WebMelhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento WebKeidi Nienkotter
 
Big images / Big Type
Big images / Big TypeBig images / Big Type
Big images / Big TypecomOn Group
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobileVlamir Carneiro Jr
 
PUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadePUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadeNeca Boullosa
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoRicardo Pereira Rodrigues
 

Semelhante a Guia para Desenvolver Interfaces Digitais Acessíveis (20)

Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8
 
Principais diretrizes para a criação de conteúdos acessíveis
Principais diretrizes para a criação de conteúdos acessíveisPrincipais diretrizes para a criação de conteúdos acessíveis
Principais diretrizes para a criação de conteúdos acessíveis
 
Design
DesignDesign
Design
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interface
 
Manual Para Site
Manual Para SiteManual Para Site
Manual Para Site
 
A linguagem visual pronto
A linguagem visual prontoA linguagem visual pronto
A linguagem visual pronto
 
A linguagem visual pronto
A linguagem visual prontoA linguagem visual pronto
A linguagem visual pronto
 
A linguagem visual pronto
A linguagem visual prontoA linguagem visual pronto
A linguagem visual pronto
 
O design equilibrado9
O design equilibrado9O design equilibrado9
O design equilibrado9
 
Tarefa semana 2 Ambientes Virtuais e Mídias de Comunicação
Tarefa semana 2 Ambientes Virtuais e Mídias de ComunicaçãoTarefa semana 2 Ambientes Virtuais e Mídias de Comunicação
Tarefa semana 2 Ambientes Virtuais e Mídias de Comunicação
 
Análise de Webstandars
Análise de WebstandarsAnálise de Webstandars
Análise de Webstandars
 
Apresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para InternetApresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para Internet
 
659 html
659 html659 html
659 html
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Acessibilidades FITEC
Acessibilidades FITECAcessibilidades FITEC
Acessibilidades FITEC
 
Melhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento WebMelhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento Web
 
Big images / Big Type
Big images / Big TypeBig images / Big Type
Big images / Big Type
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces Mobile
 
PUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadePUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de Usabilidade
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 

Mais de Universidade Federal do Rio Grande do Sul

A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...Universidade Federal do Rio Grande do Sul
 

Mais de 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
 
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
 
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
A Experiência do Usuário no Desenvolvimento de Interfaces Digitais Acessíveis...
 
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
 

Guia para Desenvolver Interfaces Digitais Acessíveis

  • 1.
  • 2. A proposta de um Modelo de Cores surgiu a partir da minha pesquisa de mestrado, com o objetivo principal de identificar composições de cores para interfaces digitais que permitam ao usuário com Baixa Visão ter uma experiência positiva de navegação pela web, no que diz respeito ao usoe acesso.
  • 3. Além do Modelo de Cores, durante os testes da pesquisa, foram observadas algumas práticas que contribuem para melhorar essa experiência. Porém, cabe salientar, que estas recomendações sozinhas não garantem uma melhor experiência e nem são arbitrariamente necessárias na construção do layout de uma interface. Sendo assim, elas são apenas recomendações que contemplam o usuário com Baixa Visão. BOAS PRÁTICAS PARA A BAIXA VISÃO
  • 4. Página Inicial com o mínimo de informações Incluir muitas informações em uma mesma interface acarreta na demora pela busca, além de insegurança para este usuário. Evite apresentar todo oconteúdo na página inicial, para que o usuário tenha agilidade nas suas buscas e não se sinta confuso.
  • 5. Conteúdo em coluna organizada e bem definida Evitar a apresentação do conteúdo de forma “solta” na página, auxiliando na memorização das informações. O usuário com Baixa Visão normalmente busca de forma automática o menu principal na coluna da esquerda da interface, demonstrando a importância de um padrão de localização das informaçõesprincipais.
  • 6. Preocupaçãocoma eficáciadosserviçosoferecidospelosite Garantir que os serviços oferecidos funcionem na prática. Certifique-se, também, de que asorientações necessárias para a sua utilização sejam claras.
  • 7. Navegação pelo Menuprincipal Permitir o acesso a todo conteúdo a partir do menu principal, oferecendo conforto e velocidade de navegação.
  • 8. Menu principal à esquerda da página Auxiliar na busca mais rápida pela disposição dos tópicos. O usuário com Baixa Visão normalmente inicia a busca pelos tópicos no canto esquerdo da página.
  • 9. Prever a ampliação oferecendo adequação daimagem. Evite a barra horizontal para a leitura dos textos ampliados. A ampliação da interface é uma prática comum aos usuários com Baixa Visão. Ampliação da tela sem a diminuição daqualidade
  • 10. Ausência de imagens emmovimento Evitar a utilização de imagens em movimento, para não prejudicar a navegação deste usuário, uma vez que interrompe e dificulta a leitura, levando ao cansaço visual.
  • 11. Maior espaço nas“entre-letras” Prever a ampliação dos textos aumentando o espaçamento entre-letras automaticamente, garantindo assim, que as letras de uma palavra não se transformem em um bloco compacto, impossibilitando a visualização.
  • 12. Mudança de cor de fundo sempre que o cursor passar por um link Esta opção mostra-se bastante eficiente sempre que há alto contraste entre o fundo e as letras ou não há outra forma de evidenciar umlink.
  • 13. Fonte sem serifa As fontes sem serifa auxiliam na identificação das informações. Enquanto as fontes com serifa interferem na leitura do texto, pois este usuário tem a sensação de que as letras “grudam” umas às outras se a ampliação não for total.
  • 14. Fonte em negrito Manter em negrito principalmente os textos com fontes em menor tamanho. Por exemplo: legendas das imagens. Do contrário, o usuário com Baixa Visão não percebe que há um texto localizado abaixo daimagem. “Utilizar fontes em negrito, com alto contraste de cores e em tamanho maior, asseguram a leitura, memorização, velocidade de navegação e segurança nas escolhas destes usuários.”
  • 15. Fonte em tamanhomaior O tamanho maior da fonte aumenta as possibilidades de ampliações a serem feitas. O usuário com Baixa Visão utiliza, muitas vezes, toda aampliação oferecida pelo dispositivo, e mesmo assim, não é a ideal.
  • 16. Alto contraste entre o fundo e o texto Item indispensável para alcançar uma melhor usabilidade da interface e garantir o acesso do usuário com Baixa Visão.
  • 17. Poucas cores em uma mesma página Utilizar muitas cores em uma mesma interface resulta na dificuldade de percepção do todo como modelo mental para este usuário. Além disso, torna lenta a sua adaptação visual à mudança de uma cor para outra, diminuindo o interesse em explorá-la e gerando sentimentos de frustração.
  • 18. MODELO DE CORES PARA A BAIXA VISÃO O objetivo destas combinações é possibilitar que o usuário com Baixa Visão navegue pelo ambiente virtual utilizando sua visão funcional de forma confortável e satisfatória, sem o auxílio de tecnologiasassistivas.
  • 19. Todas as combinações de cores que são apresentadas a seguir foram testadas por usuários com Baixa Visão de diferentes patologias. Ao lado de cada contraste de cores é feito um breve comentário das experiências destes usuários, além de sugerir em que situação utilizá-las.
  • 20. As combinações são separadas pelos seguintes elementos: menu principal, sub-menu, cabeçalho, corpo de texto e rodapé. A cor padrão de cada grupo é determinada pela cor de fundo e a variação de cores se dá nas fontes que fazem composição com o fundo, oferecendo mais alternativas.
  • 21. Cabe destacar, que o contraste que proporciona uma melhor experiência na navegação é o fundo azul escuro com fonte branca. Este fato foi observado durante os testes da pesquisa. Sempre que este contraste era aplicado na interface, os usuários com Baixa Visão assumiam uma postura mais relaxada, mais distante da tela e permaneciam mais tempo lendo. Ao contrário do que afirma grande parte da literatura, onde o contraste fundo preto com fonte amarela luminosa é o mais eficiente.
  • 22. Contrastes mais eficientes para leitura, transmitem segurançae são considerados agradáveis para este usuário.
  • 23. Contrastes que alcançam diversos tipos de diagnósticos de Baixa Visão.
  • 25. Contrastes que melhor sinalizam e auxiliam na identificação de ícones, tópicos etítulos.
  • 26. Contrastes que permitem a utilização de outrascombinações na mesma interface e não causam interferências visuais na composiçãogeral.
  • 27. Contrastes que auxiliam na leituraos usuários com sensibilidade à luz.
  • 28. Contrastes que sinalizam bem esão considerados discretos.
  • 29. Contrastes que facilitam a leitura de textos longos com fontes de letras pequenas. Proporcionam segurança, mas dificultam a leiturado usuário com sensibilidade à luz.
  • 30. Esta proposta de um modelo de cores para o desenvolvimento de interfaces digitais voltadas aos usuários com baixa visão, não despreza a importância dos outros elementos dainterface. Cinthia kulpa cinthia.kulpa@gmail.com