3 tendances essentielles de la navigation pour 2015
Bonne année à tous nos lecteurs! Aujourd'hui, nous allons examiner trois tendances de navigation clés qui domineront 2015.
On pourrait penser que nous avons exploré toutes les variations possibles de la navigation sur le Web, et pourtant nous continuons à explorer cette niche très spécifique. Il est vraiment étonnant de voir combien de variantes de design peuvent être appliquées à une liste de liens humble.
Ici, je veux considérer 3 tendances populaires dans le domaine de la navigation: d'abord comment l'utilisation du navicon (ou icône de hamburger) change, puis une nouvelle approche utilisant des menus plein écran et enfin ce que je considère comme la perfection du menu déroulant. Plongeons et voyons ces approches à l'œuvre.
Longue vie / mort au navicon!
Facebook est reconnu pour avoir popularisé l'utilisation des navicons pour masquer les options de navigation hors écran ou hors toile. Avec la naissance du responsive web design, la communauté de la conception Web cherchait désespérément une solution à la navigation. Tout emballer dans un panneau de navigation qui se trouve sur une toile et qui passe à la sélection du navicon était une solution attrayante. Il semble que la communauté s’y soit appuyée comme une solution assez simple qui semblait rendre la vie beaucoup plus facile pour le concepteur et le développeur. En conséquence, le navicon est devenu une option incontournable pour les applications mobiles et les sites Web.
Récemment cependant, le navicon a été attaqué. Dans beaucoup de ces débats, il semble qu'un détail crucial soit omis. L'industrie des applications mobiles s'éloigne facilement de la navigation hors écran en faveur des options à l'écran. Cela se produit alors que la tendance est aux applications concentrées et à usage unique. Cela rend le changement plus raisonnable. En revanche, même un petit site Web peut contenir des dizaines, voire des centaines de liens dans la navigation. Prenons par exemple un site comme sony.com, ou même ce site. Ces sites ont des besoins de navigation qui vont bien au-delà de ce qui est possible avec un simple onglet. Pour cette raison, il me semble que les navicons et les menus hors-écran sont là pour rester. Nous devons simplement être conscients de leurs limites, de leurs problèmes potentiels, etc. Et bien sûr, gardez toujours à l'esprit l'utilisation: s'agit-il d'une application mobile ou d'un site Web mobile / réactif. Parce qu'ils ne sont pas les mêmes.
Le site Web de l'agence de design Long Story Short est un bel exemple de la manière de tirer parti du navicon de manière significative et restreinte. Ce site utilise le navicon pour masquer l’ensemble des options de navigation. Il le fait à la fois sur les versions mobile et de bureau du site. L'utilisation de navicons sur le bureau est en fait une sous-tendance entière ici. Ce qui fait de ce site un excellent exemple de cette approche, c’est que les éléments les plus critiques de la navigation apparaissent en dehors du menu . La page d'accueil est un portail vers les trois sections les plus importantes du site. De cette façon, le menu caché n'est pas la navigation principale, mais plutôt une navigation secondaire qui remplit les espaces.
Le site Squarespace est un autre bel exemple d'utilisation efficace des menus cachés. Sur ce site, les options de visite et de connexion sont toujours visibles. Environ 23 options de menu au total sont contenues dans le menu déroulant. Franchement, l'utilisation de menus cachés pour permettre aux options de navigation les plus importantes de prendre le dessus est tout simplement géniale. Je suis passé par une phase où j'étais vraiment sur l'utilisation des navicons sur le bureau; cela semblait être une mauvaise utilisation de la technique. Cependant, après avoir vu comment les sites l'utilisent pour amener les utilisateurs vers les éléments les plus critiques, je ne peux m'empêcher de l'aimer.
Enfin, si vous éprouvez de la peine à utiliser des navicons ou si des menus cachés ne vous conviennent pas. Au lieu de cela, faites vos propres tests d'utilisabilité pour voir si cela fonctionne pour votre site. Une bonne règle de base est d'éviter le débat et de faire le test à la place.
Navigation plein écran
La deuxième tendance que je voudrais examiner est l’utilisation des menus de navigation en plein écran. Ces menus sont généralement activés par un bouton ou un lien quelconque; assez fréquemment un navicon. La différence ici est qu’au lieu d’un petit panneau qui se déploie, la navigation couvre tout l’écran. Sur le mobile, cela semble normal, mais sur le bureau, c'est en fait une approche nouvelle et intéressante.
La navigation sur ce site est vraiment intéressante en ce sens que la superposition de navigation contient beaucoup de punch dans le menu. Ici, ils ont les options de menu attendues, mais comme il est plein écran, ils ont aussi de la place pour un formulaire de contact complet, des informations de contact, des liens sur les réseaux sociaux, un article de blog récent et un appel à l'action.
Il est intéressant de noter qu'un utilisateur qui lance un menu à tout moment est à la recherche de sens. Cela en fait une excellente occasion de les orienter vers ce que vous voulez qu'ils fassent. Dans ce cas, ils souhaitent que l'utilisateur contacte ou visite leur planificateur de projet.
Dans cet exemple, nous voyons également le modèle au travail, mais de manière beaucoup plus minimaliste. Au lieu d'emballer des options supplémentaires, ils ont choisi de présenter simplement une liste très concise d'options de navigation. De plus, ils obtiennent des points bonus pour animer le navicon dans un "x" pour fermer le menu.
La perfection du menu surdimensionné
Enfin, je souhaite considérer le menu déroulant super ou méga. L'utilisation de systèmes de menus super-taille n'est pas nouvelle. Ce que je trouve intéressant, c'est le contenu placé à l'intérieur d'eux. Selon moi, les concepteurs ont vraiment mis ce nouvel espace à contribution de manière puissante.
Le site Web de Lowes démontre parfaitement ce que je pense. Vous pouvez voir ici que le système de menus est devenu un emplacement pour le contenu. Ce contenu peut être utilisé pour diriger le flux d'utilisateurs via le site. Plus important encore, il peut les amener vers le contenu le plus important. La question devient, quel est le contenu le plus important? Peut-être que ce sont les articles les plus rentables de votre magasin. De cette manière, la navigation agit comme un vendeur en poussant les produits les plus rentables. Ou peut-être est-il utilisé pour guider les utilisateurs vers les articles les plus populaires.
Un autre site utilisant cette option de manière légèrement différente est le site Web New Balance. Ici, les trois premières listes déroulantes sont de grande taille, mais sont essentiellement des listes de liens. Cependant, la dernière option pour créer des chaussures personnalisées produit la liste déroulante ci-dessus. Cette option de menu est un lien unique. J'adore qu'ils aient profité de l'occasion pour faire de cet unique élément une intro vraiment convaincante du contenu du lien.
Conclusion
Bien que nous puissions en discuter séparément, ces trois tendances ont de nombreux points communs. Le principal parmi ceux-ci est la façon dont la navigation a changé au fil des ans. Les menus déroulants étaient généralement une liste organisée de liens. Pour la plupart, ils étaient plutôt neutres en ce sens que toutes les choses étaient présentées de manière égale. Nous constatons maintenant que les systèmes de navigation sont un moyen essentiel d'aider les utilisateurs à atteindre les objectifs souhaités.
Pour moi, le défi est clair. Que nous devrions élever notre réflexion sur la navigation et comprendre l’influence qu’elle a sur l’expérience de l’utilisation des sites Web que nous créons. Trop souvent, je trouve que la navigation est un peu une réflexion après coup. En fait, il devrait figurer parmi les éléments les plus considérés et les plus raffinés de la conception.