"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Responsive Design

499 visualizações

Publicada em

É necessário uma boa estratégia e preparação para implementar Responsive Design. Na fase de preparação deve-se preparar a estrutura, filtrar requisitos do cliente e apresentar possíveis soluções antes de fazer Design Visual do website.

Publicada em: Engenharia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
499
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Responsive Design

  1. 1. estratégiapara “responsive ux” NUNO MB RODRIGUES
  2. 2. Multimedia - Web - Mobile - Consultoria nuno rodrigues designer 2002 BOLD International Interação - Interface - UX - Design Thinking
  3. 3. responsive design! um projeto de
  4. 4. introdução estratégia para “responsive ux" UX?
  5. 5. introdução estratégia para “responsive ux" user experiEnce≠interface
  6. 6. introdução estratégia para “responsive ux" estratégia antes de tudo Cliente quer um “doce” mas…
  7. 7. introdução estratégia para “responsive ux" responsive design é muito, muito difícil. precisa de tempo e planeamento A verdade?…
  8. 8. responsive vs adaptive
  9. 9. 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)
  10. 10. introdução estratégia para “responsive ux" uma boa opção : combinar AWESOME!
  11. 11. introdução estratégia para “responsive ux" responsive % em
  12. 12. FASES metodologia ux
  13. 13. 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
  14. 14. content first
  15. 15. 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.
  16. 16. 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>
  17. 17. primeiro, o conteúdo estratégia para “responsive ux" estrutura da informação
  18. 18. primeiro, o conteúdo estratégia para “responsive ux" Estamos a criar estrutura e planeamento para o próximo passo…
  19. 19. mobile first
  20. 20. 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. ”
  21. 21. mobile first estratégia para “responsive ux" É mais fácil adicionar a um design que tirar princípio
  22. 22. mobile first estratégia para “responsive ux" Design para Mobile está cheio de particularidades.
  23. 23. a prática
  24. 24. 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
  25. 25. 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
  26. 26. 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.
  27. 27. a prática estratégia para “responsive ux" Como se comporta a imagem? estratégias para as imagens Crop? Resize? É necessária?
  28. 28. a prática estratégia para “responsive ux" critérios para concursos Clean Code Semantics Web Technologies Accessibility SEO Performance Animations Responsive Design
  29. 29. a prática estratégia para “responsive ux"
  30. 30. “vender responsive design”
  31. 31. design é um negócio ! vender responsive design estratégia para “responsive ux"
  32. 32. a prática estratégia para “responsive ux" “Your Strategy Maps How You’ll Get There”
  33. 33. a prática estratégia para “responsive ux" Ajuda a ter argumentos fortes Reduz surpresas no projecto
  34. 34. 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
  35. 35. a prática estratégia para “responsive ux" não vendam “responsive design” barato ! …No fim de contas, Está a poupar dinheiro ao cliente.
  36. 36. obrigado! NUNO MB RODRIGUES @nunorod hello@nunorod.com

×