Modèles de navigation essentiels en 2016
Votre menu de navigation crée ou rompt l'UX de votre site Web. C'est ce que vous devez concevoir en priorité à tout moment. Il n'y a pas de meilleur service que vous pouvez fournir à vos clients en tant que concepteur que de vous assurer que les sites que vous créez pour eux offrent une expérience utilisateur étonnante et hautement fonctionnelle.
Un UX splendide garantit que les sites de vos clients obtiennent plus de prospects, de visiteurs et de lecteurs, sans parler de retenir les visiteurs réguliers. C'est la partie la plus importante de la création d'un site et vous avez un grand contrôle sur la façon dont vous concevez le menu de navigation de votre site.
Malheureusement, ce ne sont pas tous les concepteurs qui accordent la priorité à la conception pour une excellente navigation, ce qui ne rend pas service aux clients et aux visiteurs.
Pour créer une réputation très crédible en tant que concepteur et être un concepteur en demande, vous devez maîtriser l'un des aspects les plus fondamentaux de la conception Web. Cela crée une navigation stellaire pour les sites de vos clients.
Voici comment.
Navigation collante
Navigation collante est un composant essentiel de la navigation car il permet à vos utilisateurs d'accéder instantanément au menu et de trouver facilement ce qu'ils veulent sur votre site. La navigation collante reste en place lorsque les utilisateurs font défiler une page. Il n'y a rien de plus frustrant, surtout dans le cas des pages à long défilement, que de devoir faire défiler complètement la page pour naviguer sur une autre page du site.
Rappelez-vous que sur le Web, la vitesse est primordiale (chargement de pages, recherche du contenu souhaité, etc.). Il est donc recommandé de permettre aux utilisateurs d’accéder au menu de navigation plus rapidement.
En intégrant une barre de navigation adhésive, vous contribuez également à réduire la charge cognitive de vos utilisateurs en plaçant constamment leurs choix de navigation devant eux.
Presse alternative dispose d’un bon exemple de la manière d’intégrer la navigation collante dans vos pages. Notez que toutes les sections les plus importantes sont facilement accessibles et identifiables, par un contraste de couleur efficace, dans la barre de navigation, quelle que soit la distance parcourue.
Hypertexte évident
Hypertexte est une référence de texte sur vos pages, sur laquelle les utilisateurs peuvent cliquer pour obtenir des informations supplémentaires, généralement sur une autre page, que ce soit sur le même site ou hors site. Les hyperliens sont probablement l'exemple le plus identifiable d'hypertexte.
Comme l'hypertexte contient des informations qui vont aider l'utilisateur à fournir plus d'informations, il est évident que ces références utiles sont très visibles. Dans l'ensemble, cela ajoute à la navigabilité du site que vous créez.
Je recommande de rendre hypertexte flagrant par deux fonctionnalités simples:
- Soulignement
- Changer la couleur
Lorsque vous soulignez un mot sur votre page, content-let dit qu'il s'agit d'un lien hypertexte vers la page de votre client, il attire immédiatement l'attention des visiteurs du site, ce qui leur permet de naviguer plus facilement vers des informations importantes.
De même, lorsque vous faites en sorte que la couleur des liens hypertexte soit différente de celle du texte et de l’arrière-plan de vos pages, faites-la ressortir sur la page pour que les utilisateurs puissent facilement l’identifier et cliquer dessus.
Site marketing L'œuf quotidien utilise à la fois le soulignement et différentes couleurs pour son hypertexte, ce qui permet aux utilisateurs d’identifier très facilement les liens.
Menus méga
Menus méga sont une excellente idée pour la navigation, surtout si le site que vous concevez pour votre client a beaucoup de contenu et de catégories. Les magasins de commerce électronique me viennent à l’esprit. Il s’agit d’énormes panneaux déroulants qui ouvrent des couches de navigation supplémentaires pour aider vos utilisateurs à trouver plus rapidement ce qu’ils veulent.
De tels menus améliorent l'expérience utilisateur en incluant des avantages tels que:
- élimination du défilement;
- infobulles;
- structuration ordonnée du contenu par icônes, mise en page ou typographie.
Tout compte fait, ces fonctionnalités facilitent l'utilisation du menu de navigation.
Pour un exemple solide de méga-menu, allez à Réseau alimentaire Le site. Notez que le menu déroulant affiche l'un des contenus les plus recherchés du site, les recettes, dans un format facile à voir qui permet aux utilisateurs de choisir immédiatement où ils veulent aller au lieu de faire défiler ou de paginer pour plus d'options.
Accessibilité de modèle et de langue
Un modèle de prix utilise un symbole conventionnel que la majorité des visiteurs du site comprendront immédiatement, par exemple une icône représentant la page d'accueil de votre site. Un langage, c'est l'utilisation explicite d'un mot, comme "home", pour préciser que cliquer sur cet onglet amènera les utilisateurs sur la page d'accueil du site.
Les offres communiquent aux utilisateurs comment ils peuvent interagir avec les éléments de votre conception. Bien que ce soit certainement des concepts de base 101, il est toujours aussi important de s’exercer aujourd’hui qu’au tout début de l’Internet.
Un menu de navigation fonctionnel doit comporter le symbole de la maison ou le mot "home" sur le premier onglet de navigation à gauche. Alors que certains concepteurs choisissent plutôt d’inclure un logo de société comme icône ou bouton «maison», cela laisse encore trop de place à l’erreur de l’utilisateur.
eTailer Frame Warehouse démontre ce principe de conception à un niveau, avec son utilisation de "maison" pour ne laisser aucun doute là où cet onglet prendra les visiteurs du site.
Temps de chargement rapide
Vitesse = grande expérience utilisateur. Les concepteurs de tous bords devraient le noter comme l’une des règles de conception les plus cruciales qu’ils ne peuvent et ne doivent pas reléguer. Selon Wired Magazine , près de 50% des acheteurs veulent que la page moyenne se charge en deux secondes ou moins! Autrement dit, si les pages que vous concevez pour vos clients prennent plus de deux secondes à se charger, il y a de fortes chances qu'elles quittent les sites de vos clients et ne reviennent jamais, provoquant ainsi de graves cauchemars de conversion.
C'est une statistique inquiétante, certes, mais il y a quelque chose que les concepteurs peuvent faire pour s'assurer qu'ils fournissent des performances de qualité à leurs clients. Il suffit de tester la vitesse de la page des pages que vous concevez. Il existe un certain nombre d’outils fiables pour vous aider à déterminer les temps de chargement des pages:
Pour un exemple de temps de chargement de page très rapide, nous allons sur Enchanted Learning Qu'est-ce qu'une baleine? page. La conception pourrait utiliser un peu de travail, mais la page se charge en un peu plus d'une seconde, selon la barre d'outils Alexa analytics.
La navigation est excellente UX
Une grande partie de l'expérience utilisateur est la navigation de votre site. C'est la base sur laquelle repose toute l'expérience utilisateur, si vous y réfléchissez vraiment. Lorsque vos utilisateurs ne peuvent pas trouver facilement leur place sur le site de votre client, cela devient frustrant pour eux, les obligeant à partir rapidement. Ainsi, une excellente navigation devrait permettre aux utilisateurs d’utiliser tout site que vous créez; c'est la référence d'une belle expérience utilisateur.
Bien qu'il puisse être tentant de donner à la navigation un court délai dans les étapes de conception - en raison des nouvelles tendances de conception surgissant tout le temps - ce n'est pas souhaitable. Vos utilisateurs remarqueront, tout comme vos clients. Pour faire plaisir à vos clients, vous devez faire plaisir à leurs utilisateurs. Vous ne pouvez le faire que lorsque vous concevez avant tout une expérience utilisateur exceptionnelle, en mettant l'accent sur l'obtention de la navigation dès le départ.