Un cadre pratique d'information-architecture pour les sites mobiles qui doivent connecter produits, services, contenu éditorial, outils de compte et support.
Information parfum est la promesse derrière une étiquette de navigation
Un grand site mobile a un problème de compression. Produits, services, contenu éditorial, outils de compte et support ne peuvent pas tous rester visibles à la fois, de sorte que l'interface doit cacher le détail sans cacher le sens. L'odeur d'information est l'ensemble des repères que les gens utilisent pour prédire ce qu'ils trouveront après avoir suivi un lien. NN/g met l'accent sur des étiquettes claires et des repères contextuels parce que les utilisateurs choisissent des chemins en fonction de la valeur attendue, et non sur l'organigramme interne du site.
Sur mobile, l'odeur doit survivre à un petit viewport et à une divulgation plus fréquente. Une étiquette telle que "Solutions" peut être acceptable si la marque possède une architecture de produit bien comprise, mais elle peut être trop vague lorsqu'elle mélange conseil, logiciel et articles. Les services web, les soins de la peau ou le journal contiennent des informations de catégorie plus fortes. Le test consiste à déterminer si un visiteur peut prédire la destination avant d'ouvrir la succursale.
Commencez par les tâches utilisateur, pas les départements. Énumérez les principales raisons pour lesquelles les gens arrivent, les types de contenu dont ils ont besoin et le vocabulaire qu'ils utilisent. Concevoir ensuite des catégories de haut niveau qui divisent ces tâches avec une ambiguïté minimale. Un grand site n'a pas besoin de toutes les destinations dans la première couche; il a besoin de la première couche pour faciliter le choix suivant. Les catégories qui en résultent doivent être compréhensibles même lorsque le visiteur arrive au plus profond du site et n'a jamais vu la page d'accueil.
Garder le premier niveau court, mais pas mystérieux
La navigation mobile échoue souvent par surcompression. Un menu de trois mots abstraits semble élégant mais force les utilisateurs à ouvrir des branches pour découvrir les catégories de base. L'échec opposé est un mur de vingt liens sans hiérarchie. Utilisez un petit nombre de choix significatifs de haut niveau, puis exposez des groupes bien étiquetés sous eux. Le nombre correct est déterminé par l'architecture de l'information, et non par une formule de menu universelle.
Les étiquettes devraient être suffisamment concrètes pour établir une distinction entre les frères et sœurs. Si les services, les solutions et l'expertise conduisent tous à des offres qui se chevauchent, l'utilisateur doit deviner quelle distinction interne l'organisation entendait. Fusionner ou renommer les catégories jusqu'à ce que chacune porte une promesse distincte. Lorsqu'une étiquette doit utiliser un langage propre à la marque, ajoutez un descripteur court ou des liens d'enfant représentatifs afin que les utilisateurs inconnus puissent déduire la catégorie.
Gardez les utilitaires mondiaux séparés de la navigation primaire. Les contrôles de recherche, de compte, de panier, de langue, de support et de localisation servent souvent à des fins différentes des catégories de contenu. Le regroupement visuel empêche le menu de se sentir comme une liste indifférenciée. Il crée également des emplacements prévisibles pour les actions récurrentes, ce qui devient important à mesure que les utilisateurs se déplacent entre les domaines des produits, des services et de l'édition.
Utiliser des modes de divulgation qui préservent le contexte
La navigation mobile imbriquée est généralement un problème de divulgation : révéler le niveau suivant sans perdre le parent. Les Pratiques d'auteur de l'ARIA décrivent le modèle de divulgation comme un contrôle qui élargit et effondre le contenu caché, avec l'opération Enter ou Space et un état élargi par l'aria. La conception visuelle devrait correspondre à ce comportement sémantique. Un chevron qui semble extensible ne devrait pas s'éloigner de façon inattendue avant que l'utilisateur puisse inspecter les enfants.
Choisissez délibérément si une étiquette parentale est aussi une destination. Si les services ont une page d'aperçu utile, une approche est de faire naviguer le texte tandis qu'un contrôle de divulgation séparé, de taille adéquate élargit les enfants. Un autre est de laisser la rangée entière s'étendre et inclure -Tous les services - comme le premier enfant. Le mélange de ces motifs d'une branche à l'autre crée une hésitation parce que le même repère visuel produit des résultats différents.
Préservez la branche ouverte pendant que l'utilisateur explore. Lorsqu'un sous-menu remplace tout l'écran, montrez un titre parent clair et contrôle du dos plutôt que de forcer les gens à se souvenir d'où ils viennent. Le contexte de type Fil d'Ariane peut être léger sur mobile, mais la branche actuelle devrait rester explicite. Chaque étape plus profonde dépense l'orientation; l'interface doit rembourser ce coût avec des choix plus clairs. Gardez le titre de la branche visible lors d'une navigation plus profonde afin qu'une action arrière retourne dans un contexte nommé plutôt qu'un écran précédent anonyme.
Profondeur de contrôle avec des choix et des moyeux représentatifs
Les hiérarchies profondes ne sont pas intrinsèquement mauvaises si chaque étape porte une forte odeur. Un parcours de quatre niveaux à travers --Shop → Hommes → Chaussures → Courir - peut être plus facile qu'une liste plate de centaines de produits. Des problèmes apparaissent lorsque les niveaux intermédiaires contiennent des étiquettes vagues, des catégories dupliquées ou un seul enfant significatif. Vérifier chaque niveau pour savoir si cela réduit la tâche et si les utilisateurs peuvent prédire la couche suivante.
Utilisez des pages hub quand une catégorie mérite une explication, une comparaison ou une navigation croisée. Un centre de services peut présenter des familles de services importantes, montrer des preuves et des tâches populaires de surface; un centre de revues peut exposer des sujets et une couverture récente; un centre de magasins peut combiner des catégories avec des recherches et des filtres. Les hubs réduisent la pression sur le menu pour contenir chaque destination de feuille et donner aux utilisateurs un endroit récupérable pour réorienter.
Des liens représentatifs peuvent améliorer l'odeur dans une large catégorie. Sous les services, le design Web, l'identité de marque et le marketing peuvent expliquer la catégorie plus rapidement qu'un sous-titre. Sous « Journal », « Business », « Design » et « Technologie » font de même. Gardez les exemples à jour et évitez de laisser entendre que les enfants visibles sont l'ensemble complet si la branche contient plus.
Faire de la recherche un système de navigation parallèle
Sur un grand site, la recherche n'est pas une issue de secours. C'est un itinéraire de première classe pour les utilisateurs qui connaissent un nom de produit, un article, un identifiant de commande ou un terme de service. Gardez-le visible ou immédiatement accessible depuis chaque état mobile majeur. L'entrée de recherche ne doit pas nécessiter l'ouverture de plusieurs calques de menu, surtout lorsque le site contient de grands catalogues ou archives éditoriales.
Les résultats de recherche nécessitent des indices de type contenu. Une requête peut renvoyer un produit, un service, un article et un document d'aide avec des titres similaires. Étiqueter le type, montrer suffisamment de contexte pour distinguer le résultat et fournir des filtres utiles lorsque le volume de résultat les justifie. Une recherche unifiée sans type d'information peut accroître l'ambiguïté même si techniquement elle recherche plus du site.
Utilisez les journaux de requête pour améliorer la navigation. La recherche fréquente d'une catégorie qui est enterrée dans le menu peut révéler un faible parfum ou une proéminence manquante. Les requêtes zéro résultat peuvent révéler le vocabulaire que l'architecture d'information ne reconnaît pas. Les données de recherche ne vous indiquent pas automatiquement où déplacer un lien, mais elles fournissent des éléments de preuve sur la langue et les besoins de recherche non satisfaits qui devraient se réinsérer dans les étiquettes et la conception de catégorie.
Expose recency où le temps change la valeur
Le contenu éditorial et opérationnel a une dimension taxonomies produits manquent souvent : le temps. Un article de journal peut être persistant ou brisé; une politique de service peut avoir une date d'entrée en vigueur; un événement peut être à venir ou passé. La navigation et la recherche devraient révéler l'utilité de la destination lorsqu'elle change. Les dates de publication et les étiquettes d'état les plus récentes peuvent être plus parfumées qu'un lien générique.
Ne laissez pas les derniers remplacer la taxonomie stable. Les utilisateurs ont souvent besoin d'un sujet connu quelle que soit la date de publication, de sorte que le temps devrait compléter les catégories plutôt que les aplatir. Un grand site peut fournir la navigation thématique plus le contenu récent dans le sujet sélectionné. Cela donne aux visiteurs répétés un chemin rapide vers les mises à jour tout en préservant des itinéraires prévisibles pour les personnes arrivant avec un sujet spécifique à l'esprit.
Le comportement des archives nécessite une voie d'évasion. Lorsque quelqu'un atterrit sur un ancien article de la recherche, fournir le contenu actuel connexe, le hub du sujet et toute nouvelle politique ou référence de produit. Le système de navigation s'étend au-delà de l'icône du menu : les relations in-content et les indices du statut actuel aident les utilisateurs à récupérer des points d'entrée périmés sans redémarrer manuellement depuis la page d'accueil. Si une vieille page a un remplacement, la surface de cette relation explicitement au lieu de dépendre du visiteur pour déduire la fraîcheur à partir de la seule date de publication.
Concevoir des voies d'évacuation à chaque profondeur
Chaque état de navigation devrait répondre à trois questions: où suis-je, que puis-je choisir ici, et comment puis-je sortir? Une action rapprochée claire renvoie au contenu; une action arrière renvoie un niveau hiérarchique; l'étiquette de branche actuelle fournit une orientation; et Home ou un hub majeur offre une réinitialisation lorsque l'utilisateur a pris le mauvais chemin. Ne comptez pas sur le bouton de retour du navigateur comme le seul mécanisme de récupération à l'intérieur d'une superposition complexe.
Préservez l'état de la page sous-jacente dans la mesure du possible. Si un utilisateur ouvre le menu à mi-chemin d'un long article, explore une succursale et la ferme, les renvoyant en haut de l'article crée des coûts inutiles. Il en va de même pour les filtres de produits, les termes de recherche et les positions de défilement. La navigation devrait se sentir comme un mouvement à travers le site, pas une destruction répétée du contexte actuel de l'utilisateur.
Les transitions entre domaines ou applications nécessitent des repères plus forts. Si la gestion de compte, la commande ou l'aide ouvre un système séparé, informez l'utilisateur par un marquage cohérent et un étiquetage de destination clair. L'environnement inattendu change l'odeur de l'information de dommages parce que le chemin promis ne ressemble plus au résultat. Préserver un itinéraire pour revenir à l'expérience principale et éviter les microsites morts qui gâchent les utilisateurs mobiles.
Tester la hiérarchie avant de polir l'animation
Le tri des cartes et les essais d'arbres peuvent évaluer l'architecture de l'information sans distraction du style visuel. NN/g décrit le tri des cartes comme une méthode pour comprendre comment les concepts de groupes d'utilisateurs et les essais d'arbres comme un moyen d'évaluer si les étiquettes et la hiérarchie conduisent les gens vers les destinations prévues. Pour un grand site, ces méthodes peuvent exposer les limites de catégorie faible avant que l'ingénierie investit dans un comportement de menu complexe.
Ensuite, testez la navigation implémentée sur des appareils mobiles représentatifs avec des tâches qui croisent les types de contenu: trouver un produit, comparer un service, localiser un article récent, atteindre le support, revenir au contexte précédent et rechercher un article connu. Inclure les vérifications du clavier et de la technologie d'assistance pour les contrôles de divulgation, les ordres de mise au point et les annonces d'état. Un menu visuellement élégant n'est pas complet si sa hiérarchie n'est compréhensible qu'aux utilisateurs pointeurs. Tester avec les premiers participants lorsque c'est possible, car les équipes internes peuvent naviguer avec succès en se souvenant de l'organisation plutôt que de lire les étiquettes.
La gouvernance empêche les odeurs de se dégrader. De nouvelles équipes demanderont des liens de haut niveau, des campagnes inventeront la terminologie et des sections désuètes s'accumuleront. Exiger un propriétaire pour le modèle de navigation, des preuves d'ajouts importants et un examen périodique des journaux de recherche, du succès des tâches et des branches en panne. La meilleure navigation mobile pour un grand site Web n'est pas l'arbre le plus peu profond; c'est celui dont les étiquettes, les divulgations, les itinéraires de recherche et d'évasion maintiennent chaque étape suivante prévisible.
Checklist pratique
- Énumérez les principales tâches et types de contenu avant de nommer les catégories.
- Tester les étiquettes de frères et sœurs pour le chevauchement et le jargon interne.
- Choisissez un comportement cohérent parent-lien versus divulgation.
- Ajouter des repères et des filtres de type contenu à la recherche transversale au besoin.
- Tester les anciens articles et les liens profonds pour les voies d'évacuation actuelles.
- Exécuter des essais d'arbres et des tâches mobiles représentatives avant le vernis visuel final.
Questions et réponses
Quelle profondeur la navigation mobile devrait-elle avoir sur un grand site?
Il n'y a pas de profondeur maximale universelle. Une hiérarchie plus profonde peut bien fonctionner lorsque chaque niveau réduit clairement la tâche de l'utilisateur et que les étiquettes ont une forte odeur d'information. Un menu peu profond peut être pire s'il présente une liste plane écrasante ou des catégories vagues. Vérifier chaque niveau intermédiaire : il devrait contenir des choix significatifs, préserver le contexte parent et fournir un moyen clair de revenir en arrière. Supprimer les niveaux qui n'ajoutent aucune valeur de décision plutôt que de poursuivre un nombre fixe.
Est-ce que taper sur un élément de navigation parent devrait ouvrir une page ou élargir le sous-menu?
Chaque modèle peut fonctionner, mais le comportement doit être cohérent et visuellement clair. Si le parent a une page d'aperçu précieuse, l'étiquette peut naviguer tandis qu'un contrôle distinct de divulgation élargit le sous-menu, à condition que les deux cibles soient accessibles et suffisamment grandes. Alternativement, la ligne peut s'étendre et un lien "All" peut apparaître parmi les enfants. Évitez les lignes identiques qui naviguent et qui s'étendent parfois, car les utilisateurs ne peuvent prédire le résultat du même geste.
Où la recherche devrait-elle apparaître sur un grand site mobile?
La recherche doit être traitée comme un système de navigation parallèle et rester visible ou immédiatement accessible à partir des principaux états de page et de menu. Les utilisateurs qui connaissent un nom de produit, un titre d'article ou un terme de support ne devraient pas avoir à inspecter une hiérarchie en premier. Les résultats devraient identifier les types de contenu et fournir suffisamment de contexte pour distinguer des éléments semblables. Les journaux de recherche peuvent également révéler des étiquettes de menus faibles, des destinations enterrées et des lacunes de vocabulaire qui méritent des changements à l'architecture de l'information.