unidade 3

// responsividade e
acessibilidade web
SILVA, Leonardo B. O.
SILVA, Leonardo B. O.

unidade 3
// responsividade e 3.1 Por que ser acessível?
acessibilidade web 3.2 Como projetar aplicações mais acessíveis:
Boas práticas
Acessibilidade

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

Deficiência como
atributo pessoal

imagens: Microsoft design

// Processo de design

Uso: quadro de
necessidades especiais
("The persona spectrum")

Deficiência como
atributo contextual

imagens: Microsoft design

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 espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
// Processo de design

Exemplo: Crianças / alfabetização

baixa visão baixa espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
// Processo de design

Exemplo: Pessoa em trabalho na indústria

baixa visão baixa espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
// Processo de design

Exemplo: Pessoa "na balada"

baixa visão baixa espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
// Processo de design

Exemplo: Pessoa no carro

baixa visão baixa espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
// Processo de design

Exemplo: Pessoa debaixo da luz do sol

baixa visão baixa espectro

audição autista

dificuldade dislexia leitores de

motora tela imagens: giphy.com
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
 fonte: gov.uk
// 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
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
SILVA, Leonardo B. O.

unidade 3
// responsividade e 3.3 Por que ser responsivo?
acessibilidade web 3.4 Tipos de layouts responsivos para telas
diversas
Acessibilidade 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
. 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.

imagem: giphy.com
// Processo de design

Web para desktop

. Tela maior
. Precisão, com mouse ou
trackpad
(permite “mouse-over”)

. Postura sentada,
confortável

. Velocidade de escrita
com teclado . Acesso por longos
períodos de tempo,
menos casual. imagem: giphy.com
// Processo de design

Web para mobile

. Tela menor
. Uso de gestos para navegação

. Toque, com menor precisão

. Qualquer postura

. Acesso mais curto

. Vários acessos por dia

. Teclado pequeno
(maior chance de erro) imagem: giphy.com
// Processo de design

Mobile x Desktop

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

43% 97%

fente: CETIC 2018

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
. 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.

fonte: wrobleski
// Processo de design

Mostly fluid

fonte: medium
// Processo de design

Column drop
. Colunas empilham à medida
que a tela diminui de tamanho.

Ex.: Home-page em um portal de

notícias.

fonte: wrobleski
// Processo de design

Column drop

fonte: the new york times

// Processo de design

Layout shifter

. Layout muda completamente

de posicionamento, dependendo
de como funciona melhor em
cada tela

fonte: wrobleski
// Processo de design

Tiny tweaks

. Mudança mínima, quando em

sites mais minimalistas.

Ex.: Google.com

fonte: wrobleski
// Processo de design

Tiny tweaks

fonte: the new york times

// Processo de design

Off canvas
. Partes do layout e
funcionalidades “fora da tela”

Ex.: Facebook, Discord.

fonte: wrobleski
// 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"

. É 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

fonte: the next web

// Processo de design

Mas não se esqueça do Desktop

. Use do potencial de espaço do

desktop para maximizar a
experiência.
. Não é só um “mobile maior”

fonte: the next web

// Processo de design

Crie layouts fluidos . Layouts fluidos são mais

adaptáveis.
. Evitam rolagem lateral de
páginas.

fonte: ux tricks
// Processo de design

Diferentes dispositivos podem requerer diferentes

navegações
. 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

fonte: the next web

// 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" . Evite interações dependentes

de “mouse-over” em mobile.
. Pense em gestos.
. Considere o alcance da mão do
usuário.

fonte: the next web

// Processo de design

Considere performance/ peso do conteúdo

. Imagens grandes para telas

grandes, imagens pequenas
para telas pequenas.
. Internet móvel x Internet local
. Considere tempo de
carregamento.
. Teste no “pior contexto”.

imagem: giphy.com
// 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 device

fonte: https://www.mydevice.io
// design gráfico e repertório visual

Material.io - grid

fonte: https://material.io/design/layout/
 ~ obrigado! ~

unidade 3
// responsividade e
acessibilidade web
SILVA, Leonardo B. O.