Principales tendances de la navigation Web
Au cours de l’année écoulée, nous avons vu beaucoup de croissance et de nouvelles tendances dans le monde de la conception web . Dans cet article, je me concentrerai sur la navigation sur les sites Web et sur les modèles que les concepteurs Web ont adoptés pour aider les gens à se repérer sur leurs sites. Ces tendances de navigation fonctionnent toutes bien pour une variété de types de sites, et site Web adaptatif sur différentes formes et tailles d'écran, il y a donc beaucoup de variété ici pour trouver des idées pour votre prochain projet de conception.
01. Barres de navigation collantes
La navigation est conçue pour aider les utilisateurs à se rendre du point A à tous les autres points d'un site. Et garder le menu de navigation dans un endroit fixe permet aux utilisateurs de naviguer sur le site de n'importe où sur la page. De nombreux sites Web «collent» leur navigation principale en haut de l'écran lorsque l'utilisateur fait défiler vers le bas pour explorer le contenu.
C'est devenu plus facile grâce au CSS et plugins jQuery et de nombreux thèmes de sites Web sont maintenant livrés avec une barre de navigation collante par défaut, et cette tendance ne montre aucun signe d'aller nulle part. Une navigation et une convivialité cohérentes sont toutes deux importantes, mais la barre de navigation fixe est également pratique pour les utilisateurs mobiles, où le site est naturellement plus long et plus mince.
Comment devriez-vous l'utiliser?
Si votre site contient de nombreux éléments de navigation, il est judicieux de le maintenir fixe. C'est un moyen infaillible de garder les visiteurs sur le site plus longtemps et d'augmenter le nombre total de pages vues.
Cependant, assurez-vous que la barre de navigation ne prend pas trop de place. Il ne doit pas être si volumineux qu'il bloque une grande partie du contenu de la page. Le site pour Magazine américain contourne ce problème en redimensionnant la taille de sa barre de navigation à mesure que l'utilisateur fait défiler vers le bas, ce qui la rend moins intrusive. Tant que l'utilisateur peut toujours consommer le contenu de la page, il bénéficiera probablement d'une navigation fixe universellement accessible.
02. Méga menus
Le méga menu a été popularisé avec l'augmentation des blogs de style magazine. Ils diffèrent des menus déroulants normaux car, au lieu de simplement descendre verticalement, ces méga menus s'étendent plus largement, contenant généralement plusieurs colonnes de contenu. Cette technique fonctionne bien si elle est utilisée judicieusement, mais elle n’est pas idéale pour tous les sites. En fait, ce n’est vraiment utile que si vous avez suffisamment de contenu pour justifier un méga menu.
Pourquoi les utiliser?
Les visiteurs peuvent avoir une idée de votre blog ou site Web en parcourant le contenu associé. Si vous pouvez fournir plus de contenu dans un méga menu, pourquoi pas?
Cette tendance ne fonctionne pas sur les mobiles, car il n'y a pas de place sur l'écran. Mais de nombreuses personnes continuent de naviguer sur le Web sur des ordinateurs de bureau et portables, de sorte qu'il existe un large public en faveur du méga menu.
03. Navigation universelle
Certaines entreprises travaillent avec ou possèdent plusieurs marques et incluent une navigation universelle sur l'ensemble d'un site Web. Disney, par exemple, possède des parcs à thème, crée des jeux et produit des films ainsi que des émissions de télévision. Il est logique de conserver cette navigation universelle sur chaque page, quelle que soit la marque, pour attirer l'attention sur d'autres produits Disney.
Et cette tendance n’est pas exclusive aux conglomérats ou aux holdings. Il est parfois utilisé sur des réseaux de sites Web, tels que ceux appartenant à Médias de New York . Un autre bon exemple est dans l'en-tête de Mashable , qui renvoie à tous les sites internationaux de la marque.
Pourquoi utiliser ça?
Si vous travaillez avec un plus grand réseau de produits ou de marques, il peut être utile de les relier tous ensemble afin de créer une identité de marque cohérente. Une navigation universelle peut attirer les visiteurs sur l'ensemble du réseau pour aider à polliniser différents publics.
04. Navigation coulissante verticale
De plus en plus de sites Web adoptent la tendance de la navigation verticale, et quand cela fonctionne, cela fonctionne vraiment bien. Il est particulièrement populaire sur les portefeuilles ou les agences de création qui repoussent les limites de la conception Web traditionnelle.
L'exemple ci-dessus de AWARD est un cas fantastique d'utilisation de la navigation verticale tout en la gardant visible à tout moment. Les icônes sont liées sur le côté pour que vous puissiez cliquer sur une icône au lieu de l'icône de hamburger. Il s'agit d'une approche expérimentale de la conception de navigation, mais elle peut fonctionner sur des sites Web orientés vers la création.
Pourquoi utiliser ça?
N'essayez cette technique que si vous optez pour une mise en page plein écran qui s'éloigne d'une conception de grille traditionnelle.
Une navigation verticale fonctionnelle n'est pas facile à créer à partir de zéro et il est difficile de la faire fonctionner dans des conceptions réactives. Cependant, si vous êtes curieux d'expérimenter et que vous souhaitez essayer de nouvelles idées, les navettes verticales peuvent être une nouveauté rafraîchissante.
05. Menus masqués globalement
Chaque concepteur de sites Web doit connaître les icônes de hamburgers et leur utilisation dans la conception réactive. Mais à mesure que les gens se familiarisent avec l'icône du hamburger et ce qu'elle signifie, de plus en plus de sites gardent la navigation cachée à tout moment.
Cela peut sembler étrange car cela n'aide pas le visiteur à trouver rapidement des liens. Cependant, il libère de l'espace sur l'écran en supprimant la navigation de la vue. Il y a eu diverses études qui indiquent que la plupart des utilisateurs ont du mal avec les menus cachés. Mais cette tendance peut changer avec un plus grand nombre de personnes utilisant des smartphones et se familiarisant avec la signification de l'icône du hamburger.
Pourquoi les utiliser?
Le meilleur scénario pour un menu masqué globalement est avec un public averti en technologie. Ces visiteurs reconnaissent l'icône du hamburger et savent que cela signifie «cliquez ici pour le menu». Donc, si vous concevez un blog technologique ou créez une agence numérique B2B, cela peut fonctionner. Mais si ce n'est pas le cas, réfléchissez longuement avant d'adopter cette approche et assurez-vous de ne pas sacrifier la convivialité au profit du style.
06. Menus de sous-navigateur réactifs
Lors de la conception d'un site Web, il est impossible d'éviter de gérer la navigation mobile. C'est populaire et c'est là pour rester. Les concepteurs masquent souvent certains liens de navigation sur mobile pour aider le menu à mieux s'adapter sur les petits écrans.
Mais de nombreux sites suivent une nouvelle tendance consistant à conserver tous les éléments de navigation en utilisant des menus déroulants. Cela nécessite généralement un hamburger nav avec des icônes de bascule pour les listes déroulantes de liens.
Vous ne verrez cette technique que sur les écrans mobiles ou dans les petites fenêtres de navigateur. Par exemple, Politique Le site mobile du site utilise de petits signes plus (+) pour indiquer un sous-menu à côté de chaque lien.
Pourquoi les utiliser?
Les visiteurs doivent avoir accès à l'ensemble de votre site Web, quel que soit l'appareil qu'ils utilisent. En gardant les sous-menus en place, vous pouvez offrir de meilleures opportunités aux visiteurs de naviguer.
Assurez-vous simplement que chaque sous-menu est clairement indiqué par une icône, un changement de couleur ou quelque chose de visuel. Les visiteurs doivent savoir si cliquer / appuyer sur un lien ouvre un menu ou les amène à une nouvelle page.
07. Carrousels du top story
Cette tendance est de plus en plus populaire sur les blogs et les sites d'actualités à fort volume. Beaucoup de ces sites plus importants peuvent publier des dizaines, voire des centaines, de nouveaux articles chaque jour.
L'ajout d'un simple carrousel en haut de la page permet aux visiteurs de consulter les derniers articles. Ces histoires peuvent être organisées ou mises à jour dynamiquement, et elles peuvent être stylisées avec des miniatures ou ce que vous voulez. Vous pouvez voir un autre exemple sur essentiellement tout article de Vogue .
Pourquoi les utiliser?
Si vous concevez un blog avec un contenu à volume élevé, cette tendance peut faire des merveilles pour l'expérience utilisateur. Les visiteurs peuvent se renseigner sur les histoires récentes et cela augmentera le temps total moyen sur le site en encourageant les visiteurs à explorer plus d'une histoire par visite. La plupart des blogs qui publient beaucoup de contenu veulent augmenter la rétention des visiteurs et le carrousel d'articles est un excellent moyen de le faire.
08. Table des matières
Google semble aimer le contenu long et il incite les rédacteurs à publier des guides plus longs sur pratiquement tout. Cela fonctionne très bien pour le contenu Web, mais cela peut brouiller l'expérience de lecture. Pour simplifier les choses, j'ai remarqué que davantage de boîtes de table des matières étaient ajoutées dans des articles plus longs avec des sections définies. L'exemple le plus notable est Wikipédia , qui utilise une ToC depuis sa création.
Pourquoi les utiliser?
La principale raison d'utiliser une table des matières est d'améliorer l'expérience utilisateur. Les articles plus longs deviennent la norme et il peut être intimidant d'atterrir sur un article de plus de 5000 mots. Une ToC réduit ce facteur d'intimidation. Ils sont également utiles dans les classements SERP, car Google peut offrir liens de saut basé sur une table des matières. C'est une approche gagnant-gagnant.
09. Liens d'angle en majuscules
Il s’agit d’une tendance subtile à la navigation, mais qui s’est répandue rapidement ces dernières années. Il semble que chaque startup et entreprise professionnelle utilise le style de texte en majuscules pour créer une navigation intuitive et symétrique.
Ces navs suivent généralement des styles très similaires:
- Toutes en majuscules
- Petit lettrage
- Sans-serif fonts
- Espacement horizontal supplémentaire
- Teinte blanche ou très claire
Chaque fois que je vois une navigation comme celle-ci, c'est presque un événement accueillant. Cette tendance de conception est devenue le style de signature pour une navigation propre, nette et professionnelle.
Pourquoi les utiliser?
Un menu de navigation tout en majuscules semble juste professionnel; il est subtil mais perceptible et il donne un sentiment de confiance à l’utilisateur. Si vous concevez une startup ou un site Web d'entreprise, cette tendance est probablement le meilleur style de conception à suivre pour votre navigation. Méfiez-vous cependant: vous ne voulez pas vous retrouver avec un site sans âme ou qui ressemble à tout le monde.
10. Navigation par points sur une seule page
La montée en puissance des sites Web d'une seule page a propulsé de nombreuses nouvelles tendances sous les projecteurs. L'une d'elles est la navigation par points: une série d'icônes circulaires situées sur le côté gauche ou droit de l'écran. Chacun de ces points représente une section différente du site. Et comme la mise en page est une longue page, ces liens sont mis en évidence pour indiquer la position actuelle de l'utilisateur. J'aime beaucoup l'ingéniosité de cette tendance, mais il y a un point d'interrogation pour savoir si les gens comprennent ce que ces points représentent ou comment les utiliser.
Pourquoi utiliser ça?
Si vous concevez une seule mise en page, je vous recommande d'utiliser une barre de navigation collante en haut de la page. Cela permet de voir plus facilement ce que représente chaque diapositive et quel type d'informations se trouve sur la page.
Mais si vous ne pouvez pas (ou ne voulez pas) utiliser une navigation par le haut, ces fonctionnalités par points sont la meilleure chose à faire. Ou encore mieux: combinez les deux! Il est possible d’avoir une navigation supérieure avec des liens textuels et d’inclure également des icônes de navigation par points. Ou même inclure du texte à côté des points. Il existe de nombreuses options parmi lesquelles choisir, et elles peuvent toutes bien fonctionner.
Articles Liés:
- Les meilleurs outils de couleur pour les concepteurs Web
- Comment la conception Web réactive a changé le monde
- Nouvelles compétences en conception UX
