Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Protótipos mobile na prática

1,305 views

Published on

Módulo de prototipação para interfaces mobile no curso de arquitetura de informação do Edu Agni

Published in: Design

Protótipos mobile na prática

  1. 1. @richardrx Protótipos MOBILE na prática
  2. 2. ref: Apple WWDC Keynote 2015 119É a média de aplicativos instalados em iPhones
  3. 3. Modelo IDEO • Desenhe protótipos • Teste com usuários • Colha Feedback • Melhore • Teste novamente David Kelley
  4. 4. “If a picture is worth a thousand words, then a prototype is worth a thousand meetings" David Kelley Ph.D em IHC
  5. 5. Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML
  6. 6. Protótipo em papel Rápidos e simples Feedback rápido Inclusivos Pouco estéticos Difíceis de compartilhar Não são auto-explicativos Wireframe navegável Wireframes em Motion Protótipo HTML
  7. 7. Protótipo em papel Detalhados Define conteúdo Explica comportamentos Difíceis para testes reais Exigem cultura digital Não é reaproveitado Wireframe navegável Wireframes em Motion Protótipo HTML
  8. 8. Protótipo em papel Emocionais Feedback de qualidade Comportamento dinâmico Tempo de produção Conhecimento em software Necessita estágio avançado Wireframe navegável Wireframes em Motion Protótipo HTML
  9. 9. Protótipo em papel Testa interação Perfeito para fluxos Experiência quase real Conhecimento específico Tempo de desenvolvimento Limita o processo de design Wireframe navegável Wireframes em Motion Protótipo HTML
  10. 10. Se tornar obcecado por um dispositivo específico é ruim, pois eles mudam muito frequentemente.
  11. 11. Fica lindo na telona. E na telinha?
  12. 12. Botões Acessíveis A localização dos elementos deve ser levada em conta na criação de soluções onde o uso mobile seja foco da ação. FÁCIL DIFÍCIL
  13. 13. FÁCIL DIFÍCIL Movimentos Fáceis Interfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos.
  14. 14. + Sketch MirrorSketch
  15. 15. + Marvel AppSketch
  16. 16. Não metralhe com notificações
  17. 17. SPAM PROPAGANDA INFORMAÇÃO menos contexto mais contexto Contexto muda informação para SPAM
  18. 18. Bom exemplo • É personalizável • Tenta entender o usuário • É explicativa ref: http://emptystat.es
  19. 19. Desenhe para o vazio
  20. 20. Bom exemplo • Não é uma rua sem saída • Imprime personalidade da Marca • Promove uma próxima ação ref: http://emptystat.es
  21. 21. Conheça o guide de cada plataforma
  22. 22. Saber os guides ajuda • Negociar com desenvolvedores • Ganhar tempo em protótipos • Argumentar com clientes
  23. 23. Sketch + = zeplin.io Amor
  24. 24. + =+ 2
  25. 25. 3G no Brasil é ruim :(
  26. 26. Qual a utilidade do seu app sem rede?
  27. 27. Bom exemplo • Avisa o usuário • Salva a mensagem depois • Permite ver o conteúdo
  28. 28. 3 dicas para aumentar a velocidade
  29. 29. Carregamento progressivo Lidando com a ansiedade do usuário
  30. 30. Conteúdo fictício Lidando com a ansiedade do usuário
  31. 31. Share to FOLLOWERS DIRECT SHARE Write a caption… Tag People Add to Photo Map Name This Location FILTERS NEXT NORMAL AMARO MAYFAIR RISE Instagram User O upload começa aqui A maioria começa aqui Operando em segundo plano O rápido carregamento do Instagram
  32. 32. Você já testou hoje?
  33. 33. “As soon as you’re involved in a development project, you are atypical by definition.” Jakob Nielsen Ph.D em IHC
  34. 34. A percepção é a experiência.

×