Développer pour Android et iOS: modèles de navigation

Dans l’article de la semaine dernière, nous avons commencé par une approche de haut niveau, décrivant les différences entre les langages de conception d’iOS et d’Android: Flat Design et Material Design, respectivement.

Si vous ne comprenez pas encore bien Flat vs Material, je vous recommande de lire la suite avant de lire cet article.

Au cours des prochaines semaines, nous aborderons davantage le développement mobile natif et hybride, ainsi que d’autres différences entre les plates-formes Android et iOS.

Cette semaine, parlons des modèles de conception de navigation.

Lorsque vous réfléchissez à la manière dont vos utilisateurs vont naviguer dans votre application mobile, vous devriez vous poser les questions suivantes:

  • Comment l'utilisateur doit-il naviguer dans les différentes sections de mon application?
  • Devrais-je utiliser un tiroir de navigation ou des onglets?
  • Mes onglets devraient-ils être en haut ou en bas de l'écran?
  • Comment laisser mon utilisateur revenir de sa vue actuelle?

Nous répondrons à ces questions pour les plateformes iOS et Android (avec des études de cas d’applications très populaires). Si vous ne l'avez pas déjà fait et souhaitez recevoir une mise à jour lors de la publication de ces prochains articles, veuillez vous inscrire à notre liste de diffusion (pas de spam, c'est promis). Si vous êtes un entrepreneur / développeur dans l’espace mobile et prévoyez de publier votre application mobile à la fois sur iOS et Android, il est impératif que vous compreniez les spécificités de chaque écosystème et de la base d’utilisateurs pour pouvoir proposer de meilleurs logiciels.

Pourquoi s'embêter à étudier la navigation?

La navigation est l’une des parties (si ce n’est la) la plus importante d’une application mobile. Les écrans des appareils mobiles étant relativement petits comparés aux ordinateurs portables, vous ne pouvez généralement pas afficher tout ce que votre application peut faire sur un seul écran. Il est donc essentiel d’expliquer à l’utilisateur comment naviguer d’une section à l’autre. Prendre des décisions plus éclairées en matière d'expérience utilisateur (et enregistrer leur réaction) peut considérablement changer la manière dont les utilisateurs utilisent (ou abandonnent) votre application.

Onglets

Lorsque votre application comporte plusieurs sections principales et que vous souhaitez laisser votre utilisateur basculer rapidement entre elles, les onglets constituent un choix solide. Les onglets vous permettent d'organiser les vues principales de votre application et permettent aux utilisateurs d'explorer rapidement le contenu de chacune d'elles.

iOS

Sur iOS, les onglets sont en bas de l'écran. Il s’agit d’une approche très connue et familière de la conception de la navigation, utilisée par de nombreux produits à succès tels que Facebook, Twitter et Instagram. Les onglets iOS ont généralement une icône et un texte.

Onglets sur l'application iOS de TwitterLa barre d'onglets de l'application iOS de Trello

Une utilisation typique des onglets comprend chacun une section de votre application:

  • Onglet Accueil (contenu principal)
  • Recherche (s'il y a du contenu à rechercher) Onglet
  • Onglet Compose / Create
  • Onglet Notifications
  • Onglet Profil
De plus, les onglets comportent souvent des icônes ou des chiffres indiquant que le nouveau contenu est disponible pour l'utilisateur.

Il existe une convention et une limite d’utilisation de 5 onglets. Classiquement, votre application ne devrait pas comporter plus de 5 choses «importantes» (il s’agit simplement d’une bonne expérience UX).

En mode portrait, l’espace horizontal sur les appareils iOS est limité. Ainsi, si vous mettez un 6ème onglet, il n’y aura plus de place pour eux et le système les «faufilera» dans un onglet supplémentaire. En tapant sur cet onglet en pointillé, vous ouvrez une liste d’autres options d’onglet qui n’ont pas été intégrées à la barre d’onglet.

Exemple d’onglet Plus dans l’application musicale Apple

Android

Sur Android, les onglets se trouvent en haut et sont généralement représentés par du texte ou des icônes (plutôt que du texte et des icônes), à moins que vous n'utilisiez une barre de navigation inférieure, voir ci-dessous.

Onglets sur l'application Android de Twitter

Les onglets Android sont généralement plus centrés sur des sections spécifiques à une application que sur iOS et moins sur des sections «secondaires» telles que Rechercher, Créer / Composer et Profil, car Android dispose d’autres éléments de navigation pour remplir ces rôles.

Glisser

Les applications Android (telles que Backdrops) permettent généralement aux utilisateurs de faire glisser l'écran horizontalement pour naviguer entre les onglets.

Barre de navigation inférieure

La barre de navigation inférieure est un modèle de conception Android relativement nouveau qui tente d'imiter la manière dont les onglets sont utilisés dans iOS. Personnellement, je soutiens qu’un onglet inférieur est ridicule dans Android (car il est trop proche de la barre de navigation emblématique d’Android), Google indique ce qui suit sur la navigation dans les onglets par rapport au bas:

Les onglets facilitent l’exploration et le basculement entre différents points de vue et

Les barres de navigation du bas facilitent l'exploration et la commutation entre les vues de niveau supérieur en un seul clic.

Tiroir de navigation latérale

Si votre application comporte plus d'une poignée de sections principales (ou des sections «secondaires» telles que les paramètres et les commentaires), un tiroir de navigation est un autre modèle de conception très populaire. Il vous permet de fournir à l'utilisateur une liste de sections qu'il peut ranger lorsqu'il n'en a pas besoin.

iOS

Sur iOS, les tiroirs de navigation ne constituent pas un modèle de conception natif. Ils sont venus sur la plate-forme au fur et à mesure de l'évolution de la conception iOS, mais constituent toujours un élément important de la navigation dans de nombreuses applications.

Comme Apple ne fournit pas d’API pour implémenter les tiroirs de navigation, les développeurs utilisent généralement des bibliothèques tierces (ici une liste partielle).

Android

Sur Android, les tiroirs de navigation sont un modèle de conception natif. Google vous fournit donc les API dont vous avez besoin pour créer un tiroir de navigation. Vous n'avez donc pas besoin de rechercher des API tierces.

Le cas échéant, le haut d'un tiroir de navigation contient généralement des informations spécifiques à l'utilisateur.Le bas d'un tiroir de navigation peut afficher des sections secondaires.

Top Bars

iOS

Sur iOS, la barre supérieure s'appelle la barre de navigation. Les barres de navigation incluent généralement:

  • Le titre de la section sur laquelle l'utilisateur se trouve actuellement
  • Un bouton de retour à gauche s’il existe un écran pour revenir à
  • Un élément de contrôle du contenu à droite, le cas échéant (comme Recherche)
Barre de navigation de l'application iOS de TwitterLa barre de navigation de l'application iOS de Twitter avec un bouton de retour

L’objectif principal de la barre de navigation est de permettre à l’utilisateur de naviguer à travers une série d’écrans d’applications hiérarchiques en utilisant le bouton Précédent.

Android

Sur Android, la barre du haut s'appelle la barre d'outils. La barre d’outils Android est plus standardisée que iOS et comprend généralement:

  • Le titre de la section sur laquelle l'utilisateur se trouve actuellement
  • Un bouton Haut à gauche s’il ya un écran pour revenir à
  • Un bouton du tiroir de navigation s'il n'y a pas de bouton Haut
  • Boutons de menu et menu de débordement avec plus d'options
Notez que sur les applications Android avec une barre d'outils et des onglets, les deux sont fusionnés en un seul élément.Le menu de débordement sur l’application Android de Youtube

Les boutons de menu et le menu de débordement peuvent être utilisés à la fois comme alternative et comme complément au tiroir de navigation latérale. Un menu de débordement peut éventuellement supprimer la nécessité d'un tiroir de navigation latérale en fonction du nombre de vues différentes que votre application doit contenir.

Vous pouvez également laisser chaque section de votre tiroir de navigation latérale disposer de son propre menu de dépassement avec des options supplémentaires avec lesquelles votre utilisateur peut interagir.

Boutons Précédent (et barre de navigation d’Android)

C’est formidable de naviguer vers un écran, mais il est également important de montrer clairement aux utilisateurs comment revenir en arrière.

iOS

Sur iOS, le seul moyen pour l'utilisateur de revenir en arrière consiste à utiliser le bouton Précédent / Fermer situé à gauche de la barre de navigation.

Android

Étant donné qu'Android dispose d'une barre de navigation à l'écran, la documentation de conception fait la distinction entre le bouton Haut et le bouton Précédent.

Le bouton haut

Le bouton Vers le haut est généralement inclus dans une barre d’outils et ramène l’utilisateur au dernier écran qu’il a visualisé dans votre application (jusqu’à ce qu’il atteigne l’écran d’accueil de l’application).

La barre de navigation Android et le bouton Précédent

Le bouton de retour fait partie de la barre de navigation et «navigue dans l’ordre chronologique inverse de l’historique des écrans récemment visionnés». Bien que le bouton Haut ne supprime pas les utilisateurs de votre application, le bouton Précédent permet de passer de l’application en cours à celle qu’elle utilisait auparavant.

Une différence importante entre iOS et Android réside dans le fait que le précédent possède un bouton d’accueil physique (qui sert également de scanner à empreinte numérique), et que ce dernier renonce à un bouton physique situé au premier plan pour avoir un écran plus grand (et jette le scanner à empreinte numérique sur le moniteur). arrière du téléphone).

Même s'il s'agit d'un modèle de conception «système» plutôt que «d'application», la barre de navigation d'Android peut être masquée et les applications multimédia immersives (telles que Youtube, Google Photos, Netflix, etc.) masqueront la barre de navigation pour permettre à l'utilisateur de se concentrer le contenu de l'application est présenté.

Étant donné que la barre de navigation comprend un bouton Précédent, il n’est pas rare de voir les applications Android n’incluent pas de bouton Haut et que l’utilisateur utilise le bouton Précédent, car leurs fonctionnalités sont très similaires.

Conclusion

C’est tout pour l’article de cette semaine sur les modèles de navigation sur iOS et Android.

Dans le prochain article, nous aborderons le développement natif et hybride pour les applications mobiles.

Si vous souhaitez recevoir une mise à jour lorsque ces prochains articles sont en ligne, veuillez vous inscrire à notre liste de diffusion. Si vous êtes un entrepreneur / développeur dans l’espace mobile et prévoyez de cibler à la fois Android et iOS, vous augmenterez considérablement vos chances de succès si vous comprenez la conception et les différences de fonctionnalités entre ces deux systèmes d’exploitation et les attentes de l’utilisateur.

Cet article a été co-écrit par:

Jordan Rejaud, consultant en génie logiciel, aide les clients de l’espace mobile à concevoir et à écrire les logiciels dont ils ont besoin.

et

Alex Bush, ingénieur logiciel chez SmartCloud. Il blogue sur des sujets iOS avancés et sur Ruby on Rails.