web-dev-qa-db-fra.com

Position du bouton «enregistrer» dans les systèmes de gestion de contenu

Quelle est la meilleure position d'un bouton 'enregistrer' dans un formulaire de système de gestion de contenu?

Je travaille sur un projet largement basé sur le contenu. Les utilisateurs de mon système ajouteront ou modifieront principalement du contenu. Pour cette raison, la position du bouton "enregistrer" sera critique.

Le CMS sera utilisé sur les ordinateurs de bureau.

J'ai du mal à choisir une position pour le bouton "enregistrer". Il y a deux options;

  • En haut du formulaire
  • Au bas du formulaire

enter image description here

Les deux ont des avantages et des inconvénients pour moi. Le bouton en haut est toujours visible, même lorsque l'utilisateur doit faire défiler en raison de la longueur du formulaire. Un inconvénient est que l'utilisateur doit déplacer son attention du bas du formulaire vers le bouton, ce qui augmente la charge cognitive.

Un avantage pour le bouton en bas du formulaire est que le flux est plus court. Un inconvénient est que le bouton ne sera pas visible si le formulaire est plus long que la taille de l'écran. Voir le visuel ci-dessous.

Une troisième option serait d'avoir deux boutons, à la fois en haut et en bas de l'écran.

Quelle est la meilleure position d'un bouton 'enregistrer' dans un formulaire de système de gestion de contenu?

Flux de formulaire enter image description here

Forme plus longue que la taille de l'écran enter image description here

3
Nick Groeneveld

Utilisez un pied de page fixe qui est toujours visible en bas. Le flux de travail d'un formulaire est généralement de haut en bas et le bouton d'enregistrement devrait alors être la dernière action dans la vision. Avec un pied de page fixe, il est possible de modifier un champ et d'enregistrer le formulaire sans avoir à faire défiler vers le bas.

enter image description here

6
jazZRo

@NGAFD - Je ne peux pas partager de détails, mais voici une version en sourdine.

L'idée ici est que nous avons un en-tête fixe, un côté gauche fixe et un pied de page fixe. Seul le contenu (zone centrale) défile. Ainsi, à tout moment sur la page, l'utilisateur peut enregistrer.

Économiser sur demande, pour nous de toute façon, était un plus grand projet technologique. Le coût l'emportait sur l'avantage, d'autant plus que nous commençons bientôt une refonte.

Étant une plate-forme d'administration, la plupart des pages sont un état hybride de visualisation/modification. il est donc nécessaire de pouvoir enregistrer à tout moment.

Le seul inconvénient de cette configuration est que si vous faites plusieurs choses comme l'ajout d'éléments à partir d'un modal ou d'un autre niveau d'interface utilisateur, les utilisateurs oublient le plus souvent d'appuyer sur Enregistrer en pensant acheter en cliquant sur "Ajouter" ou "Sélectionner" pour enregistrer la page. Pour lutter contre cela, nous avons ajouté des messages toast comme "vous n'avez pas enregistré vos modifications ... etc etc."

J'espère que cela t'aides!

App Example

3
Destructo

Je voudrais implémenter quelque chose comme ça:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Il aurait une position fixe lors du défilement et correspondrait à cette déclaration que vous avez mentionnée:

même lorsque l'utilisateur doit faire défiler en raison de la longueur du formulaire

aussi avec celui-ci:

Un avantage pour le bouton en bas du formulaire est que le flux est plus court.

et résoudrait ce problème que vous avez mentionné:

Un inconvénient est que le bouton ne sera pas visible si le formulaire est plus long que la taille de l'écran.

2
Joao Carvalho

@NGAFD: d'accord avec les réponses ci-dessus qu'un bouton de sauvegarde flottant en bas sera une excellente solution. J'étais également curieux de savoir si vous avez une fonctionnalité d'enregistrement automatique sur le formulaire? Si c'est le cas, une notification de période 'Form Saved', près du coin supérieur droit de la fenêtre visible peut être une solution à envisager.

2
Pallavi A