🐌 👩🏿‍⚖️ 🐚 Comment penser la navigation dans les applications mobiles 👩🏽‍🤝‍👩🏻 ⏮️ 🍙

Il est important de placer les boutons uniquement là où ils seront demandés, afin de ne pas obstruer l'interface et de ne pas la surcharger visuellement pour les utilisateurs. Il est important de fournir à l'utilisateur les informations nécessaires pour prendre la décision de cliquer sur un bouton existant ou non. Maintenant sur la navigation. J'ai essayé de spéculer pourquoi certains éléments des applications sont implémentés comme ceci.

Hamburger

Dans le menu déroulant de type «hamburger», il est judicieux de placer des éléments de menu non ciblés rarement demandés, car vous devez cliquer sur le bouton pour accéder à ces éléments. Cela réduit la probabilité que l'utilisateur reconnaisse en principe la présence des éléments de menu qui se trouvent derrière le bouton (si ce n'est pas le seul bouton de l'interface). De plus, beaucoup de choses commencent en fonction de la visibilité de ce bouton dans le contexte de l'écran. Dans un hamburger, vous pouvez souvent voir la politique et les accords d'utilisation, l'aide, la FAQ et les informations techniques détaillées qui sont rarement demandées par l'utilisateur. Dans le même temps, les boutons cibles sont situés dans le menu inférieur - le plus rapidement possible pour l'utilisateur.

Un seul clic - quelques secondes si vous ne le faites qu'une seule fois. Et lorsque ce clic doit être effectué à chaque fois que vous souhaitez utiliser la fonction cible de l'application, cela peut entraîner au total plusieurs heures de perte de temps. Nous nous soucions de nos utilisateurs.

Figure. 1. Exemple de menu hamburger

Profil

Les utilisateurs adorent la personnalisation. Par conséquent, la présence d'un profil est assez courante dans les applications où il y a une fraction d'une orientation sociale. Ceux. si l'application implique l'échange d'informations ou autre chose qui implique de vous identifier en tant que personne devant une autre personne, cela implique automatiquement que l'application doit également avoir un profil, avec la possibilité de paramètres flexibles. Si l'utilisateur n'a pas la possibilité de corriger la faute de frappe formée lors de l'enregistrement dans des données personnelles telles que la connexion ou l'e-mail, ou de changer la photo de profil qui est affichée aux autres utilisateurs, cela entraînera des douleurs et des souffrances. Il est d'usage de désigner un profil avec une icône humaine ou un avatar installé par l'utilisateur.

Vous devez faire attention à la façon dont Instagram le fait. Afin de ne pas distraire l'utilisateur avec un compte connecté avec une icône de profil colorée - le profil est indiqué par une icône standard de la même couleur que le menu principal. Lorsque plusieurs comptes sont connectés, à partir de quel compte vous effectuez des actions - cela devient suffisamment important pour mettre davantage l'accent sur le profil avec lequel l'utilisateur travaille actuellement. Par conséquent, l'icône de profil «actif» est déjà visible dans le menu.

Figure. 2. Captures d'écran du menu inférieur d'Instagram. A gauche - un profil utilisateur, à droite - deux profils connectés à un compte

Je note également que j'ai vu certaines applications qui n'impliquent pas l'identification de l'utilisateur devant d'autres personnes, mais en même temps, trop d'espace et d'attention est prêté à l'avatar de l'utilisateur. Et, bien sûr, dans de tels cas, les gens s'efforcent rarement de le remplacer par quelque chose de personnalisé, car à part eux, personne ne voit cet avatar. Cela se produit souvent dans les systèmes à orientation technique, tels que les applications d'enregistrement de quelque chose dans certains entrepôts ou de suivi de statistiques. Dans de tels cas, cela vaut vraiment la peine de se poser la question «cette fonctionnalité est-elle nécessaire ici ou est-elle nécessaire dans un tel volume?».

Menu inférieur

La forme de menu la plus courante en ce moment. Et cette popularité a un fondement.

Il est pratique, facile à lire, décrit dans les guides de conception d'Android et d'Ayos. Il s'est imposé et s'est confirmé avec une utilisation prolongée, comme pratique et compréhensible.

En général, je voudrais souligner plusieurs étapes de ce menu. Pour des applications complètement innovantes qui sont encore utilisées par des utilisateurs inhabituels de l'icône pour indiquer des éléments de menu, la première fois, lorsque le public de l'application va être un marketing agressif, est d'utiliser la signature sur les éléments de menu, comme le fait Ticktok, par exemple. Les signatures des éléments de menu doivent également être laissées aux applications ayant une navigation complexe ou un large éventail de fonctionnalités dans lesquelles il est difficile d'interpréter sans ambiguïté telle ou telle icône.

Lorsqu'une grande partie du public des applications avec une focalisation étroite s'est formée et que cela dépend du bouche à oreille et du marketing moins agressif, vous pouvez supprimer les inscriptions des éléments de menu et donner plus d'espace au contenu principal de l'application. Réduire l'espace alloué précédemment sous le menu, comme Instagram par exemple. Pour les applications standard standard ou les applications qui ont déjà rassemblé leur audience active constante, vous pouvez utiliser le menu sans signatures.

Fig.3. Capture d'écran de l'application Ticktock

Dans certains cas, il est habituel de mettre en évidence l'action cible la plus élémentaire visuellement. Étant dans chacune des sections du menu, nous pouvons procéder à la création de contenu, car chacun des éléments du menu est en quelque sorte lié au contenu, et l'essence de l'application est précisément la création et l'échange de contenu. Un exemple est une capture d'écran de Ticktock.

Je note un menu qui semble inhabituel et jouit d'une certaine popularité sur les sites de conception, mais en même temps, dans les applications réelles qui comptent sur un large public, il ne augmentera probablement pas en popularité. Parce qu'il n'est pas pratique de lire les éléments du menu.

Fig.4. Menu vertical

Onglets dans la section

Si les données appartiennent à une seule section, mais en même temps ont des différences.

Par exemple, dans l'application Dribble pour les concepteurs, il existe un commutateur dans le flux entre les personnes que vous suivez, les publications populaires et récentes. Ceux. les informations sont les mêmes, mais triées et filtrées, respectivement, et servies différemment. Un exemple similaire est de basculer entre les abonnements et les vidéos en vedette dans Ticktock.

Les onglets sont utilisés sur Instagram un peu différemment. À l'aide d'onglets, vous pouvez basculer entre les sous-sections du profil. En général, cela est également logique, car nous allons sur le profil pour interagir avec un objet spécifique - que ce soit mon message, la mention du menu dans les publications d'autres personnes ou autre chose.

Et avec l'exemple d'Instagram, il est également facile de démontrer que certaines sections n'ont pas besoin d'être affichées pour tous les utilisateurs. Plus précisément sur l'exemple de la section masque. Jusqu'à ce que je connaisse leur existence et que vous puissiez les créer vous-même, je n'avais pas une telle section. Dès que j'ai téléchargé mon premier masque sur ce réseau social, cette section a commencé à apparaître en moi. Il est inutile pour les personnes qui ne connaissent pas les masques, mais utilisent Instagram à d'autres fins. Ces utilisateurs n'ont pas besoin de surcharger l'écran d'informations inutiles. Et pour ceux qui ont découvert une telle opportunité, cette section est donc nécessaire.

Figure. 5. Instagram lorsque j'ai téléchargé le masque et avant de télécharger le premier masque

Flèche arrière / Croix

Si, par exemple, dans le cadre d'une section, nous révélions des informations détaillées, ce serait bien de montrer avec animation que cette section a été ouverte. Et une croix ou une flèche arrière servent à réduire les informations détaillées et à revenir à l'écran précédent.

Cela a souvent du sens lors du passage de listes ou de fiches produits, de sorte que l'utilisateur comprenne qu'il reviendra au même endroit d'où il a quitté la liste. Et aussi que l'utilisateur pourra continuer à parcourir l'assortiment plus loin, sans avoir à faire défiler jusqu'au niveau souhaité du catalogue à partir duquel il est passé à la section détaillée. Les exemples peuvent être facilement visualisés dans les applications Wildberries, Ozon, Lamoda, etc.

Figure. 6. Animation d'ouverture des informations détaillées de la carte et à travers la flèche retour à la liste

Le panneau sortant d'en bas

Il fonctionne de manière similaire à la transition vers des informations détaillées, mais est utilisé dans les cas où vous devez laisser un accès visuel à la section à partir de laquelle la transition est effectuée. Par conséquent, il est souvent utilisé dans les cartes, où jusqu'à présent vous décidez où aller et par la distance que vous devez surmonter et par des informations plus détaillées spécifiées dans la description du lieu. De plus, cette technique est utilisée dans les applications alimentaires. Lorsque vous quittez l'accès aux informations publiées avant d'appeler le formulaire, vous devez saisir la quantité de nourriture commandée. Un autre bon exemple est le panneau de commentaires itinérant de Ticktock. Nous laissons l'occasion de nous «souvenir» de la provenance des commentaires de publication, laissant littéralement une tranche de cette vidéo visible lorsque nous élargissons le panneau avec des commentaires.

Figure. 7. Captures d'écran de Google maps à gauche, de la nourriture Yandex au milieu et de Ticktok à droite

Il y a beaucoup de discussions sur leur influence et combien en dépend. Mais alors que les gens recherchent l'approbation sociale et n'ont pas proposé de formulaire différent, les boutons d'approbation sociale resteront dans les applications.

Certains des boutons exécutent l'action elle-même et d'autres défilent jusqu'au point où cette action peut être effectuée. Dans ce cas, le focus se déplace directement vers l'espace dans lequel l'action est effectuée. Par exemple, dans le premier cas, c'est comme. Nous avons cliqué et avons immédiatement vu que leur nombre augmentait et le cœur était coloré. Comme exemple de la deuxième option, ce sont des commentaires. Lorsque vous cliquez sur un commentaire, nous développons les commentaires de la publication ou nous nous concentrons immédiatement sur le champ de saisie pour laisser un commentaire. Ceux. une petite mais redirection se produit.

Conclusion

Construire la navigation dans l'application est une affaire qui demande de l'attention, de la persévérance et la présence de la logique.

Écrivez avec ce que vous êtes d'accord, avec ce que vous n'êtes pas d'accord, et il peut être utile d'ajouter quelque chose à l'article.

Comment penser la navigation dans les applications mobiles