web-dev-qa-db-fra.com

Où placer un bouton global "ajouter un élément"?

Nous ajoutons un bouton global "Ajouter un nouveau X" à notre application (il affichera un formulaire CRUD pour une activité, la "chose" fondamentale dans notre application). Nous voulons qu'il soit cliquable de n'importe où dans l'application et facilement détectable pour les nouveaux utilisateurs.

Où devrions-nous le mettre? Notre application Web a une barre supérieure persistante avec notre logo et une barre latérale alignée à gauche qui contient notre navigation de haut niveau.

Quelques options:

  1. Sur la barre supérieure, à droite du logo
  2. Sur la barre supérieure, à l'extrême droite
  3. Dans la barre latérale, au-dessus de la navigation principale
  4. Dans la barre latérale, sous la navigation principale
  5. Dans la barre latérale, tout en bas
  6. D'autres suggestions?

J'ai vu chacune de ces options à divers endroits du Web (l'application Flow utilise le n ° 1 pour "Ajouter une tâche", Gmail utilise le n ° 3 pour "Composer le courrier électronique", etc.).

Quel placement est le meilleur? Existe-t-il des exemples d'applications qui le font particulièrement bien?

mockup

web-applayoutbuttonsplacement
5
Sam Pierce Lolla

Je dirais qu'il appartient en position 2. C'est une tache très proéminente sur l'écran, tout en laissant en haut à gauche pour le branding.

De nombreux sites bien conçus font exactement cela.

bouton "Poser une question" de StackExchange: enter image description here

bouton Tweet de Twitter (le bouton du stylo plume à droite) enter image description here

sites Google qui incluent le bouton de partage Google+: enter image description here

...et beaucoup plus

6
jlarson

Je le mettrais à la place # 3. Le fait d'avoir le bouton près du coin supérieur gauche le place dans une position où les utilisateurs le verront probablement sans avoir à le chercher pendant que les gens lisent de gauche à droite (en supposant que votre public cible n'est pas de droite à gauche, par exemple en arabe). Il mettra également le bouton près de la navigation principale. Cela diviserait la page en trois sections distinctes; haut pour l'image de marque, à gauche pour la navigation et la création de nouveau contenu et à droite pour la consommation de contenu.

1
tblessander