Search

Comment concevoir le meilleur bar de navigation pour votre site

décembre 27, 2011

Comment concevoir le meilleur bar de navigation pour votre site

     
     
           
     
     
Daniel Alves est le directeur du design pour la division Business Design Web à la petite marketing digital et de compagnie de conception web 352 Media Group.


La barre de navigation est l'élément de conception le plus important sur un site web. Non seulement elle guider vos utilisateurs vers des pages au-delà la page d'accueil, mais c'est aussi l'outil singulier pour donner aux utilisateurs un sens de l'orientation. Dans cet esprit, il est important d'adhérer à l'épreuve du temps de conception et de conventions d'utilisation. Ce faisant, vous donnez à vos utilisateurs un point de référence commode et facile à s'engager pleinement avec votre contenu.

Malgré la nécessité d'une barre de navigation accessibles, études d'utilisabilité sur la navigation sur le Web ne sont pas positifs. Une étude menée par User Interface Engineering montre que les gens ne peuvent pas trouver l'information qu'ils cherchent sur ​​un site d'environ 60% du temps. Alors que ce taux d'échec pourrait être acceptable pour votre blog moyenne, un site Web d'entreprise ne peuvent tout simplement pas se permettre ces stats. Pire encore, beaucoup d'utilisateurs trouvent souvent la convivialité de navigation extrêmement frustrant, citant des erreurs gênantes planent et des incohérences. Une autre étude menée par Forrester a constaté que 40% des utilisateurs ne reviennent pas à un site lorsque leur première visite est négatif.

Alors, comment vous assurer que vos utilisateurs sont en mesure de trouver rapidement et facilement les informations dont ils ont besoin?

 Les bases
 Employer ces concepts de base pour aider les utilisateurs se déplacent de manière plus efficace grâce à votre site Web.
Commencez avec le contenu. Croyez-le ou non, la plupart des sites commencent en arrière, ce qui signifie un concepteur proposera des éléments de navigation avant de déterminer toutes les possibilités de contenu. Ce n'est pas tout à fait inhabituel - souvent le contenu n'est pas prête avant le processus de conception commence. Jeffrey Zeldman, un gourou convivialité, suggère, "Contenu précède la conception. Conception en l'absence de contenu n'est pas de conception, c'est la décoration. "
Il est important de bien analyser et organiser tous vos contenus dans une structure logique et très utilisable avant même de considérer les choix de conception. Une fois que vous y parvenir, ne font qu'ajouter de la complexité si c'est absolument nécessaire pour vos utilisateurs.
Ne pas submerger. Le rôle principal d'une barre de navigation est de fournir à vos utilisateurs un choix. Écrasante un visiteur du site avec trop d'options entrave sa capacité à rapidement faire un choix. Une barre de navigation avec cinq à sept éléments de canal est une organisation suffisante pour la plupart des sites Web. De plus, il s'intègre parfaitement dans la largeur de la plupart des modèles site web. Une fois que vous atteignez huit options de navigation, vous limitent gravement la lisibilité et la convivialité en raison de contraintes de largeur.
Keep it simple. Utilisez des mots précis et identifiable dans la barre de navigation. S'abstenir de longues phrases qui consomment écran de l'immobilier en limitant chaque élément de navigation à 12 caractères ou moins. Aussi, ne pas utiliser des mots que l'utilisateur moyen ne serait pas complètement comprendre. Les gens sont habitués à des conventions, par conséquent, pécher par excès de familiarité. Par exemple, utiliser «Contactez-nous», pas «Get in Touch» ou «Parlons». Enfin, laisser de côté les mots inutiles qui n'ajoutent rien à l'élément de navigation. Au lieu de «Dans les Nouvelles», considère tout simplement «Nouvelles».
Actions sur la droite. Parce que les gens lisent de gauche à droite, ils s'attendent naturellement à des liens d'action sur le côté droit de la barre de navigation, car le déplacement à droite suggère d'avancer. Utilisez le côté gauche pour plus de liens d'information. L'exception est le lien «Accueil», qui, comme une action en arrière, doit être laissé le plus éloigné.


 Éviter Flash, pour la plupart. Alors que Flash est généralement mal perçu par des experts en utilisabilité, il présente la possibilité esthétique. Plus gros problème de Flash est qu'il n'est généralement pas mis en œuvre dans un langage accessible aux lecteurs d'écran et les périphériques mobiles. Et tandis que vous ne voulez pas mettre en œuvre la navigation proprement dite avec Flash, vous pouvez sortir avec une embellir HTML / CSS Barre de navigation avec Flash pour ajouter un intérêt visuel et de conserver la convivialité. Un grand exemple de ceci est le site d'Atlanta Botanical Garden (ci-dessus).
 
One-Level Navigation Bars
 Maintenant que vous connaissez quelques principes de base sur la création d'une navigation très efficace, nous allons apprendre des barres de navigation déjà existant, y compris un niveau bars, déroulant multi-niveaux bars et méga déroulant bars. Alors que vous aurez finalement décider quel type de navigation qui fonctionne le mieux pour votre site web, nous pouvons vous montrer quoi faire et quoi ne pas faire selon le type de barre de navigation vous finalement choisir.
 Les experts ont souvent précédé d'Apple comme l'étalon-or dans la conception web. La société a réussi à distiller tout ce qu'elle fait en sept liens, non compris le logo et une barre de recherche. C'est la quintessence de la simplicité et la franchise - d'une des plus grandes sociétés dans le monde.

À son crédit, CNN a pour couvrir toute une planète de nouvelles, ce qui rend peu compréhensible que son site dispose d'un énorme 16 Liens de la barre de navigation. Bien que cette structure de navigation pourraient travailler pour CNN, il est hautement déraisonnable pour votre utilisation personnelle moyenne ou site web professionnel. Bachotage présent de nombreux liens sur toute la largeur du site entrave la lisibilité en forçant une police de petite taille et très peu d'espace négatif sur chaque côté d'un lien. Sur un plan pratique, c'est une corvée énorme à lire chaque lien simple de décider où vous devez aller.


 Déroulante multi-niveaux Barres de navigation
 Les menus déroulants sont devenus très populaires à la fin des années 90 pendant le boom dot-com, car ils ont permis à un utilisateur d'accéder à une page sur un site Web en un clic. Tout cela peut sembler un énorme avantage au premier abord, l'option présente plusieurs problèmes d'utilisabilité si mal fait. Beaucoup d'utilisateurs trouvent ces types de barres de navigation frustrant car ils ont besoin précis des mouvements de curseur pour réussir à se déplacer dans des niveaux plus profonds. Dans cet esprit, il est préférable de réserver suffisamment d'espace vertical et horizontal pour chaque lien afin que les utilisateurs peuvent naviguer sans cliquer sur la mauvaise page.
 Plus tôt cette année, la conception de Denny nouveau site Web qui a été accueillie avec des critiques mitigées. D'une part, le site vedette une expérience innovante et techniquement complexes de navigation, mais pour de nombreux critiques, il a été exagéré. La barre de navigation fonctionnalités gadgets JavaScript "améliorations" qui fait ralentir l'utilisateur vers le bas. Par exemple, lorsque vous survolez un lien avec le curseur, il prend une fraction de seconde pour l'animation pour révéler son contenu. Même que la fraction de seconde est plus lente que la capacité de notre esprit pour avancer.

Sony, collage fidèle à son style sobre, offre un no-nonsense menu déroulant qui fait le travail efficacement. Sony aide des icônes à côté des liens spécifier des liens parent et l'action. Globalement, la barre de navigation de Sony répond instantanément et parvient à rester en dehors du chemin de l'utilisateur avec son design subtil mais efficace.


 Mega déroulante Barres de navigation
 Mega menus are the newest design craze for large sites with a lot of depth and categories, such as Zappos and The White House. These menus are usually only two levels deep, but the second level features a large panel complete with images or multiple columns of links. The benefit to these menus is that a site not only provides more links for the user, but also includes context and hierarchy within those links.
A mega menu’s blessing can also be its curse. Sure, these navigation bars give you more room to include links, but without proper hierarchy and context, mega menus can quickly turn into a sea of unnavigable options. Perhaps the best example of this is Target.com. It doesn’t take long to see that the company has crammed way too many links in its mega menu, without the proper hierarchy or context.
While it might seem convenient that a user can get to Target’s “Spice Storage” department directly from the second level of its menu, is that really necessary? Including links like this creates too much noise and doesn’t let the user focus on the important higher-level category items. Another big no-no is the sheer size of Target’s menu. Some of the mega menu panels exceed the height of a standard 13-inch laptop screen size. The last thing you want is to force someone to scroll down to use your navigation menu.
Target could learn a few things from Lowe’s website. Lowe’s has managed to provide a wealth of links with plenty of hierarchy and context. For every panel of links, the company has made the most popular and timely links stand out by elevating them to large blocks of thumbnail images.
By distinguishing the most popular items, Lowe’s makes it easy for users to access the links they’re most likely to click anyway. The thumbnail images also contribute greatly to context. By providing recognizable images for their most popular categories, the user doesn’t even have to read to understand which part of the menu he’s in. It’s akin to walking by Lowe’s brick and mortar store, and scanning the contents of each aisle to zero-in on your desired product.

conclusion
 Lorsque vous choisissez un type de barre de navigation, démarrage simple. Évaluez votre contenu à fond et vous demander ce que vos utilisateurs ont besoin d'accéder rapidement. Plus souvent qu'autrement, un système complexe de navigation est un indicateur que vous devez planifier un meilleur contenu et l'organisation. Si vous avez absolument besoin pour donner à vos utilisateurs afin de nombreuses options directement dans la barre de menu de navigation, suivre les principes mentionnés ci-dessus pour créer une expérience efficace et agréable pour vos utilisateurs.