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

1. @richardrx
Protótipos
MOBILE
na prática

2. ref: Apple WWDC Keynote 2015
119É a média de aplicativos instalados em iPhones

3. Modelo IDEO
• Desenhe protótipos
• Teste com usuários
• Colha Feedback
• Melhore
• Teste novamente
David Kelley

4. “If a picture is worth a thousand words, then a
prototype is worth a thousand meetings"
David Kelley
Ph.D em IHC

5. Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML

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. 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. 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. 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. Se tornar obcecado por um dispositivo específico é
ruim, pois eles mudam muito frequentemente.

11. Fica lindo na telona. E na telinha?

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. 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. +
Sketch MirrorSketch

15. +
Marvel AppSketch

16. Não metralhe com notificações

17. SPAM PROPAGANDA INFORMAÇÃO
menos contexto mais contexto
Contexto muda informação para SPAM

18. Bom exemplo
• É personalizável
• Tenta entender o usuário
• É explicativa
ref: http://emptystat.es

19. Desenhe para o vazio

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. Conheça o guide de cada plataforma

22. Saber os guides ajuda
• Negociar com desenvolvedores
• Ganhar tempo em protótipos
• Argumentar com clientes

23. Sketch
+ =
zeplin.io Amor

24. + =+
2

25. 3G no Brasil é ruim :(

26. Qual a utilidade do
seu app sem rede?

27. Bom exemplo
• Avisa o usuário
• Salva a mensagem depois
• Permite ver o conteúdo

28. 3 dicas para aumentar a velocidade

29. Carregamento progressivo
Lidando com a ansiedade do usuário

30. Conteúdo fictício
Lidando com a ansiedade do usuário

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. Você já testou hoje?

33. “As soon as you’re involved in a development
project, you are atypical by definition.”
Jakob Nielsen
Ph.D em IHC

34. A percepção é a experiência.