Upload
richard-jesus
View
792
Download
0
Embed Size (px)
Citation preview
@richardrx
Protótipos MOBILE na prática
ref: Apple WWDC Keynote 2015
119 É a média de aplicativos instalados em iPhones
Modelo IDEO • Desenhe protótipos • Teste com usuários • Colha Feedback • Melhore • Teste novamente
David Kelley
“If a picture is worth a thousand words, then a prototype is worth a thousand meetings"
David Kelley Ph.D em IHC
Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML
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
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
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
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
Se tornar obcecado por um dispositivo específico é ruim, pois eles mudam muito frequentemente.
Fica lindo na telona. E na telinha?
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
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.
+
Sketch MirrorSketch
+
Marvel AppSketch
Não metralhe com notificações
SPAM PROPAGANDA INFORMAÇÃO
menos contexto mais contexto
Contexto muda informação para SPAM
Bom exemplo • É personalizável • Tenta entender o usuário • É explicativa
ref: http://emptystat.es
Desenhe para o vazio
Bom exemplo • Não é uma rua sem saída • Imprime personalidade da Marca • Promove uma próxima ação
ref: http://emptystat.es
Conheça o guide de cada plataforma
Saber os guides ajuda • Negociar com desenvolvedores • Ganhar tempo em protótipos • Argumentar com clientes
+ =+
2
3G no Brasil é ruim :(
Qual a utilidade do seu app sem rede?
Bom exemplo • Avisa o usuário • Salva a mensagem depois • Permite ver o conteúdo
3 dicas para aumentar a velocidade
Carregamento progressivo Lidando com a ansiedade do usuário
Conteúdo fictício Lidando com a ansiedade do usuário
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
Você já testou hoje?
“As soon as you’re involved in a development project, you are atypical by definition.”
Jakob Nielsen Ph.D em IHC
A percepção é a experiência.