L'idée selon laquelle les menus de navigation doivent être fixés en haut d'un site Web a disparu depuis longtemps. Alors que de nombreux concepteurs optent pour la sécurité et la cohérence de la navigation en majuscules dans le haut de l'écran avec la typographie sans empattement, de nombreux modèles sortent de là.
Les modèles de navigation expérimentaux peuvent être amusants et intéressants s’ils sont suffisamment intuitifs pour que les utilisateurs puissent les comprendre rapidement. Différents styles de navigation peuvent ajouter de l'intérêt aux sites Web de petite taille, ne contenant pas beaucoup de contenu ou souhaitant que les utilisateurs se déplacent de manière spécifique.
Bien que la navigation expérimentale ne concerne pas tous les modèles, elle peut constituer une alternative amusante au bon projet.
Navigation latérale
Il y a beaucoup de façons de faire de la navigation latérale. Il peut être statique ou dynamique et peut être presque n'importe quelle largeur.
Bien que cela ne semble pas être expérimental, déplacer la navigation du haut vers le côté peut s'avérer très pénalisant, car cela modifie les proportions de la toile.
Ensuite, vous devez prendre en compte l’aspect de cette barre de navigation, souvent maigre, sur les autres tailles d’écran. Et que faites-vous si le menu de navigation contient des mots longs (vous ne voulez pas d'une barre de navigation remplie de traits d'union)?
Il y a beaucoup à considérer.
La meilleure navigation latérale est simple, avec des mots courts et un espace fixe. Trop de défilement dans la navigation est discordant et difficile à comprendre. L'exemple de Sanctum, ci-dessus, est simple et net. La navigation reste au même endroit lorsque l'utilisateur fait défiler, le texte s'ajuste uniquement de clair à foncé lorsque l'arrière-plan change.
La bonne chose à propos de cet exemple est que le modèle de navigation verticale incite les utilisateurs à commencer par regarder le nom et le logo, puis à se déplacer en ligne droite sur l'écran pour voir les options de navigation disponibles. C'est bien conçu et fonctionnel.
Caché et Pop-Out
L’utilisation massive des hamburgers et d’autres fonctions de navigation cachées à la manière des icônes est l’un des principaux avantages des menus contextuels.
Cliquez ou appuyez sur le bouton pour que la navigation bascule sur tout ou partie de l'écran (souvent en fonction de la taille de l'écran).
En soi, ce n'est pas vraiment expérimental. Mais le fait que tant de concepteurs le fassent de tant de façons différentes l’est. On peut soutenir que les utilisateurs s'habituent aux icônes des hamburgers, mais ces modèles restent encore quelque peu inconnus. Et avec les concepteurs utilisant différents types d'icônes, il y a aussi un petit défi.
Néanmoins, le style pop-out de Caava Design ci-dessus est intéressant. Alors que la plupart des concepteurs optent pour des variations simples et plates, celle-ci a plus de profondeur. La conception aide les utilisateurs à trouver les parties les plus importantes de la navigation pour les guider à travers la conception.
Défilement horizontal
Les premières fois que vous rencontrez un site de défilement horizontal peuvent être un peu étranges. Il faut une conception spécifique pour que ce flux se sente bien en raison de la différence étrange entre les mouvements physiques et visuels.
Pour tirer le meilleur parti de la navigation par défilement horizontal, les concepteurs doivent utiliser des repères visuels pour rendre l’idée plus confortable pour les utilisateurs. Des flèches ou d'autres outils directionnels peuvent être utiles.
Norgram, ci-dessus, utilise également une image partielle pour indiquer qu'il y a davantage de contenu sur le côté de l'écran avec un aspect fixe du haut vers le bas. Le contenu est structuré de telle sorte que le mouvement horizontal semble beaucoup plus naturel en raison des repères visuels fournis.
Pas de navigation
Certains sites Web éliminent complètement la navigation et optent pour un style tout à l'écran. Ce peut être un motif délicat à coup sûr. Les utilisateurs sauront-ils sur quoi cliquer et quelles actions entreprendre?
Le? Pas de navigation? Le modèle de navigation fonctionne mieux pour les très petits sites qui demandent aux utilisateurs de faire une chose. Cela peut fonctionner pour une page à venir ou un site Web de style remerciement / récapitulation tel que la page de révision de l'année ci-dessus. Avec juste une poignée d'éléments cliquables et un petit parchemin, il est facile à comprendre.
L'animation simple dans la conception aide également. (Vous pouvez sans doute appeler cela navigation car cela encourage les utilisateurs à se déplacer). Cela peut être un motif délicat pour le moins.
Une seule page avec des marqueurs
Un grand nombre des modèles de navigation expérimentaux utilisés sont déployés sur des sites Web d'une page. Et pour cause: il est beaucoup plus difficile pour les utilisateurs de se perdre dans le format d'une page.
Pour fournir une orientation et aider les utilisateurs à sentir qu'ils progressent dans la conception, beaucoup de ces modèles de navigation d'une page reposent sur des marqueurs. Tout comme le format de curseur traditionnel avec un point ou une barre pour noter la progression, ce style de navigation utilise le même concept.
Socius, ci-dessus, fait un très bon travail avec des marqueurs sur le côté droit de la page qui incluent un texte survolé qui indique aux utilisateurs ce que chaque point représente. (Il s'agit d'une fonctionnalité qui manque souvent avec ce style de navigation.) Les utilisateurs peuvent utiliser l'effet de survol et les points pour passer à des informations spécifiques ou faire défiler les sept écrans.
Le truc pour ce style de design est de faire en sorte que tout soit rapide. Des effets de défilement lisses et une conception compréhensible, comme illustré dans cet exemple, aident les utilisateurs à parcourir le contenu.
Navigation subtile de bord
Certains concepteurs font pivoter la navigation de 90 degrés et l’ancrent au bord droit de la page. C'est une astuce subtile qui concerne principalement les sites Web de petite taille ou de type portefeuille, qui apparaît de plus en plus fréquemment.
Les éléments de navigation de ce style ont tendance à ne comporter que du texte, ne comprennent que quelques éléments et sont généralement petits. Le texte de navigation pivoté peut pointer vers ou hors de la conception, en fonction d'autres éléments à l'écran.
Comme avec la navigation verticale, cette idée peut modifier le rapport de format global du dessin, car un ruban est coupé latéralement pour la navigation. Le souci de ce style est que les éléments de navigation sont subtils et petits, ce qui les rend faciles à manquer.
Conclusion
Êtes-vous plus traditionaliste en matière de navigation ou êtes-vous prêt à essayer quelque chose de différent? Les schémas de navigation expérimentale sont l’une de ces tendances qui semblent gagner du terrain.
Alors que de plus en plus de concepteurs utilisent ce type de techniques, les utilisateurs s’habituent au changement et s’adaptent. Mais il y a toujours ce souci des utilisateurs qui ne comprennent pas. J'aimerais savoir ce que vous pensez des différents styles de navigation. Faites-moi savoir sur Twitter et tag @designshack.