Responsive Design - Responsive UX Strategy

3.260 visualizações

Publicada em

Responsive design pode ser descrito como um conjunto de técnicas de design e desenvolvimento web que dão a uma experiência digital a capacidade de se adaptar ao suporte em que está a ser acedida.

No entanto, as mudanças que ocorrem nestas soluções deviam ser mais profundas, pensadas com um mindset virado para a UX.

Responsive UX Strategy apresenta-se como um sistema que integra várias disciplinas, entregando experiências únicas para múltiplos dispositivos com estética apurada e conteúdo relevante, ajustados para responder às expectativas dos utilizadores.

Publicada em: Design
1 comentário
14 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
3.260
No SlideShare
0
A partir de incorporações
0
Número de incorporações
648
Ações
Compartilhamentos
0
Downloads
107
Comentários
1
Gostaram
14
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Responsive Design - Responsive UX Strategy

  1. 1. Responsive Design < Responsive UX Strategy António Ferreira
  2. 2. 1 Responsive Design O que é?
  3. 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. 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. 5. Exemplos de Responsive Design http://www.designmadeingermany.de/magazin/5/
  6. 6. Exemplos de Responsive Design http://www.designingwithdata.com/
  7. 7. Exemplos de Responsive Design http://foodsense.is/
  8. 8. 2 Uma Estratégia Responsive O que faz falta no Responsive Design?
  9. 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. 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. 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. 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. 13. 3 Responsive UX Strategy Introdução ao Sistema
  14. 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. 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. 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. 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. 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. 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. 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. 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. 22. Obrigado.

×