O documento discute estratégias de design responsivo e UX. Ele define design responsivo como uma abordagem que adapta a estrutura e design de um site ou app às diferentes resoluções de tela. Também discute como uma estratégia de UX responsiva deve ir além de simplesmente adaptar ao tamanho da tela e focar na experiência do usuário ao priorizar conteúdo, aproveitar recursos de dispositivos e medir o comportamento dos usuários.

1. Responsive Design < Responsive UX Strategy
António Ferreira

2. 1 Responsive Design
O que é?

3. Responsive Design
Um conjunto de técnicas de design
e desenvolvimento web que permitem
criar e dar a um site ou app a capacidade
de adaptação da sua estrutura e grafismo
à resolução do ecrã em que está a ser
visualizado.

4. Responsive Design
O que NÃO É Responsive Design:
!
OÇÃO
ROM
P
Um truque giro para
impressionar os clientes
ao redimensionar
a janela de browser.
Uma maneira
de vender um site
Mobile ou APP nativa
a preço de saldo.
Uma solução
“one size fits all”
sempre feita igual
em todos os projetos

5. Exemplos de Responsive Design
http://www.designmadeingermany.de/magazin/5/

6. Exemplos de Responsive Design
http://www.designingwithdata.com/

7. Exemplos de Responsive Design
http://foodsense.is/

8. 2 Uma Estratégia Responsive
O que faz falta no Responsive Design?

9. Uma Estratégia Responsive
As mudanças que ocorrem numa solução
de Responsive Design deviam ser mais
profundas que o resultado de um simples
exercício com resoluções de ecrã,
pensadas com um espectro maior em mente:
um mindset virado para a UX*
* User Experience = Experiência de Utilizador

10. Uma Estratégia Responsive
?
A 1ª pergunta que tem de ocorrer
ao começar um projeto responsive
nunca deverá tocar no tema do browser
ou da resolução de ecrã
(são importantes, mas não são prioritários)

11. Uma Estratégia Responsive
!
A 1ª pergunta deverá ser sempre
sobre intenções e objectivos de conversão
partilhados entre o cliente e o utilizador...

12. Uma Estratégia Responsive
... e dependendo da resposta,
começamos a análise:
O objectivo é
vender para o target
smartphone?
Vamos tornar a compra
de um produto natural,
fazendo o utilizador
comprar sem medos.
O tablet é
relevante para o
target do cliente?
Vamos criar formas
de acrescentar valor
à experiência
tirando partido deste
dispositivo.
O smartphone é muito
usado para aceder
a um tipo de conteúdo?
Vamos arranjar uma
maneira de melhorar
a experiência quando
os utilizadores
o fazem.
Vamos responder com
uma estratégia responsive.

13. 3 Responsive UX Strategy
Introdução ao Sistema

14. Responsive UX Strategy
Um sistema que integra web design,
conteúdos e desenvolvimento, entregando
experiências únicas que se adaptam a
múltiplos dispositivos com estética apurada
e conteúdo relevante, acessíveis através de
um interface natural e ajustado para
responder às expectativas do utilizador.

15. Responsive UX Strategy
6 Vectores de Análise
Organizar e
Prioritizar Conteúdo
Medir, Analisar.
Enxaguar e Repetir
Optimizar Performance
de Carregamento
Aproveitar Funcionalidades
dos Dispositivos
Responsive
UX Strategy
Ajustar Layout,
Navegação e Grafismo
Substituir e
Adaptar Contéudo

16. Responsive UX Strategy
Organizar e
Prioritizar Conteúdo
Atribuir importância ao conteúdo relativa ao dispositivo: Ajustar a prioridade
do conteúdo tendo em conta os targets Desktop, Tablet ou Smartphone.
Novo OS
Windows 8
Malas para
Portáteis
NOVO
Promoção
Conectividade
Móvel
Menu +
Promoção
Acessórios
Smartphone
Conectividade
Móvel
Acessórios Smartphone
3

17. Responsive UX Strategy
Aproveitar Funcionalidades
dos Dispositivos
Enriquecer e adicionar valor à experiência com interações
que sejam naturais e façam sentido em ambiente Tablet / Smartphone.
Gestos
1
2
- Tap
- Swipe
- Pinch
- Rotate, ...
Hardware
- Câmara Fotográfica
- Acelerómetro
- Localização GPS
- Microfone, ...

18. Responsive UX Strategy
Ajustar Layout,
Navegação e Grafismo
Aplicar conceitos de Responsive Design, acomodando o grafismo
e o conteúdo ao tamanho do ecrã dos dispositivos. Melhorar a leitura
e aproximar a navegação da experiência nativa do dispositivo móvel.
Item 1
Item 2
Item 3
Item 4
Item 5
Menu +
2
1
1
3
2
3

19. Responsive UX Strategy
Substituir e
Adaptar Contéudo
Mostrar a informação que é relevante para quem está a aceder através de um
dispositivo específico, ocultar a que não interessa. Adaptar o tamanho
e o discurso do conteúdo consoante objectivos de conversão no mobile.
desktop
clique para login
pesquisar
Venha conhecer o melhor sítio
para passar férias com a família
em plena natureza e a preços
vantajosos anti-crise.
ver mais
smartphone
tap para login
Conheça o melhor sítio para as
férias em família: natureza a preços
anti-crise.
ver mais

20. Responsive UX Strategy
Optimizar Performance
de Carregamento ( responsible design )
User técnicas de compressão de dados e de substituição de conteúdo visual
tendo em mente as limitações dos planos de dados móveis dos dispositivos
mais antigos. Optimizar construção do código HTML, CSS e JS.
Back-office
Minimizar
HTTP requests
Juntar vários requests num
(Quick Concat*)
Front-end
Media queries
Media attribute
Scaled vector elements
Icon Fonts
Data-media
specific includes
Minify e Gzip
JS Selective Loading
(Enhance JS)
CSS e JS Crafting
(1º nativo,
depois framework)
Optimização de Imagem
*https://github.com/filamentgroup/quickconcat

21. Responsive UX Strategy
Medir, Analisar.
Enxaguar e Repetir
As métricas e análise do comportamento dos utilizadores é essencial
para perceber até que ponto as técnicas utilizadas para optimizar a experiência
através dos dispositivos.
testes de usabilidade
analytics
user
feedback
testes A-B

22. Obrigado.