Top Banner

Click here to load reader

Responsive Design - Responsive UX Strategy

Mar 21, 2017

ReportDownload

Design

  • Responsive Design < Responsive UX Strategy

    Antnio Ferreira

  • 1 Responsive DesignO que ?

  • Responsive Design

    Um conjunto de tcnicas de design e desenvolvimento web que permitem

    criar e dar a um site ou app a capacidade de adaptao da sua estrutura e grafismo

    resoluo 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 preo de saldo.

    Uma soluoone size fits allsempre feita igualem todos os projetos

    PROMOO!

    O que NO Responsive Design:

  • Exemplos de Responsive Design

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

  • http://www.designingwithdata.com/

    Exemplos de Responsive Design

  • http://foodsense.is/

    Exemplos de Responsive Design

  • 2 Uma Estratgia ResponsiveO que faz falta no Responsive Design?

  • * User Experience = Experincia de Utilizador

    As mudanas que ocorrem numa soluo de Responsive Design deviam ser mais

    profundas que o resultado de um simples exerccio com resolues de ecr,

    pensadas com um espectro maior em mente: um mindset virado para a UX*

    Uma Estratgia Responsive

  • ?A 1 pergunta que tem de ocorrer

    ao comear um projeto responsive nunca dever tocar no tema do browser

    ou da resoluo de ecr(so importantes, mas no so prioritrios)

    Uma Estratgia Responsive

  • !A 1 pergunta dever ser sempre

    sobre intenes e objectivos de conversopartilhados entre o cliente e o utilizador...

    Uma Estratgia Responsive

  • ... e dependendo da resposta,comeamos a anlise:

    Uma Estratgia 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

    experinciatirando partido deste

    dispositivo.

    O smartphone muito usado para aceder

    a um tipo de contedo?

    Vamos arranjar umamaneira de melhorar

    a experincia quandoos utilizadores

    o fazem.

    Vamos responder comuma estratgia responsive.

  • 3 Responsive UX StrategyIntroduo ao Sistema

  • Um sistema que integra web design, contedos e desenvolvimento, entregando

    experincias nicas que se adaptam a mltiplos dispositivos com esttica apurada e contedo relevante, acessveis atravs de

    um interface natural e ajustado para responder s expectativas do utilizador.

    Responsive UX Strategy

  • 6 Vectores de Anlise

    Responsive UX Strategy

    Ajustar Layout,Navegao e Grafismo

    Aproveitar Funcionalidadesdos Dispositivos

    Organizar e Prioritizar Contedo

    Substituir e Adaptar Contudo

    Medir, Analisar.Enxaguar e Repetir

    Optimizar Performancede Carregamento

    ResponsiveUX Strategy

  • Organizar e Prioritizar ContedoAtribuir importncia ao contedo relativa ao dispositivo: Ajustar a prioridade do contedo tendo em conta os targets Desktop, Tablet ou Smartphone.

    Novo OSWindows 8

    PromooAcessrios Smartphone

    Malas paraPortteis

    ConectividadeMvel

    Menu +

    3

    PromooAcessrios Smartphone

    ConectividadeMvel

    Responsive UX Strategy

    NOVO

  • Aproveitar Funcionalidadesdos DispositivosEnriquecer e adicionar valor experincia com interaes que sejam naturais e faam sentido em ambiente Tablet / Smartphone.

    Responsive UX Strategy

    1 2

    Hardware- Cmara Fotogrfica- Acelermetro- Localizao GPS- Microfone, ...

    Gestos- Tap- Swipe- Pinch- Rotate, ...

  • Responsive UX Strategy

    Ajustar Layout,Navegao e GrafismoAplicar conceitos de Responsive Design, acomodando o grafismo e o contedo ao tamanho do ecr dos dispositivos. Melhorar a leitura e aproximar a navegao da experincia nativa do dispositivo mvel.

    12

    3

    Item 1 Item 2 Item 3 Item 4 Item 5 Menu +

    1

    2

    3

  • Substituir e Adaptar ContudoMostrar a informao que relevante para quem est a aceder atravs de um dispositivo especfico, ocultar a que no interessa. Adaptar o tamanho e o discurso do contedo consoante objectivos de converso no mobile.

    Responsive UX Strategy

    clique para login

    tap para login

    pesquisar

    Venha conhecer o melhor stio para passar frias com a famliaem plena natureza e a preosvantajosos anti-crise.

    Conhea o melhor stio para asfrias em famlia: natureza a preosanti-crise.

    desktop

    smartphone

    ver mais

    ver mais

  • Optimizar Performancede Carregamento ( responsible design )User tcnicas de compresso de dados e de substituio de contedo visualtendo em mente as limitaes dos planos de dados mveis dos dispositivosmais antigos. Optimizar construo do cdigo HTML, CSS e JS.

    Responsive UX Strategy

    CSS e JS Crafting(1 nativo, depois framework)

    JS Selective Loading(Enhance JS)

    Media queries

    Media attribute

    Optimizao de Imagem

    Scaled vector elements

    Icon Fonts

    Front-end

    Minify e Gzip

    MinimizarHTTP requests

    Juntar vrios requests num(Quick Concat*)

    Data-mediaspecific includes

    Back-oce

    *https://github.com/filamentgroup/quickconcat

  • Medir, Analisar.Enxaguar e RepetirAs mtricas e anlise do comportamento dos utilizadores essencialpara perceber at que ponto as tcnicas utilizadas para optimizar a experinciaatravs dos dispositivos.

    Responsive UX Strategy

    analyticsuserfeedback

    testes A-B

    testes de usabilidade

  • Obrigado.

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.