web-dev-qa-db-fra.com

Barre de navigation, mélange de liens et de boutons

J'essaie de créer un menu de navigation avec 2 fonctions ... les liens de navigation de la page du site Web et les boutons d'action ... un peu comme cette image http://skitch.com/christieday/ gg2sr/dribbble-hunter-vision-nav-by-jeremiah-shaw

la navigation aurait des liens vers les pages appropriées ainsi que 2 boutons, "enregistrer l'activité" et "créer un itinéraire".

Les boutons se comportent bien sûr différemment de la navigation. Ce sont les principaux appels à l'action sur le site. Le bouton 'log' ouvre un formulaire sur la même page, le bouton 'create route' quitte la page.

Je me demande s'il existe un moyen de combiner des liens et des boutons sans dérouter l'utilisateur, et s'il existe un moyen approprié de s'y prendre.

S'il vous plaît donnez votre avis.

4
Christie Day

Vous avez vraiment répondu à votre propre question. Leur façon de les distinguer est d'utiliser du texte pour la navigation et des boutons pour les appels à l'action. De nombreux sites font cela (y compris celui-ci) et je n'ai jamais vu personne les confondre.

Si vous craignez que les gens ne sachent pas que le texte est de la navigation, utilisez simplement un petit marqueur ou une flèche pour afficher la page actuelle. Ce n'est pas nécessaire, mais cela améliore la découvrabilité.

enter image description here

Assurez-vous simplement que vous ne marquez pas la page actuelle dans la navigation en plaçant un bloc autour d'elle - cela ressemblera plus à un bouton. Vous devez juste être conscient de ne rien mettre sur la navigation qui ressemble à un bouton mais n'en est pas un. La navigation ci-dessous est un exemple de ce qu'il ne faut pas utiliser si vous avez un bouton d'appel à l'action dans votre navigation. C'est une bonne barre de navigation si elle est utilisée sans appel à des actions.

enter image description here

2
JohnGB

Habituellement, vous auriez une sorte de légende, au moins sur la façon dont vous concevez, qui suggère que le traitement visuel des boutons signifie quelque chose de différent des liens de texte. Par exemple, bien qu'ils ne soient pas mélangés, les boutons de formulaire indiquent généralement une action tandis que les liens de texte indiquent la navigation.

Pourquoi voudriez-vous les mélanger visuellement? Même si vous sentez qu'ils appartiennent au même plan horizontal ou vertical dans l'interface utilisateur, ne les sépareriez-vous pas encore? Les liens de texte sont tous alignés à droite puis les boutons alignés à gauche ... En remontant dans le temps, une règle de base que j'ai apprise il y a longtemps, et qui me semble toujours justifiée, c'est que vous gardez la navigation et le contrôle séparés.

0
jameswanless

Christie, vous êtes déjà sur la bonne voie, mais si vous voulez voir un autre exemple d'en-tête global contenant 2 boutons d'action, jetez un œil sur le site English National Opera .

enter image description here

0
Rob