😖 🕴🏻 👩‍🚀 Como pensar na navegação em aplicativos móveis 💾 👨🏻‍⚖️ 🤚🏽

É importante colocar os botões apenas onde eles serão solicitados, para não entupir a interface e visualmente não sobrecarregá-la para os usuários. É importante fornecer ao usuário as informações necessárias para tomar a decisão de clicar em um botão existente ou não. Agora sobre navegação. Tentei especular por que certos elementos nos aplicativos são implementados assim.

Hamburger

No menu suspenso do tipo "hambúrguer", faz sentido colocar itens de menu não alvo raramente solicitados, pois você precisa clicar no botão para acessar esses itens. Isso reduz a probabilidade de o usuário, em princípio, reconhecer a presença dos itens de menu que estão atrás do botão (se esse não for o único botão na interface). Além disso, muitas coisas começam dependendo de quão perceptível esse botão é no contexto da tela. Em um hambúrguer, muitas vezes você pode ver a Política e os Contratos do usuário, Ajuda, Perguntas frequentes e informações técnicas detalhadas que raramente são solicitadas pelo usuário. Ao mesmo tempo, os botões de destino estão localizados no menu inferior - o mais rápido possível para o usuário.

Apenas um clique - alguns segundos se você fizer isso apenas uma vez. E quando esse clique precisa ser feito toda vez que você deseja usar a função de destino do aplicativo, pode resultar em várias horas de tempo perdido no total. Nós nos preocupamos com nossos usuários.

FIG. 1. Exemplo de um menu de hambúrguer

Perfil

Os usuários adoram personalização. Portanto, a presença de um perfil é bastante comum em aplicações nas quais há uma fração de uma orientação social. Essa. se o aplicativo implica a troca de informações ou algo mais que envolva identificá-lo como uma pessoa na frente de outra pessoa, fica automaticamente implícito que o aplicativo também deve ter um perfil, com a possibilidade de configurações flexíveis. Se o usuário não tiver a oportunidade de corrigir o erro de digitação formado durante o registro em dados pessoais, como login ou email, ou alterar a imagem do perfil exibida para outros usuários, isso trará sofrimento e sofrimento. É habitual designar um perfil com um ícone humano ou um avatar instalado pelo usuário.

Você deve prestar atenção em como o Instagram faz isso. Para não distrair o usuário com uma conta conectada com um ícone de perfil colorido - o perfil é indicado por um ícone padrão da mesma cor que o menu principal. Quando várias contas são conectadas, a partir de qual conta você executa ações - torna-se importante o suficiente para enfatizar em qual perfil o usuário está trabalhando no momento. Portanto, o ícone do perfil "ativo" já está visível no menu.

FIG. 2. Imagens do menu inferior do instagram. À esquerda - um perfil de usuário, à direita - dois perfis conectados a uma conta

Percebo também que vi alguns aplicativos que não implicam a identificação do usuário na frente de outras pessoas, mas, ao mesmo tempo, muito espaço e atenção são prestados ao avatar do usuário. E, é claro, nesses casos, as pessoas raramente se esforçam para substituí-lo por algo personalizado, porque, além deles, ninguém vê esse avatar. Isso geralmente acontece em sistemas tecnicamente orientados, como aplicativos para contabilizar algo em alguns armazéns ou rastrear estatísticas. Nesses casos, vale a pena fazer a pergunta "essa funcionalidade é necessária aqui ou é necessária nesse volume?".

Menu inferior

A forma mais comum de menu no momento. E essa popularidade tem uma base.

É conveniente, fácil de ler, descrito nos guias para o design do Android e do Ayos. Estabeleceu-se e confirmou com uso prolongado, como conveniente e compreensível.

Em geral, eu indicaria várias etapas deste menu. Para aplicativos completamente inovadores que ainda são usados por usuários incomuns do ícone para indicar itens de menu, a primeira vez em que o público do aplicativo será de marketing agressivo é usar a assinatura nos itens de menu, como o Ticktok, por exemplo. As assinaturas de itens de menu também devem ser deixadas para aplicativos com navegação complexa ou uma ampla gama de funcionalidades nas quais é difícil interpretar sem ambiguidade um ou outro ícone.

Quando uma grande parte do público-alvo de aplicativos com foco estreito é formada e isso depende do boca a boca e do marketing menos agressivo, você pode remover as inscrições dos itens de menu e dedicar mais espaço ao conteúdo principal do aplicativo. Reduzir o espaço alocado anteriormente no menu, como o Instagram, por exemplo. Para aplicativos padrão padrão ou aplicativos que já reuniram seu público ativo constante, você pode usar o menu sem assinaturas.

Fig. 3. Captura de tela do aplicativo Ticktock

Em alguns casos, é costume destacar visualmente a ação mais básica do alvo. Estando em cada uma das seções do menu, podemos avançar para a criação de conteúdo, porque cada um dos itens do menu está de alguma forma relacionado ao conteúdo, e toda a essência do aplicativo é precisamente a criação e a troca de conteúdo. Um exemplo é uma captura de tela do Ticktock.

Observo um menu que parece incomum e goza de popularidade nos sites de design, mas, ao mesmo tempo, em aplicativos reais que contam com um grande público, provavelmente não aumentará em popularidade. Porque não é conveniente ler itens de menu.

Fig. 4. Menu vertical

Guias na seção

Se os dados pertencem a uma seção, mas ao mesmo tempo, existem algumas diferenças.

Por exemplo, no aplicativo Dribble para designers, há uma alternância no feed entre as pessoas que você segue, publicações populares e recentes. Essa. as informações são as mesmas, mas classificadas e filtradas, respectivamente, e veiculadas de maneira diferente. Um exemplo semelhante é alternar entre inscrições e vídeos em destaque no Ticktock.

As guias são usadas no Instagram de maneira um pouco diferente. Com a ajuda de guias, você pode alternar entre subseções no perfil. Em geral, isso também é lógico, porque vamos ao perfil para interagir com um objeto específico - seja meu post, menção do menu nas publicações de outras pessoas ou qualquer outra coisa.

E com o exemplo do instagram, também é fácil demonstrar que algumas seções não precisam ser exibidas para todos os usuários. Especificamente no exemplo da seção de máscara. Até eu conhecer a existência deles e que você mesmo pode criá-los, eu não tinha essa seção. Assim que carreguei minha primeira máscara nesta rede social, esta seção começou a aparecer em mim. É inútil para pessoas que não sabem sobre máscaras, mas usam o Instagram para outros fins. Esses usuários não precisam sobrecarregar a tela com informações desnecessárias. E para aqueles que descobriram essa oportunidade, esta seção é necessária.

FIG. 5. Instagram quando carreguei a máscara e antes de carregar a primeira máscara

Seta para trás / Cruz

Se, por exemplo, no âmbito de uma seção, divulgássemos informações detalhadas, seria ótimo mostrar com animação que esta seção foi aberta. E uma cruz ou uma seta para trás servem para recolher informações detalhadas e retornar à tela anterior.

Isso geralmente faz sentido ao alternar de listas ou cartões de produtos, para que o usuário entenda que ele retornará ao mesmo local de onde saiu da lista. E também que o usuário poderá continuar navegando mais no sortimento, sem precisar rolar para o nível desejado do catálogo a partir do qual foi para a seção detalhada. Os exemplos podem ser facilmente visualizados nos aplicativos Wildberries, Ozon, Lamoda, etc.

FIG. 6. Animação da abertura de informações detalhadas do cartão e através da seta de volta à lista

O painel saindo de baixo

Funciona de maneira semelhante à transição para informações detalhadas, mas é usado nos casos em que você precisa deixar acesso visual à seção na qual a transição é feita. Portanto, é frequentemente usado em mapas, onde até agora você decide para onde ir e pela distância que precisa superar e por algumas informações mais detalhadas indicadas na descrição do local. Além disso, esta técnica é usada em aplicações alimentares. Quando você deixa o acesso às informações postadas antes de ligar para o formulário, é necessário inserir a quantidade de comida solicitada. Também é um bom exemplo o painel de comentários de viagem em Ticktock. Deixamos a oportunidade de "lembrar" sobre quais comentários da publicação são feitos, deixando literalmente uma parte deste vídeo visível quando expandimos o painel com comentários.

FIG. 7. Imagens do Google Maps à esquerda, comida Yandex no meio e Ticktok à direita

Há muita discussão sobre que influência eles têm e quanto depende deles. Mas enquanto as pessoas procuram aprovação social e não apresentam um formulário diferente, os botões para aprovação social permanecem nos aplicativos.

Alguns dos botões executam a ação propriamente dita e alguns rolam para o ponto em que essa ação pode ser executada. Nesse caso, o foco se move diretamente para o espaço em que a ação é executada. Como exemplo, no primeiro caso, é assim. Clicamos e vimos imediatamente que o número deles aumentava e o coração estava colorido. Como exemplo da segunda opção, esses são comentários. Quando você clica em um comentário, expandimos os comentários para a publicação ou focamos imediatamente no campo de entrada para deixar um comentário. Essa. um pequeno mas redirecionamento ocorre.

Conclusão

Construir a navegação no aplicativo é uma questão que requer atenção, perseverança e presença de lógica.

Escreva com o que você concorda, com o que você discorda, e pode valer a pena adicionar algo ao artigo.

Como pensar na navegação em aplicativos móveis