UNIDADE 3 - RESPONSIVIDADE E ACESSIBILIDADE WEB

Prévia do material em texto

unidade 3
SILVA, Leonardo B. O.
// responsividade e 
acessibilidade web
unidade 3
SILVA, Leonardo B. O.
// responsividade e 
acessibilidade web
Acessibilidade
3.1 Por que ser acessível?
3.2 Como projetar aplicações mais acessíveis: 
Boas práticas
Responsividade
Acessibilidade
// processo de design 
SILVA, Leonardo B. O.
imagem: giphy.com
Por que ser acessível?
// processo de design
imagem: giphy.com
// Processo de design
O que é acessibilidade?
Accessibility: 1. The qualities that make an 
experience open to all. 2. A professional 
discipline aimed at achieving No. 1.
imagens: Microsoft design
// Processo de design
Uso: pessoas com deficiências
imagens: Microsoft design
Deficiência como 
atributo pessoal
// Processo de design
Uso: quadro de 
necessidades especiais 
("The persona spectrum")
imagens: Microsoft design
Deficiência como 
atributo contextual
Todos nós temos necessidade de algum 
grau de acessibilidade em algum 
momento.
Quais as necessidades de acessibilidade 
do seu usuário?
// Processo de design
Exemplo: Pessoas mais velhas
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela imagens: giphy.com
// Processo de design
Exemplo: Crianças / alfabetização
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela imagens: giphy.com
// Processo de design
Exemplo: Pessoa em trabalho na indústria
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela imagens: giphy.com
// Processo de design
Exemplo: Pessoa "na balada"
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela imagens: giphy.com
// Processo de design
Exemplo: Pessoa no carro
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela imagens: giphy.com
// Processo de design
Exemplo: Pessoa debaixo da luz do sol
imagens: giphy.com
baixa visão baixa 
audição
espectro 
autista
dificuldade
motora
dislexia leitores de
tela
Qual a situação de uso do seu produto 
digital?
Quais as necessidades de acessibilidade 
do seu usuário?
Como projetar aplicações mais 
acessíveis: Boas práticas
// processo de design
imagem: giphy.com
// Processo de design
Baixa visão
fonte: gov.uk
// Processo de design
Usuários de leitores de tela
fonte: gov.uk
// Processo de design
Deficiência física ou motora
fonte: gov.uk
// Processo de design
Dislexia
fonte: gov.uk
// Processo de design
Deficiência auditiva
fonte: gov.uk
// Processo de design
Espectro autista
fonte: gov.uk
São boas práticas de design EM GERAL
Um bom design acessível
é um bom design para TODOS.
Responsividade
// processo de design 
SILVA, Leonardo B. O.
imagem: giphy.com
unidade 3
SILVA, Leonardo B. O.
// responsividade e 
acessibilidade web
Acessibilidade
3.3 Por que ser responsivo?
3.4 Tipos de layouts responsivos para telas 
diversas
3.5 Responsividade: Boas práticas
Responsividade
Por que ser responsivo?
// processo de design
imagem: giphy.com
// Processo de design
O que é responsividade?
Responsive Web Design: Responsive web design (RWD) is a 
web development approach that creates dynamic changes 
to the appearance of a website, depending on the screen 
size and orientation of the device being used to view it. 
RWD is one approach to the problem of designing for the 
multitude of devices available to customers, ranging from 
tiny phones to huge desktop monitors.
imagens: Norman Nielsen Group
// Processo de design
Projetar para diversidade de dispositivos
x Projetar para telas/ funcionalidades
imagem: giphy.com
. A experiência com seu projeto 
não será somente no 
“dispositivo ideal”
. Usuários usam em diferentes 
dispositivos.
. Projetar para telas torna seu 
layout mais “future proof” e 
adaptável para diversos tipos de 
dispositivos.
// Processo de design
Web para desktop
. Tela maior
. Precisão, com mouse ou 
trackpad
(permite “mouse-over”)
. Velocidade de escrita 
com teclado
. Postura sentada, 
confortável
. Acesso por longos 
períodos de tempo, 
menos casual. imagem: giphy.com
// Processo de design
Web para mobile
. Tela menor
. Toque, com menor precisão
. Teclado pequeno 
(maior chance de erro)
. Qualquer postura
. Vários acessos por dia
. Uso de gestos para navegação
. Acesso mais curto
imagem: giphy.com
// Processo de design
Mobile x Desktop
x
imagem: giphy.com
// Processo de design
Tendência de aumento de uso de mobile
fente: CISCO 2019
// Processo de design
Tendência de aumento de uso de mobile
fente: CETIC 2018
97%43%
O acesso mobile só aumenta, mas as 
pessoas não deixam de usar o 
computador (e outros dispositivos).
Temos que projetar responsivamente, 
para todo tipo de tela e interação.
Tipos de layouts responsivos 
para telas diversas
// processo de design
imagem: giphy.com
// Processo de design
Mostly fluid
fonte: wrobleski
. Margens laterais “brancas” em 
telas muito grandes, evitando 
descaracterização do conteúdo.
~Ex.: Linhas de texto longas 
demais que dificultariam a 
leitura
. Colunas empilhadas em mobile.
Ex.: Página de artigo em um site 
de notícias.
// Processo de design
Mostly fluid
fonte: medium
// Processo de design
Column drop
fonte: wrobleski
. Colunas empilham à medida 
que a tela diminui de tamanho.
Ex.: Home-page em um portal de 
notícias.
// Processo de design
Column drop
fonte: the new york times
// Processo de design
Layout shifter
fonte: wrobleski
. Layout muda completamente 
de posicionamento, dependendo 
de como funciona melhor em 
cada tela
// Processo de design
Tiny tweaks
fonte: wrobleski
. Mudança mínima, quando em 
sites mais minimalistas.
Ex.: Google.com
// Processo de design
Tiny tweaks
fonte: the new york times
// Processo de design
Off canvas
fonte: wrobleski
. Partes do layout e 
funcionalidades “fora da tela”
Ex.: Facebook, Discord.
// Processo de design
Off canvas
fonte: the new york times
Entenda qual tipo (ou tipos) de fluidez a 
sua interação demanda.
Responsividade: Boas práticas
// processo de design
imagem: giphy.com
// Processo de design
Projete "mobile-first"
fonte: the next web
. É mais fácil “crescer” um 
layout do que diminuir.
. É possível que grande parte 
dos seus usuários acessarão seu 
conteúdo majoritariamente via 
mobile.
imagem: giphy.com
// Processo de design
Mas não se esqueça do Desktop
fonte: the next web
. Use do potencial de espaço do 
desktop para maximizar a 
experiência.
. Não é só um “mobile maior”
// Processo de design
Crie layouts fluidos
fonte: ux tricks
. Layouts fluidos são mais 
adaptáveis.
. Evitam rolagem lateral de 
páginas.
// Processo de design
Diferentes dispositivos podem requerer diferentes 
navegações
fonte: the next web
. Pode ser necessário 
redesenhar toda a experiência 
do site.
. Normalmente mais necessário 
em sites focados em 
funcionalidades ao invés de 
conteúdo.
imagem: giphy.com
// Processo de design
Não "esconda" conteúdo
. Priorize conteúdo, mas não 
esconda
. O usuário "não está 
necessariamente com pressa"
. Quer o mesmo conteúdo, mas 
com interação mobile.
// Processo de design
Projete para o "touch"
fonte: the next web
. Evite interações dependentes 
de “mouse-over” em mobile.
. Pense em gestos.
. Considere o alcance da mão do 
usuário.
// Processo de design
Considere performance/ peso do conteúdo
imagem: giphy.com
. Imagens grandes para telas 
grandes, imagens pequenas 
para telas pequenas.
. Internet móvel x Internet local
. Considere tempo de 
carregamento.
. Teste no “pior contexto”.
// Processo de design
Não use só “Lorem Ipsum”
. O conteúdo real pode 
“quebrar” o seu layout: ser 
grande ou pequeno demais.
. Lorem Ipsum cria a ilusão de 
conteúdos de tamanho ideal.
imagem: giphy.com
Teste em diferentes dispositivos!
(mobile, desktop, tablet, etc.)
Recomendações
// Processo de design
My devicefonte: https://www.mydevice.io
// design gráfico e repertório visual
Material.io - grid
fonte: https://material.io/design/layout/
SILVA, Leonardo B. O.
// responsividade e 
acessibilidade web
~ obrigado! ~
unidade 3