MENU

Est-il temps de repenser la navigation de site internet ?

14 Oct
2019

Est-il temps de repenser la navigation de site internet ?

Le lien hypertexte est un aliment de base d’Internet depuis ses débuts. Le Web ne serait tout simplement pas du tout un site Web si nous ne reliions pas d’une page Web à une autre. Les liens font fonctionner le Web. Il serait donc logique de consacrer beaucoup de temps et d’efforts à la création de vos liens internes et de la navigation de votre site internet.

Est-il temps de repenser la navigation de votre site internet ?

Est-il temps de repenser la navigation de votre site internet ?

Mais ce n’est pas toujours le cas. Souvent, nous modifions la phase d’architecture de l’information d’une construction de site et retombons dans l’un des rares modèles de conception éprouvés – un modèle prédéfini – pour la conception de la navigation dans les sites.

Le statu quo de la navigation de site internet

L’une des nombreuses beautés de la création Web est les options quasi illimitées qui s’offrent à nous. Pourtant, nos systèmes de navigation semblent toujours coincés dans les solutions préformées existantes.

Pour les sites personnels de petite taille, une barre de navigation horizontale supérieure simple est l’option habituelle.

Barre de navigation horizontale

Barre de navigation horizontale

Pour les sites plus importants avec plus de pages vers lesquelles créer un lien, nous utilisons par défaut une barre de navigation verticale empilée pour nous permettre d’inclure plus de liens.

Barre de Navigation Verticale

Barre de Navigation Verticale

Dans d’autres situations, nous constatons que les menus déroulants ou menus volants sont utilisés pour maintenir le menu de navigation compact.

Menu déroulant sur la page d'accueil de Google.

Menu déroulant sur la page d’accueil de Google.

Il est facile de comprendre pourquoi nous avons ces options. Dans une certaine mesure, nous avons été obligés de nous y conformer à cause des limites précoces de la conception Web.

Au fil du temps, nos utilisateurs se sont habitués au statu quo. En conséquence, nous avons hésité à repenser la conception des systèmes de navigation.

Et même si nous n’avons pas mis nos utilisateurs au premier plan, pourquoi passer du temps à créer quelque chose de nouveau lorsque les solutions usurpées fonctionnent ? (Au moins pense-t-on qu’elles le font, de toute façon.)

Mais ces formes de navigation conventionnelles restent-elles les meilleures solutions ?

Évolution naturelle

Depuis sa création, la conception Web continue d’évoluer à un rythme rapide. Nos créations sont de plus en plus faciles à utiliser, plus agréables à utiliser, plus riches en fonctionnalités et plus optimisées pour la vitesse.

Grâce aux modifications apportées, nos conventions en matière de navigation sont restées inchangées, à l’exception peut-être de la courte augmentation des sites Web entièrement basés sur Flash qui ont introduit des conceptions assez uniques de systèmes de navigation.

navigation de site internet en Flash

navigation de site internet en Flash

Ce site Flash renonce aux modèles de conception de navigation courants que nous voyons dans la plupart des sites Web.

Bien qu’il existe de nombreuses raisons pour éviter de remonter à l’époque des sites web entièrement créés en Flash – que ce soit pour des raisons de performance, de SEO, d’accessibilité Web, d’indépendance vis-à-vis d’une technologie propriétaire, etc. – pour la plupart de nos projets, nous pouvons encore être en mesure de s’inspirer de ce que les sites Flash nous ont montré, en particulier pour repenser l’apparence et le fonctionnement de la navigation sur un site Web.

À mesure que les fonctionnalités des navigateurs Web se développent et que les spécifications de conception Web continuent de progresser – plus récemment avec CSS3 et HTML5 – nos possibilités de conception se multiplient.

La navigation sur les sites Web devrait être au premier plan de nos préoccupations lorsque nous tirons parti de ces nouvelles technologies pour améliorer l’expérience utilisateur.

Nous avons déjà vu le CSS3 en action dans une certaine mesure, notamment sur des conceptions Web responsives qui transforment la présentation du menu de navigation à la volée en fonction de la taille de l’affichage de l’utilisateur (à l’aide de requêtes de médias).

La navigation d'un site web responsif s'adapte automatiquement au format du support

La navigation d’un site web responsif s’adapte automatiquement au format du support

Sur le site du groupe Chopard, la disposition de navigation change d’horizontale à verticale en fonction de la taille de l’affichage.

Changer avec un but

Bien sûr, changer quelque chose juste pour changer est une mauvaise excuse. Nous ne devrions pas changer la conception et la disposition des systèmes de navigation simplement parce que nous avons les outils pour le faire.

Au lieu de cela, nous devrions aborder la situation en examinant les problèmes existants liés à la conception de la navigation et la manière dont nous pouvons les résoudre avec les nouvelles techniques disponibles.

Certaines des questions les plus importantes portent sur des éléments tels que l’emplacement de la navigation, à quel point elle devrait être expansive, ses formes et le type de retour d’information qu’elle fournira aux utilisateurs. Tous ces éléments conduisent à d’énormes décisions qui jouent un rôle central dans la création utilisable, flexible et pratique de votre conception.

Navigation de type Mega menu

Navigation de type Mega menu

Darty offre la possibilité de naviguer dans son immense stock de produits avec de multiples solutions de navigation.

Le nouveau visage de la navigation

Le CSS peut faire des choses vraiment excitantes de nos jours et il y a de nombreux designers  qui expérimentent et repoussent les limites de l’innovation.

Par exemple, Chris Coyier, blogueur et développeur Web, montre qu’il est possible de dessiner des formes adaptatives qui transcendent les limites d’évolutivité des images.

Design grâce au CSS

Design grâce au CSS

Le concepteur / développeur web Alex Girón nous montre que nous pouvons créer des effets d’animation et des transformations assez impressionnants avec son expérience impliquant l’orbite du système solaire.

Cet échantillon de possibilités montre des capacités assez impressionnantes. Il ne faut pas longtemps pour voir que ces expériences peuvent être adaptées de manière pratique pour résoudre les problèmes de conception.

Avec les formes et la possibilité de les animer, nous avons les éléments de base pour créer des interfaces flexibles et imaginatives.

Inspiration hors ligne ?

Il n’est pas nécessaire d’aller loin pour voir de nouveaux rebondissements quand on parle de navigation. Nos ordinateurs, chaînes stéréo, appareils ménagers, véhicules et même nos claviers utilisent tous un large éventail de formes, de tailles et de couleurs pour créer une interaction.

La barre d’espace de votre clavier n’est pas plus grande que les autres touches par ce qu’elle contient plus de caractères. Non, c’est juste que c’est la plus utilisée, c’est donc le plus important – une application de la loi de Fitt.

Clavier Azerty

Clavier Azerty source Wikipedia

Comparez la taille de votre barre d’espace à votre touche Y, par exemple. Dans votre conception Web, le lien Accueil (ou tout autre lien de navigation fréquemment utilisé) pourrait-il également bénéficier de la même augmentation de taille par rapport à un lien moins important ?

Les interfaces de nos chaines Hi-Fi, de nos télécommandes et de nos tableaux de bord de voiture offrent tous une grande variété de tailles, de formes et de couleurs pour indiquer les différences d’importance et de fonctionnalité.

La taille des boutons et leur disposition indique leur importance

La taille des boutons et leur disposition indique leur importance

Nous sommes en mesure de concevoir ces solutions dans nos interfaces Web sans sacrifier la flexibilité ou l’accessibilité, raison pour laquelle nous n’y avons pas recours, en utilisant l’amélioration progressive et d’autres pratiques exemplaires.

Pour illustrer mon propos, j’ai rassemblé un exemple rapide d’une navigation inspirée de la première génération par iPod, utilisant uniquement le langage HTML et CSS.

Ipod première génération

Ipod première génération

En réalité, un cercle permet souvent une utilisation beaucoup plus pratique de l’espace par rapport aux formes rectangulaires.

De plus, avec toutes les zones actives de notre navigation naturellement placées à égale distance les unes des autres, ce type de navigation est conforme à la loi de Fitts.

Bien sûr, cela peut ou peut ne pas être la meilleure solution pour une situation donnée, mais c’est la beauté de notre métier. Les concepteurs doivent prendre le temps et la considération nécessaire pour explorer toutes les contraintes inhérentes à chaque projet et élaborer des solutions individualisées et idéales.

Profitez des nouvelles opportunités pour la navigation sur votre site internet

Aujourd’hui plus que jamais, nous avons la possibilité d’utiliser notre créativité pour résoudre des problèmes complexes avec nos systèmes de navigation. L’adoption rapide de CSS3 libère une énorme quantité de potentiel de conception. Nous pouvons commencer à penser en dehors du nombre limité de modèles de conception que nous avons pour la navigation sur les sites.

CALCULATEUR DE COÛTS DE SITE WEB
Obtenir une estimation

Travailler avec nous

Continuer la lecture

Résumé
Nom de l'Article
Est-il temps de repenser la navigation de site internet ?
Description
Les interfaces utilisateur ont évolué à pas de géant ces derniers temps. Cependant, les conceptions de navigation sont restées inchangées. Est-il temps de sortir des sentiers battus ?
Auteur
Nom de l'éditeur
Metadosi

Nicolas Schiavon
author

Après 22 ans dans le monde de l'automobile et après avoir créé plusieurs sites internet de vente de voitures, dont le premier en 1997, et les premières pages Facebook de garage automobile, mais aussi dans d'autres domaines, Nicolas décide de mettre son savoir faire en marketing digital au services des entreprises qui décident de renforcer leur présence sur Internet. Assurer la visibilité des clients sur le digital, en les accompagnant dans leur transformation digitale et augmenter leur taux de convertion en générant des leads qualifiés grâce au référencement Google de notre agence SEO Metadosi.

Leave a reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest