6 práticas recomendadas para design de UX móvel

Não se trata de coisas enormes e ridículas que precisamos fazer. É sobre coisas minúsculas que podem fazer uma grande diferença.

Paul Bennett, palestra TED “O design está nos detalhes”

Não se trata apenas do diabo que se esconde por trás dos detalhes - é também o próprio design. Freqüentemente ouvimos que quanto menos design - melhor, e o design que mais atende às nossas expectativas é aquele que é totalmente imperceptível para o usuário com o qual interage. Mas quais são as melhores práticas para o design ux atualmente, e é diferente do que costumávamos “gostar” um ano ou mais atrás? Nossos designers tentaram implementar as melhores práticas de design ux, permitindo que sua experiência de trabalho com empresas móveis falasse por eles.

1. Guia Barra de navegação vs Menu Hambúrguer.

A diferença entre os dois é perceptível para todos que já trabalharam com interfaces móveis, startups e melhores práticas de experiência do usuário. Em essência, o menu de hambúrguer (ou botão de hambúrguer) é um botão colocado normalmente no canto superior de uma interface gráfica do usuário. Tem a forma de um ícone que consiste em três linhas horizontais paralelas (exibidas como ☰ ), sugestivo de uma lista, e é nomeado por sua semelhança com as camadas de hambúrgueres, panquecas ou cachorro-quente em um pão.
[Fonte: Wikipedia]

Aqui está um exemplo do menu de hambúrguer implementado:

Esses menus costumavam aparecer em todos os lugares no celular, antes que a segunda opção da barra de guias aparecesse. O menu está normalmente localizado na parte inferior da tela do aplicativo e seu objetivo principal é permitir que o usuário simplifique sua experiência móvel dentro deste aplicativo. Freqüentemente, uma barra de guias consiste em 5 guias visíveis, embora não haja limite - apenas o tamanho e a orientação do dispositivo. A navegação da barra de guias provou maximizar a usabilidade do produto de muitas maneiras ainda não.

Há apenas um ano ou mais, o Awwards.com publicou diversos materiais, principalmente relacionados às tendências de design; em suas postagens, eles se aclamam por implementar o menu de hambúrguer ao projetar para dispositivos móveis, já que este foi um dos padrões mais modernos durante os anos de 2015-2016. No entanto, como já foi mencionado no artigo “tendências de aplicativos móveis em 2017”, a única coisa que você pode prever sobre as tendências é que elas vão mudar. O mesmo aconteceu com o botão de hambúrguer - ele sobreviveu a si mesmo. A navegação por tabs é uma das práticas mais comuns hoje em dia, pois torna a interface mais acessível para o usuário, além de salvar o histórico de tabs para ele. Embora seja uma opção orientada ao usuário responsiva, ainda não é uma prática recomendada de design de experiência do usuário personalizado para cada aplicativo - por exemplo, Uber, Google Maps e muitos outros casos populares não exigem guias para fazer navegação no aplicativo fácil para um usuário; embora as tendências de design UX sugiram que esse botão desapareça no futuro, e a escolha segura para todas as melhores práticas de experiência do usuário seria, sem dúvida, 5 ou menos guias abaixo na tela.

2. Modalidade de interface.

Lembra da tela de alerta irritante que te acorda todas as manhãs? Bem, o termo de design para esse tipo de interação é modalidade. Como parte das Diretrizes de interface humana do iOS, a modalidade desempenha um papel essencial na construção de um diálogo de interface com o usuário. O termo modalidade em design significa basicamente que uma mensagem ou uma tarefa concluída se sobrepõe à tela do aplicativo, e o usuário, por sua vez, precisa escolher se deseja dispensar isso ou ler / visualizar uma mensagem. Além disso, em vez da conhecida seta para trás, você geralmente pode localizar um ícone x, com o propósito de cancelar a visualização modal. O ícone x é de grande importância aqui, pois os usuários precisam localizar uma maneira segura e óbvia de descartar a tarefa modal. A modalidade também pode ser apresentada em 4 partes:

• Tela inteira (cobre a tela inteira)
• Folha de página (cobre parcialmente a tela)
• Folha de formulário (centralizado na tela)
• Contexto atual (cobre a visão pai)

A modalidade é útil quando você precisa atrair a atenção do usuário para um determinado ponto, mas a Apple recomenda fortemente não overdose com vários popovers - somente quando uma tarefa deve ser concluída para continuar usando o aplicativo, ou as informações no popover são realmente anteriores para manter o trabalho do aplicativo.
Aqui está um dos exemplos de como as telas de modalidade devem ser implementadas no design ux do aplicativo móvel:

[Fonte da imagem - Diretrizes de interface humana iOS]

Outra recomendação disponível seria tornar sua modalidade popovers o menor incentivo - porque os usuários ainda obtêm o direito de desativar as notificações push do seu aplicativo, e uma tela de incentivo pode tentá-los a fazê-lo.

3. Segmentação de conteúdo.

Se você usa o Instagram, Facebook, Twitter ou qualquer outra rede popular - você notará que o feed do aplicativo consiste em conteúdo de diferentes tipos de conteúdo, e o melhor design de ux de aplicativo móvel possível é quando o conteúdo é reconhecível; quando um usuário não precisa ler os textos anexados para entender se é um vídeo ou postagem de foto, pois as miniaturas são autoexplicativas. Aqui está o conceito de um aplicativo que anuncia várias atividades noturnas onde a segmentação de conteúdo foi implementada.

4. Micro-interações.

Um centavo e uma dúzia de materiais já foram escritos sobre a essencialidade das microinterações dentro do aplicativo. Cada ação sua é refletida pela própria interface, e o resultado de suas ações, respectivamente, são essas interações.
As melhores práticas de design de UX móvel que recomendaríamos sem pensar duas vezes incluem o seguinte:

• Marcadores de posição animados
• Gostos animados (se necessário) - à medida que estes dois melhoram o nível de compreensão que seus produtos estabelecem com os usuários, melhora o nível de compreensão criado para e com eles.

Citando o chefe do departamento de design da Mind Studios, Arsentiy Gorelik, “O design pode ser descrito como perfeito se não suscitar dúvidas para o usuário” .
O Instagram é um exemplo perfeito de um trabalho de design responsivo, com todas as micro-interações incluídas.

5. Abordagem de projeto de 2 planos.

Apesar de tudo e das diretrizes de design de UX de aplicativos móveis mencionadas anteriormente, os designers frequentemente esquecem que há dois planos onde o desenvolvimento realmente acontece - xey, que são dimensões verticais e horizontais, respectivamente. Eles também são chamados de pensamento linear e lateral (de acordo com a Interaction Design Foundation). Uma das melhores práticas de ux de um aplicativo móvel é quando a interação com o conteúdo do aplicativo é organizada horizontal e verticalmente; já que cada tipo de conteúdo é criado para um tipo diferente de cooperação do usuário.
Por exemplo, o toque duplo da Apple no botão home faz com que o conteúdo apareça mais abaixo na tela

Quando se trata do plano Y, os deslizamentos e gestos cometidos são exemplos da interação vertical.

6. Interação com as listas no celular.

Bem ciente, a listagem acontece de forma diferente em cada plataforma - no iOS a lista pode ser alternada com um toque para a esquerda, e no Android pode ser um toque longo na lista de marcadores. As tendências atuais dos smartphones sugerem que estamos mudando para gadgets maiores e mais volumosos, então fica cada vez mais complexo rolar a tela inteira do dispositivo. Então, uma das melhores práticas de design de UX móvel seria mover todas as interações necessárias para a parte inferior da tela principal, para evitar gestos indesejáveis ​​do usuário.

A interface do futuro.

A prática de design, e mais especificamente, a prática de design de interface percorreu um longo caminho antes de aparecer da maneira como as vemos apresentadas hoje em dia - mas este não é o pico de toda a evolução da interface. Como nosso design de experiência do usuário móvel corajosamente sugere, uma interface do futuro incluirá todos os melhores padrões e filosofias de design do iOS e Android, combinando-os todos em uma experiência impecável. Enquanto ouvimos em torno do slogan do futuro - “aplicativos para todas as telas”, isso significa que os aplicativos futuros deverão se tornar semelhantes; são obrigados a ter a mesma aparência em todas as plataformas em todo o mundo.

Aqui estão elas, as práticas recomendadas mais leais em design de experiência do usuário que nos sentiríamos seguros em recomendar ao tocarmos no assunto de design gráfico móvel. As informações fornecidas acima cobrem principalmente as percepções do designer de UI / UX; no entanto, com a criação de sites para celular também pode parecer difícil, tendo alguma semelhança com o ponto. A era inteligente está aqui, esperando por você e seu design para entrar - então talvez seja um ótimo momento para parar de segurar seus cavalos?

Não perca nossos artigos de fluxo de design: 5 coisas que acabarão por matar seu design utilizável e as 5 principais fontes seguras para um designer.

Escrito por Arsentiy Gorelik, Yulia Golovko e Elina Bessarabova.