Protótipos mobile na prática

@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

Sketch

+ =

zeplin.io Amor

+ =+

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

Instagram

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.