This document discusses strategies for responsive user experience (UX) design. It covers topics like understanding UX versus interface, taking a content-first approach, using mobile-first design, best practices for responsive design like breakpoints and performance optimization, and selling responsive design proposals to clients. The overall goal is to provide guidance on creating responsive designs that adapt to different devices and deliver a quality user experience across all screens.

1. estratégiapara “responsive ux”
NUNO MB RODRIGUES

2. Multimedia - Web - Mobile - Consultoria
nuno rodrigues
designer
2002
BOLD International
Interação - Interface - UX - Design Thinking

3. responsive
design!
um
projeto
de

5. introdução estratégia para “responsive ux"
UX?

6. introdução estratégia para “responsive ux"
user experiEnce≠interface

7. introdução estratégia para “responsive ux"
estratégia antes de tudo
Cliente quer um “doce” mas…

8. introdução estratégia para “responsive ux"
responsive design é muito, muito difícil.
precisa de tempo e planeamento
A verdade?…

9. responsive
vs
adaptive

10. responsive vs adaptative estratégia para “responsive ux"
responsive adaptive
Conteúdo mantêm-se o mesmo
PRÓS
CONTRAS
É conseguido automaticamente
(adaptação ao ecrã)
Custo
Experiencias algo genéricas, não
optimizadas
Diferenças de comportamentos
em diferentes meios
Tempos de carregamento
PRÓS
CONTRAS
Velocidade
Desenhado para sensações
( gestos mobile friendly …)
Portabilidade para Apps Nativas
Pesadelo de conteúdo
(Diferenças no CMS, etc)
Demasiadas versões
Transformação para nativo
(pode comprometer código)

11. introdução estratégia para “responsive ux"
uma boa opção :
combinar
AWESOME!

12. introdução estratégia para “responsive ux"
responsive
% em

13. FASES
metodologia
ux

14. fases metodologia ux estratégia para “responsive ux"
Objectivos (porquê?)
Requisitos (angariar)
Pesquisa (utilizadores, etc)
Arq. de Informação
(agrupar de conteúdo)
Html (semântico) e CSS

15. content
first

16. primeiro, o conteúdo estratégia para “responsive ux"
Uma aproximação “conteúdo primeiro”
ensina-nos que o design visual deve ser sempre
baseado em conteúdo real.
Só assim saberemos como o apresentar melhor
aos utilizadores.

17. primeiro, o conteúdo estratégia para “responsive ux"
Têm haver com escolher o elemento de HTML
que melhor descreva um determinado pedaço
de informação, em vez de usar o HTML para
definir como a informação deve “parecer”.
HTML semântico
<DIV> ?…. <article>

18. primeiro, o conteúdo estratégia para “responsive ux"
estrutura da
informação

19. primeiro, o conteúdo estratégia para “responsive ux"
Estamos a criar estrutura e planeamento para o
próximo passo…

20. mobile
first

21. mobile first estratégia para “responsive ux"
Luke Wroblewski
“What’s the minimum amount of content and
navigation that we need to make our design useful?
From this, start to define the most minimal
configuration, and work the way back to their
maximum case. ”

22. mobile first estratégia para “responsive ux"
É mais fácil adicionar a um design que tirar
princípio

23. mobile first estratégia para “responsive ux"
Design para Mobile está
cheio de particularidades.

24. a prática

26. a prática estratégia para “responsive ux"
Perceber pontos de quebra. As larguras que fazem a página
quebrar. Wireframing ajuda.
primeira táCtica base
Manter os tempos de carregamento baixos. Ter atenção ao CSS
e à sua optimização. “Progressive enhancement” - Google it.
segunda táCtica base
Optimização de imagens.
terceira táCtica base

27. a prática estratégia para “responsive ux"
Desktop ≠ Mobile
pesquisa
O que é importante? O que é “nice-to-have” para o utilizador?
Conjunto de cenários para dirigir as discussões
Eliminar o factor opinião

28. a prática estratégia para “responsive ux"
Bastante complexo.
passar de informação para interacção
O que cabe ou não no ecrã? Como apresentar o que não se vê?
Interacção ajuda a perceber hierarquias e navegação, ex:
Modais, animações, “acordeões”, etc.

29. a prática estratégia para “responsive ux"
Como se comporta a imagem?
estratégias para as imagens
Crop? Resize?
É necessária?

30. a prática estratégia para “responsive ux"
critérios para concursos
Clean Code
Semantics
Web Technologies
Accessibility
SEO
Performance
Animations
Responsive Design

31. a prática estratégia para “responsive ux"

32. “vender
responsive
design”

33. design é um negócio !
vender responsive design estratégia para “responsive ux"

34. a prática estratégia para “responsive ux"
“Your Strategy Maps How
You’ll Get There”

35. a prática estratégia para “responsive ux"
Ajuda a ter argumentos fortes
Reduz surpresas no projecto

36. a prática estratégia para “responsive ux"
Dizer que sim requer mudanças:
Quando se vende Responsive Design à gestão, é
fácil que passe despercebido o alcance dos
efeitos que esta metodologia tem.
Nos processos editoriais
Na aproximação à interacção e visuais
Na forma como se pensa nos utilizadores

37. a prática estratégia para “responsive ux"
não vendam “responsive design” barato !
…No fim de contas, Está a poupar dinheiro ao cliente.

38. obrigado!
NUNO MB RODRIGUES @nunorod hello@nunorod.com