responsive design - responsive ux strategy
TRANSCRIPT
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 servisualizado.
Responsive Design
Um truque giro para impressionar os clientes ao redimensionar a janela de browser.
Uma maneira de vender um site Mobile ou APP nativaa preço de saldo.
Uma solução“one size fits all”sempre feita igualem todos os projetos
PROMOÇÃO!
O que NÃO É Responsive Design:
* User Experience = Experiência de Utilizador
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*
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)
Uma Estratégia Responsive
!A 1ª pergunta deverá ser sempre
sobre intenções e objectivos de conversãopartilhados entre o cliente e o utilizador...
Uma Estratégia Responsive
... e dependendo da resposta,começamos a análise:
Uma Estratégia Responsive
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ênciatirando partido deste
dispositivo.
O smartphone é muito usado para aceder
a um tipo de conteúdo?
Vamos arranjar umamaneira de melhorar
a experiência quandoos utilizadores
o fazem.
Vamos responder comuma estratégia responsive.
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.
Responsive UX Strategy
6 Vectores de Análise
Responsive UX Strategy
Ajustar Layout,Navegação e Grafismo
Aproveitar Funcionalidadesdos Dispositivos
Organizar e Prioritizar Conteúdo
Substituir e Adaptar Contéudo
Medir, Analisar.Enxaguar e Repetir
Optimizar Performancede Carregamento
ResponsiveUX Strategy
Organizar e Prioritizar ConteúdoAtribuir importância ao conteúdo relativa ao dispositivo: Ajustar a prioridade do conteúdo tendo em conta os targets Desktop, Tablet ou Smartphone.
Novo OSWindows 8
PromoçãoAcessórios Smartphone
Malas paraPortáteis
ConectividadeMóvel
Menu +
3
PromoçãoAcessórios Smartphone
ConectividadeMóvel
Responsive UX Strategy
NOVO
Aproveitar Funcionalidadesdos DispositivosEnriquecer e adicionar valor à experiência com interações que sejam naturais e façam sentido em ambiente Tablet / Smartphone.
Responsive UX Strategy
1 2
Hardware- Câmara Fotográfica- Acelerómetro- Localização GPS- Microfone, ...
Gestos- Tap- Swipe- Pinch- Rotate, ...
Responsive UX Strategy
Ajustar Layout,Navegação e GrafismoAplicar 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.
12
3
Item 1 Item 2 Item 3 Item 4 Item 5 Menu +
1
2
3
Substituir e Adaptar ContéudoMostrar 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.
Responsive UX Strategy
clique para login
tap para login
pesquisar
Venha conhecer o melhor sítio para passar férias com a famíliaem plena natureza e a preçosvantajosos anti-crise.
Conheça o melhor sítio para asférias em família: natureza a preçosanti-crise.
desktop
smartphone
ver mais
ver mais
Optimizar Performancede Carregamento ( responsible design )User técnicas de compressão de dados e de substituição de conteúdo visualtendo em mente as limitações dos planos de dados móveis dos dispositivosmais antigos. Optimizar construção do código HTML, CSS e JS.
Responsive UX Strategy
CSS e JS Crafting(1º nativo, depois framework)
JS Selective Loading(Enhance JS)
Media queries
Media attribute
Optimização de Imagem
Scaled vector elements
Icon Fonts
Front-end
Minify e Gzip
MinimizarHTTP requests
Juntar vários requests num(Quick Concat*)
Data-mediaspecific includes
Back-o�ce
*https://github.com/filamentgroup/quickconcat
Medir, Analisar.Enxaguar e RepetirAs métricas e análise do comportamento dos utilizadores é essencialpara perceber até que ponto as técnicas utilizadas para optimizar a experiênciaatravés dos dispositivos.
Responsive UX Strategy
analyticsuserfeedback
testes A-B
testes de usabilidade