YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: Responsive Design - Responsive UX Strategy

Responsive Design < Responsive UX Strategy

António Ferreira

Page 2: Responsive Design - Responsive UX Strategy

1 Responsive DesignO que é?

Page 3: Responsive Design - Responsive UX Strategy

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.

Page 4: Responsive Design - Responsive UX Strategy

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:

Page 5: Responsive Design - Responsive UX Strategy

Exemplos de Responsive Design

http://www.designmadeingermany.de/magazin/5/

Page 6: Responsive Design - Responsive UX Strategy

http://www.designingwithdata.com/

Exemplos de Responsive Design

Page 7: Responsive Design - Responsive UX Strategy

http://foodsense.is/

Exemplos de Responsive Design

Page 8: Responsive Design - Responsive UX Strategy

2 Uma Estratégia ResponsiveO que faz falta no Responsive Design?

Page 9: Responsive Design - Responsive UX Strategy

* 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

Page 10: Responsive Design - Responsive UX Strategy

?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

Page 11: Responsive Design - Responsive UX Strategy

!A 1ª pergunta deverá ser sempre

sobre intenções e objectivos de conversãopartilhados entre o cliente e o utilizador...

Uma Estratégia Responsive

Page 12: Responsive Design - Responsive UX Strategy

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

Page 13: Responsive Design - Responsive UX Strategy

3 Responsive UX StrategyIntrodução ao Sistema

Page 14: Responsive Design - 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.

Responsive UX Strategy

Page 15: Responsive Design - 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

Page 16: Responsive Design - Responsive UX 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

Page 17: Responsive Design - Responsive UX Strategy

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

Page 18: Responsive Design - Responsive UX Strategy

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

Page 19: Responsive Design - Responsive UX Strategy

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

Page 20: Responsive Design - Responsive UX Strategy

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

Page 21: Responsive Design - Responsive UX Strategy

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

Page 22: Responsive Design - Responsive UX Strategy

Obrigado.


Related Documents