48

Interface Pixel a Pixel v2

Embed Size (px)

DESCRIPTION

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

Citation preview

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