Pourquoi la navigation doit remplacer la barre de navigation dans iOS Design

La barre de navigation est activée

UINavigationBar, la barre de navigation pour faire court, existe depuis l'iPhone d'origine. Historiquement, les barres de navigation ont été pratiques et claires, faciles à comprendre et à construire.

Ensuite, les téléphones ont explosé, assez pour que l'iPhone 7 Plus ait supplanté les ventes de l'iPad mini. Maintenant, si vous possédez un iPhone moderne, les barres de navigation peuvent sembler difficiles à manier - littéralement hors de contact.

Des écrans en plein essor signifient que la distance entre la barre de navigation et nos pouces a augmenté. L'écran sur un 7 Plus est si grand qu'il faudrait une augmentation de 150% de la longueur du pouce pour atteindre ces boutons embêtants d'une seule main. Juste un ou deux doigts. Rien d'étrange.

Les zones tactiles de Hurff illustrent l’atteignabilité du pouce pour les droitiers.

Au fur et à mesure que les appareils changent, notre langage visuel change avec eux. Il est temps de s’éloigner de la barre de navigation pour une navigation à portée de main. Pour les besoins de cet article, nous appellerons cela Reach Navigation.

Pourquoi la barre de navigation est hors de contact

La barre de navigation est l’un des piliers de l’application «standard du système», utilisée dans les applications Téléphone, Messages, Mail, Calendrier et d’innombrables autres. Il y a beaucoup de raisons pour lesquelles il a gagné en faveur:

  • iOS Standard Apple a conçu la barre de navigation pour qu'elle soit personnalisable, évolutive, accessible et facile à mettre en œuvre. Comme il s’agit d’un standard iOS, il est reconnaissable entre les applications.
  • Navigation Les côtés gauche et droit de la barre de navigation offrent un espace pour les boutons. La zone de gauche permet souvent de naviguer entre les utilisateurs dans la hiérarchie et la zone de droite est à saisir. Le bouton Précédent informe les utilisateurs qu’ils ne se trouvent pas dans la vue racine.
  • Titre Fournit un emplacement cohérent pour le texte définissant la fonction de la vue. Étant donné que la barre de navigation reste toujours à l'écran, cela permet de mieux définir la hiérarchie des informations.
  • Compagnon de la barre d'onglets Si vous avez une rangée d'icônes interchangeables au bas de l'écran (notamment une barre d'onglets), le fait de placer d'autres icônes en haut de l'écran permet de séparer la relation parent / enfant.
  • Logo Votre client peut mettre un logo ici! Génie. Lol jk, je trouve ça moche, mais je m'éloigne du sujet.
Quelques exemples de barres de navigation pour votre plus grand plaisir.

Oh mon Dieu, il y a tant de bonnes raisons d'utiliser une barre de navigation dans votre projet. Sauf, putain! C’est difficile de lever le pouce maintenant.

Ceci étant le cas, parlons quelques inconvénients de Navbar:

  • C’est plus difficile de revenir en arrière. Vous pouvez faire glisser votre doigt depuis le bord, à condition que la vue ne soit pas défilée horizontalement. Si c'est le cas, vous vous trouvez alors dans une ville étendue.
  • Nommer toutes les vues est une douleur. Tous les écrans n'ont pas besoin d'un titre persistant, et certains nécessitent des étiquettes trop longues à tenir. En quittant une zone de navigation vide, vous perdez de l’espace à l’écran et vous avez l’air stérile.
  • La navigation nécessite deux mains. Si vous pouvez tenir un appareil dans une main, vous devriez pouvoir l'utiliser avec une seule main. C’est plus agréable et plus pratique dans un monde rempli de paniers à pousser et de bébés à porter.
  • Les applications simples deviennent plus complexes que nécessaire. Les barres de navigation ont tendance à conduire à une architecture d’information profonde. Il est facile de développer une divulgation horizontale horizontale, ce qui signifie que vous pouvez vous battre pour développer en ligne ou utiliser une feuille.

D'accord. Nous savons maintenant comment les barres de navigation peuvent être de la merde. Alors que faisons nous?

Reach Navigation et Apple

En tant que concepteur iOS, je soutiens ma thèse en expliquant comment Apple intègre déjà Reach Navigation. Prêt? Nous allons commencer par deux manières évidentes pour Apple de prendre en charge de plus grands écrans mobiles.

Au lieu d'un bouton de retour, retournez en glissant depuis le bord gauche.

Tout d’abord, vous n’avez plus besoin d’appuyer sur le bouton de retour, vous pouvez revenir en arrière en balayant du bord gauche. Vous pouvez également contrôler le mouvement de l'écran lorsqu'il bascule en arrière, vous permettant de jeter un coup d'œil sur un écran précédent avant de vous engager. Cela ne fonctionne pas dans toutes les applications, mais lorsque vous le faites, vous pouvez regarder la transition de l'étiquette arrière dans le titre, ce qui est magnifique.

Appuyez légèrement deux fois sur le bouton d'accueil pour déplacer le contenu vers le bas.

Deuxièmement, iOS inclut une fonctionnalité appelée Accessibilité, dans laquelle le contenu de votre écran est rétrogradé pour vous permettre d’atteindre les boutons situés tout en haut lorsque vous appuyez deux fois légèrement sur le bouton d’accueil. Faisable pour le moment, mais cela ressemble à une solution de pansement.

Maintenant, c’est là que le virage vers Reach Nav devient plus apparent. Apple a déjà commencé à retirer leurs applications de la barre de navigation. Maps et Music ont tous deux modifié leur structure pour iOS 10, réduisant ou supprimant le besoin de barres de navigation.

Apple Music passe de iOS 9 (à gauche) à iOS 10 (à droite). La suppression de la barre de navigation a permis d'augmenter la taille de l'étiquette de la vue principale. Jolie.

Maintenant, les deux applications utilisent une feuille que vous pouvez balayer pour ignorer.

Apple Maps passe d'iOS 9 (à gauche) à iOS 10 (à droite). L'interface utilisateur est presque entièrement inversée. Les paramètres de la carte et le verrouillage à l'emplacement actuel sont plus difficiles à atteindre, tandis que la recherche et les résultats sont hiérarchisés.

Quelques boutons de retour dans Apple Music ont survécu au bloc de coupe pour iOS 10, mais ils semblent marqués pour être supprimés dans un futur système d'exploitation. C’est idiot de laisser autant d’espace horizontal pour un bouton qui n’occupe que 20% de l’immobilier. Apple Music est également devenue une simple étiquette Back au lieu de décrire la destination de retour, pierre angulaire de la fonctionnalité du bouton Précédent dans la version iOS 7.

Le bouton Précédent dans iOS 10 occupe beaucoup d’immobilier ici. Cela semble temporaire, non? Oui.

Il semble donc que ce soit la direction prise par Apple, ce qui vous permet de modifier vos conceptions en conséquence.

Incorporer la navigation de portée

Voici quelques détails sur la manière d'intégrer Reach Nav dans vos applications. Si vous travaillez sur:

Une nouvelle application utilisant une barre d'onglets:

  • Utilisez des feuilles qui apparaissent du bas et qui peuvent être balayées.
  • Au lieu de placer des boutons importants tels que Filtrer ou Modifier la vue en hauteur, voyez si vous pouvez les faire flotter au-dessus de la barre d'onglets.
  • Avant de choisir des onglets pour votre écran le plus précieux, discutez des fonctionnalités critiques.
  • Ne mettez pas de bouton de destination - Rechercher, Panier, Nouveau message, par exemple - dans la barre de navigation. Créez un onglet ou intégrez-le dans la zone de contenu.

Une nouvelle application sans barre d'onglets:

  • Essayez un tiroir exposé comme Cartes ou des feuilles comme Courrier.
  • Dois-je dire ça? Prioriser placer des boutons au bas de l'écran.

Une refonte d'un design hérité:

  • Déplacez les éléments les plus utilisés vers le bas.
  • Assurez-vous que le fait de glisser du bord de l'écran pour revenir en arrière fonctionne pour toutes les vues.
  • Voyez ce que vous pouvez imbriquer pour libérer de l'espace dans les zones d'écran les plus utilisables.
  • Supprimez les actions importantes de la barre de navigation en haut à droite et mettez-les ailleurs.
Un rapide aperçu de la manière dont Safari pourrait déplacer la barre d’adresses vers le bas, supprimer la barre d’outils tout en maintenant les fonctionnalités.

Enfin, il existe quelques exceptions sur la mise à portée de main des boutons stratégiques. Si une action a des conséquences graves, placer le bouton hors de portée est un moyen d’aider votre utilisateur à éviter les erreurs. Donc, si un cas de gros doigt pouvait coûter des milliers de dollars, ou supprimer un document important, déplacez ces options un peu plus haut.

Exemples de navigation dans la nature

Les nouvelles applications Apple ne sont pas les seuls produits qui commencent à respecter Reach Nav. Lyft et Pokémon Go mettent tout à portée de main.

Pokémon Go et Lyft utilisent Reach Navigation.

Certaines autres applications, telles que Overcast, ont commencé à utiliser des feuilles vous permettant de faire glisser votre doigt vers le bas.

Surcharge utilise des feuilles qui permettent aux utilisateurs de glisser vers le bas.

L'application Twitter Twitter iOS supprime la nécessité de faire glisser votre doigt depuis le bord de l'écran pour revenir en arrière. Vous pouvez désormais effectuer un balayage depuis n'importe où.

Attendez-vous à voir plus d'applications déplacer la fonctionnalité vers le bas sur la partie la plus accessible de l'écran. C’est assez facile à adapter, bien que les applications avec des fonctionnalités excessives auront le plus de problèmes.

Reste en contact

La barre de navigation fait partie intégrante d’iOS depuis le lancement du premier kit de développement par Apple, et elle nous a bien servis. Mais il est temps de se laisser aller.

Acceptons d’arrêter de coller des boutons importants en haut de l’écran. Une meilleure navigation est à portée de main.

Brad Ellis est le fondateur de Tall West, une agence de design dont les clients incluent Airbnb et Target. Il est lauréat du Apple Design Award et a reçu deux Webbys pour la conception d'applications. Si vous souhaitez travailler ensemble, envoyez-lui une lettre à Brad sur Tallwest.com.

Contributeurs: Ronan Rooney et Maggie Mason