protótipos mobile na prática
TRANSCRIPT
![Page 1: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/1.jpg)
@richardrx
Protótipos MOBILE na prática
![Page 2: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/2.jpg)
ref: Apple WWDC Keynote 2015
119 É a média de aplicativos instalados em iPhones
![Page 3: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/3.jpg)
Modelo IDEO • Desenhe protótipos • Teste com usuários • Colha Feedback • Melhore • Teste novamente
David Kelley
![Page 4: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/4.jpg)
“If a picture is worth a thousand words, then a prototype is worth a thousand meetings"
David Kelley Ph.D em IHC
![Page 5: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/5.jpg)
Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML
![Page 6: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/6.jpg)
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
![Page 7: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/7.jpg)
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
![Page 8: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/8.jpg)
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
![Page 9: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/9.jpg)
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
![Page 10: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/10.jpg)
Se tornar obcecado por um dispositivo específico é ruim, pois eles mudam muito frequentemente.
![Page 11: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/11.jpg)
Fica lindo na telona. E na telinha?
![Page 12: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/12.jpg)
Botões AcessíveisA 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
![Page 13: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/13.jpg)
FÁCIL
DIFÍCIL
Movimentos FáceisInterfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos.
![Page 14: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/14.jpg)
+
Sketch MirrorSketch
![Page 15: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/15.jpg)
+
Marvel AppSketch
![Page 16: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/16.jpg)
Não metralhe com notificações
![Page 17: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/17.jpg)
SPAM PROPAGANDA INFORMAÇÃO
menos contexto mais contexto
Contexto muda informação para SPAM
![Page 18: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/18.jpg)
Bom exemplo • É personalizável • Tenta entender o usuário • É explicativa
ref: http://emptystat.es
![Page 19: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/19.jpg)
Desenhe para o vazio
![Page 20: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/20.jpg)
Bom exemplo • Não é uma rua sem saída • Imprime personalidade da Marca • Promove uma próxima ação
ref: http://emptystat.es
![Page 21: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/21.jpg)
Conheça o guide de cada plataforma
![Page 22: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/22.jpg)
Saber os guides ajuda • Negociar com desenvolvedores • Ganhar tempo em protótipos • Argumentar com clientes
![Page 24: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/24.jpg)
+ =+
2
![Page 25: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/25.jpg)
3G no Brasil é ruim :(
![Page 26: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/26.jpg)
Qual a utilidade do seu app sem rede?
![Page 27: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/27.jpg)
Bom exemplo • Avisa o usuário • Salva a mensagem depois • Permite ver o conteúdo
![Page 28: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/28.jpg)
3 dicas para aumentar a velocidade
![Page 29: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/29.jpg)
Carregamento progressivo Lidando com a ansiedade do usuário
![Page 30: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/30.jpg)
Conteúdo fictício Lidando com a ansiedade do usuário
![Page 31: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/31.jpg)
Share to
FOLLOWERS DIRECT
SHARE
Write a caption…
Tag People
Add to Photo Map
Name This Location
FILTERS NEXT
NORMAL AMARO MAYFAIR RISE
User
O upload começa aqui A maioria começa aqui
Operando em segundo plano O rápido carregamento do Instagram
![Page 32: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/32.jpg)
Você já testou hoje?
![Page 33: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/33.jpg)
“As soon as you’re involved in a development project, you are atypical by definition.”
Jakob Nielsen Ph.D em IHC
![Page 34: Protótipos mobile na prática](https://reader031.vdocuments.site/reader031/viewer/2022020213/587f74b01a28ab3f4e8b4efb/html5/thumbnails/34.jpg)
A percepção é a experiência.