Top Banner
48

Interface Pixel a Pixel v2

May 25, 2015

Download

Design

Thiago Vieira

Lidar com pessoas não é algo fácil, algumas pessoas tem o dom e o treinamento pra isso, como pessoal que trabalha com vendas e tudo mais, porém uma interface é o canal direto que temos para o sistema, a lógica, lidar com o nosso usuário, aquele pelo qual tanto almejamos a atenção e que ele complete a tarefa a qual queremos que ele desenvolva dentro do nosso aplicativo.

Neste contexto vamos abordar alguns assuntos pontuais para nos ajudar e não bater a cabeça na fase de projeto e MVP (Minimum Viable Product) de um app.

Boas Práticas de interface, usuário e experiência

Evite Splashscreen
Com o intuito de dar passar ao usuário a experiência de que o aplicativo realmente está em carregamento, a splashscreen serve como uma porta fechada onde o usuário está esperando você "arrumar a bagunça" para depois abrir ela. Para melhorar esta experiência, as guidelines já introduzem uma boa prática de você utilizar uma imagem com a estrutura do seu layout como splashscreen, exemplo: Facebook, Vine, Path.

Ofereça algo antes de pedir
Antes de pedir ao usuário um cadastro/login ou acesso a recurso do device, ofereça alguma coisa, seu app não pode ser totalmente dependente destes recursos, senão terá grandes chances de o usuário desistir de utilizá-lo (conquiste-o afinal, não é fácil lidar com pessoas);

Contexto
Mostre ao usuário somente o que ele precisa ver naquela tela tela; Deixe outras informações e meios de interação desnecessários para uma próxima tela; Para auxiliar nesta etapa, atenha-se ao ESCOPO com um objetivo principal, exemplo: Shazam, Tinder, Scan.

Walkthrough para atividades/fluxos "complexos"
A ideia é que seja sempre algo fácil e intuitivo de se usar, mas se por algum acaso, algum fluxo ou uma atividade específica do app não esteja com a navegação bem resolvida, experimente desenvolver um passo a passo para seu usuário entender o que ele deve/pode fazer (use isto como um recurso, não se torne dependente disto) na primeira vez que ele acessar o app, exemplo: Barking, Google Documents.
Um auxiliar para isto podem ser utilizados tooltips, exemplo: Google Talk.

Notificações
Quando há um grande volume, utilize de notificações segmentadas para não tornar massante a visualização.

Outro ponto importante é utilizar as notificações como canal de comunicação com os usuários, para mantê-los ativos no app, exemplos: Convidá-lo a experimentar a atualização recente, a visualizar conteúdo novo, a avaliar o app, algum in-app-purchase que entrou em promoção, entre outros (use com sabedoria).

Teclado Inteligente
Para que seu usuário tenha informar alguma coisa ao app, e principalmente quando for mais de um tipo de informação, tente expremimir o necessário no teclado componentes auxiliares, exemplo: Twitter, Klout.

iOS não é Android e vice versa
Uma apresentação bacana que fala somente sobre este assunto é a do Henrique Perticarati http://senta.la/1eqx
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Interface Pixel a Pixel v2
Page 2: Interface Pixel a Pixel v2

Page 3: Interface Pixel a Pixel v2

Page 4: Interface Pixel a Pixel v2
Page 5: Interface Pixel a Pixel v2
Page 6: Interface Pixel a Pixel v2
Page 7: Interface Pixel a Pixel v2
Page 8: Interface Pixel a Pixel v2
Page 9: Interface Pixel a Pixel v2
Page 10: Interface Pixel a Pixel v2
Page 11: Interface Pixel a Pixel v2
Page 12: Interface Pixel a Pixel v2
Page 13: Interface Pixel a Pixel v2
Page 14: Interface Pixel a Pixel v2
Page 15: Interface Pixel a Pixel v2
Page 16: Interface Pixel a Pixel v2
Page 17: Interface Pixel a Pixel v2
Page 18: Interface Pixel a Pixel v2
Page 19: Interface Pixel a Pixel v2
Page 20: Interface Pixel a Pixel v2
Page 21: Interface Pixel a Pixel v2
Page 22: Interface Pixel a Pixel v2
Page 23: Interface Pixel a Pixel v2
Page 24: Interface Pixel a Pixel v2
Page 25: Interface Pixel a Pixel v2
Page 26: Interface Pixel a Pixel v2
Page 27: Interface Pixel a Pixel v2
Page 28: Interface Pixel a Pixel v2
Page 29: Interface Pixel a Pixel v2
Page 30: Interface Pixel a Pixel v2
Page 31: Interface Pixel a Pixel v2
Page 32: Interface Pixel a Pixel v2
Page 33: Interface Pixel a Pixel v2
Page 34: Interface Pixel a Pixel v2
Page 35: Interface Pixel a Pixel v2
Page 36: Interface Pixel a Pixel v2
Page 37: Interface Pixel a Pixel v2
Page 38: Interface Pixel a Pixel v2
Page 39: Interface Pixel a Pixel v2
Page 40: Interface Pixel a Pixel v2
Page 41: Interface Pixel a Pixel v2
Page 42: Interface Pixel a Pixel v2
Page 43: Interface Pixel a Pixel v2
Page 44: Interface Pixel a Pixel v2
Page 45: Interface Pixel a Pixel v2
Page 46: Interface Pixel a Pixel v2
Page 47: Interface Pixel a Pixel v2
Page 48: Interface Pixel a Pixel v2