Qu'est-ce qu'une bonne interface utilisateur pour permettre aux gens d'entrer dans les en-têtes de colonne?
J'ai un site Web où vous pouvez entrer certaines entrées et un rapport sort. Vous pouvez ensuite enregistrer n'importe quel rapport et le charger à l'avenir avec tous vos paramètres. J'ai un exemple où vous pouvez créer des tables dynamiquement en saisissant 2 champs:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Compte tenu de ces entrées, je crée une table vide.
Il y a maintenant une demande pour que l'utilisateur entre dans les en-têtes de colonne et qu'il soit également enregistré avec les entrées.
J'essaie de penser à une bonne interface utilisateur pour que l'utilisateur entre les en-têtes de colonne. Voici quelques réflexions mais à la recherche de quelques suggestions
Dans cet exemple, en fonction de la zone de texte Nombre de colonnes, un ensemble de zones de texte apparaît à droite où l'utilisation peut entrer dans les en-têtes de colonnes
ou supprimez le nombre de colonnes tous ensemble et créez simplement une liste de noms avec un bouton "Ajouter une colonne" comme ceci:
Avez-vous d'autres suggestions sur ce qui serait évident/intuitif?
Permet l'édition directe des en-têtes des colonnes. Autorisez autant que possible l'édition directe.
Rendez la création de table initiale aussi rapide et facile que possible, mais comprenez que cette création initiale sera probablement modifiée plusieurs fois. Donc, pour créer une table, il faut 2 nombres, le nombre de lignes et le nombre de colonnes. Ensuite, montrez la table et laissez l'utilisateur travailler sur une table "en direct".
Autorisez l'utilisateur à cliquer sur un en-tête de colonne pour le modifier. Avoir des boutons ou des éléments de menu pour ajouter (ou supprimer) des lignes et des colonnes.
L'important est d'amener les gens à modifier un widget qu'ils peuvent voir le plus rapidement possible. Activez autant de manipulations directes que possible, des choses comme pouvoir faire glisser les lignes de séparation entre les cellules pour ajuster la largeur des colonnes.
Je dirais donc d'abord demander le nombre de lignes et de colonnes, créer le tableau, puis avoir un tableau qu'ils manipulent aussi directement que vous le pouvez. Alternativement, il vous suffit de présenter initialement un tableau 4x4 et de les laisser travailler dessus - leur permettre d'ajouter et de supprimer facilement des lignes et des colonnes, de modifier les en-têtes de colonne et d'ajuster la largeur des colonnes.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Voici une autre approche suffisamment courante pour que vous envisagiez également de la mettre en œuvre.
- Commencez avec un tableau vide qui a une zone de saisie pour modifier l'en-tête de colonne (peut-être avec du texte pour indiquer que vous pouvez entrer et modifier le contenu.
- Une fois que vous avez entré une valeur et changé le focus, une nouvelle colonne vide est ajoutée.
De cette façon, vous pouvez générer dynamiquement des colonnes et autoriser également la modification du nom de la colonne. Si vous souhaitez que les actions soient explicites, vous pouvez ajouter des boutons ou autoriser un clic droit avec un menu contextuel (s'il n'est pas implémenté dans un mobile).