Esse texto é uma tradução do artigo 10 princípios de design de interface mobile, que o consultor mobile, Jonathan Stark, compilou de seus workshops.

Desde o lançamento do Motorola Dynatec 8000x há mais de trinta anos, os dispositivos móveis partiram de geringonças de proporções e pesos absurdos para dispositivos cada vez mais finos, sofisticados, potentes e de alcance mundial. Em pesquisa realizada em setembro de 2015 pelo NIELSEN IBOPE, o total de pessoas que utilizam Internet por um smartphone aqui no Brasil chegou a 72,4 milhões no segundo trimestre de 2015 e esse número tende a crescer cada vez mais.

Partindo das diferenças óbvias, buscando-se pontos positivos e negativos em relação aos dispositivos móveis e computadores como, tamanho de tela, diferença de consumo de banda de internet, o uso de dispositivos periféricos, pode se ter a impressão que um smartphone/ tablet/ phablet é um computador miniaturizado com capacidade limitada. E isso é um erro. Você facilmente encontra dispositivos móveis mais poderosos que máquinas desktops.

Mas não estamos falando só em hardware e software, mas em produtos altamente pessoais, sempre à mão, que nos permite acesso a qualquer pessoa, fato ou situação em segundos. Além de possuir sensores que detectam localização, movimentação, aceleração, orientação, proximidade, condições ambientais dentre outras coisas. Os apps se utilizam desses sensores pra nos ajudar a tomar decisões. Um app mostra que você deveria levar um casaco e um guarda chuva, pois a previsão indica que vai chover. Um app mostra que o ônibus que você quer pegar vai passar na parada em poucos minutos, evitando assim o uso de outro app pra chamar um táxi. Ao se exercitar um app monitora seus batimentos cardíacos, pulsação, quantos passos foram dados, se você correu ou caminhou…

Abaixo seguem os 10 princípios de design de interface mobile.

1. Mentalidade mobile

• Mantenha o foco: Mais não é melhor. Você vai ter que deixar coisas de fora.
• Seja único: Saiba o que o torna único e realce isso. Se não houver nada que o torne especial, por que alguém o usaria?
• Seja charmoso: Dispositivos móveis são bastante pessoais. Estão em nossa constante companhia. Apps amistosos, confiáveis e divertidos causam prazer nos seus usuários.
• Seja atencioso: Coloque-se no lugar de seus usuários caso deseje criar experiências cativantes.

2. Contexto

A imagem de um profissional extremamente ocupado, correndo pelo aeroporto com uma mala na mão e o telefone na outra, é o que a maioria pensa quando se fala no contexto de uso de um dispositivo mobile. Certamente é um contexto, mas não o único. Para nos colocarmos no lugar dos usuários, devemos imaginar três contextos: Entediado, Ocupado e Perdido.

• Entediado: Há milhares de pessoas usando seu smartphone no sofá agora. Neste contexto, apostar no imersivo e prazeroso é uma excelente escolha. Exemplos: Facebook, Angry Birds, Twitter…
• Ocupado: Este é o do “cenário do aeroporto”. Oferecer a possibilidade de se utilizar o aparelho com uma mão em um ambiente caótico é crítico. Exemplo: Email, banco, calendário…
• Perdido: Usuários em trânsito, em ambientes desconhecidos. Aqui o usuário se preocupa com conectividade e vida da bateria. Então você deve oferecer algum suporte offline e ser econômico ao usar recursos do sistema. Exemplos: Mapas, Foursquare…

3. Guidelines globais

Capacidade de resposta: Isso é algo absolutamente crítico. Se seu usuário faz algo o sistema deve responder à interação logo. Perceba, que capacidade de resposta é diferente de velocidade. É normal se uma tarefa demorar um pouco para ser realizada. O importante é o usuário saber que o app está trabalhando.

• Polimento: Polimento é extremamente valioso, por causa do nosso constante relacionamento com smartphones, percebemos os pequenos perfeitos detalhes.
• Polegares: Com o advento das interfaces touch, todos estão falando “toque aqui” e “toque ali”. Na realidade projetamos para o polegar. Polegares são o padrão.
• Alvos: Olhe para seu polegar direito. Não a ponta, mas a face – parte que entra em contato com a tela. Ele parece grande ou pequeno demais para interagir com os elementos da interface do seu smartphone? O número mágico para oferecer uma experiência amistosa é de 44px. Também cuide da disposição destes elementos, por exemplo, colocar um botão de backspace junto ao botão enviar em um app de SMS, é uma péssima ideia.
• Conteúdo: A revolução das interfaces touch vem do fato de que podemos interagir diretamente com nosso próprio conteúdo. Isto remove abstrações (como mouses e trackpads) e está mais alinhado com como nosso cérebro está conectado. Não é necessário ir longe pra entender isso. Dê um tablet a uma criança de dois anos e você vai ver como ela, em poucos minutos estará ambientada ao uso desse dispositivo. Agora deixe essa mesma criança interagir com um laptop e você verá como a curva de aprendizado será maior e mais difícil.
• Controles: Quando tiver de colocar controles, opte por colocar no final da tela. Pense em alguns dispositivos como balança de banheiro, calculadora, TV, laptops… Os comandos são após o visor. Se não fosse assim, não conseguiríamos ver o que acontecia enquanto estivéssemos realizando uma interação.
• Rolagem: Evite a rolagem. Ter uma tela sem rolagem oferece uma sensação de mais sólida e confiável por causa de sua previsibilidade. Claro que algumas telas terão de utilizar scroll, mas é bom evitá-las sempre que possível. Se tiver que ter rolagem, procure informar de uma forma sutil de que há mais conteúdo além do que aquele que está apresentado na tela.

4. Modelos navegacionais

Se tiver de utilizar um dos modelos mais comuns de navegação, certifique-se de utilizar aquele que faz mais sentido para o seu app.

• Nenhum: Tela única de apps utilitários. Exemplo: Previsão tempo (Weather app) no iPhone.
• Barra de Abas: Três a seis áreas de conteúdos distintos. Exemplo: Twitter no iPhone.
• Drill Down: Conteúdos hierárquicos listados e detalhados. Exemplo: Configurações no iPhone.

5. Entrada do usuário

Mesmo nos melhores dispositivos, digitação ainda é algo custoso, então por que não buscar facilitar essa tarefa?

• Existe uma dúzia de variações de dados que podem ser digitados nos teclados dos smartphones (texto, número, email, URL, etc). Considere disponibilizar o teclado mais útil de acordo com o tipo de informação digitada pelo usuário.
• Considere disponibilizar para cada campo de entrada do usuário, opções de auto-entrada (como auto-capitalização, auto-correção e auto-complete).
• Se seu app tiver que receber uma quantidade grande de dados digitados, procure suportar orientação em modo paisagem.

6. Gestos

Um dos mais icônicos aspectos das interfaces touch é o suporte à interação baseada em gestos. Então há algumas coisas que se deve ter em mente:

• Invisível: Gestos são invisíveis. Você deve encontrar uma maneira de revelar sua existência para o usuário.
• Duas mãos: Operações multi-toques requerem o uso de duas mãos. Um exemplo prático, são alguns aplicativos que utilizam o gesto de “pinçar” para dar zoom in ou zoom out em algum elemento (foto, mapas, etc). Quando se está usando o smartphone com apenas uma das mãos, isso pode ser um limitador, então se devem buscar outras maneiras de oferecer a mesma experiência como, nesse caso, botões que aumentarão/ diminuirão o elemento.
• Bom de ter (Nice to have): Na maioria dos casos, gestos são considerados nice to have, mas não como algo crítico. Deve funcionar como atalhos de teclados. Usuários avançados adorarão, mas a maioria das pessoas talvez nem saibam que isso exista.
• Sem substituição: Um vocabulário comum para interface gestual ainda não existe, então ainda é cedo para ignorar controles visíveis que possam ser utilizadas com apenas um dedo.

7. Orientação

• Orientação retrato é de longe a mais popular, otimize para esse caso primeiro.
• Como dito mais acima, se seu app tiver que receber uma quantidade grande de dados digitados, procure suportar orientação em modo paisagem, pois assim o usuário tem acesso a um teclado mais largo.
• Se seu app for utilizado por um longo período de tempo em uma posição, considere colocar uma opção de travar, evitando assim, uma mudança de orientação repentina.

8. Comunicações

• Prover feeedback: Ofereça feedback para cada interação. Caso não ofereça, o usuário pensará que seu app travou ou que ele errou o alvo que tentava atingir. Pode ser tátil (como a “pancada” vibrante do Android), ou visual (destacando o botão apertado). Se ele fizer uma interação cuja resposta demore um pouco, coloque uma barra de progresso para que ele saiba que sua solicitação está em andamento.
• Modais de alerta: Modais de alerta são extremamente agressivos e intrusivos para o fluxo do usuário, então você só deveria usá-los quando algo extremamente sério ocorresse. Caso seja necessário o uso desse artifício, tente utilizar uma linguagem tranquila e amistosa.
• Confirmações: Quando você precisa confirmar uma ação iniciada pelo usuário, é aceitável o uso de uma janela modal (tipo: “Você deseja realmente deletar arquivox.txt”). Confirmações são menos intrusivas do que alertas.

9. Lançamento

Quando um usuário retorna ao seu app após um período, você deve oferecer o prosseguimento da operação exatamente do ponto onde o usuário o deixou. Isso passará a impressão de velocidade e de ótima capacidade de resposta.

Qualquer coisa que pareça interativo (como botões, links, ícones, conteúdo) irá criar frustração pelo convite a interações falhas.

10. Primeiras impressões

• Seu ícone: Seu ícone vai competir por atenção em um mar de ícones. Seja literal, mostre o que seu app faz. Use uma silhueta forte, pouco texto. Um ícone polido remete a um app polido, então vale a pena gastar tempo e dinheiro para fazê-lo correto.
• Primeiro lançamento: Se novos usuários tiverem dificuldades de se familiarizarem com seu app, eles rapidamente o enterrarão. Se seu app fornece funcionalidades complexas, você pode incluir dicas e truques, ou talvez alguns poucos painéis de orientação. Perceba que isso não é uma substituição para um bom design. Se você se pegar escrevendo um monte de texto de ajuda, isso é um indicativo de que sua interface do usuário precisa ser melhorada.

###Referências:

• 10 Principles of Mobile Interface Design
• Brasileiros com internet no smartphone já são mais de 70 milhoes