Affordance (indication) d'une grille modifiable
Travailler sur un formulaire avec plusieurs petites grilles pour l'affichage des informations et ajouter une nouvelle grille. (La grille est affichée à droite ici.) L'unité commerciale souhaite que les grilles héritées restent modifiables avec des formulaires contextuels d'ajout/modification, mais souhaite que la nouvelle grille soit modifiable, car les champs sont de simples entrées numériques.
Ma question est: quelle est la meilleure façon d'indiquer que la grille est modifiable? Les grilles existantes ont des boutons Ajouter/Modifier/Supprimer au-dessus d'eux.
- La grille modifiable doit-elle avoir un bouton Modifier, permettant la modification de la grille? (les cellules modifiables semblent modifiables, une fois que l'utilisateur a cliqué/cliqué sur la grille, mais comment les inviter?)
- Si oui à ci-dessus, le bouton Modifier se transforme-t-il en bouton Enregistrer? Ou activer un bouton Enregistrer et Annuler?
- Si un état modifiable n'est pas omniprésent, en quoi est-il différent d'un état non modifiable?
- Est-il important que la forme de saisie des données soit différente entre les trois grilles? (un bouton d'édition transforme la grille en un état modifiable, un autre lance une fenêtre d'ajout/modification)
De plus, fwiw, chaque nouvel enregistrement est affiché au niveau de la ligne, avec les attributs respectifs des colonnes de cette ligne. Par demande, voici un visuel 
Si vous pouvez éviter les boutons, veuillez le faire.
Les utilisateurs d'aujourd'hui connaissent mieux les outils d'édition que lorsque le Web était nouveau (et difficile à modifier via le navigateur).
Pour faire savoir aux utilisateurs quoi faire - et comment - vous pouvez ajouter un texte en surbrillance simple, tel que modifiable , sur la grille comme vous l'avez montré sur le deuxième grille. Il peut s'agir d'un lien hypertexte ou d'un fond jaune pour mettre davantage en évidence la fonctionnalité. Lorsque l'utilisateur clique sur une cellule - le lien de texte informatif peut disparaître et vous pouvez ajouter votre texte à la place (modification).
Lorsque les utilisateurs quittent la cellule, vous pouvez enregistrer silencieusement la valeur dans un état persistant (base de données). Aussi - mettez en surbrillance la cellule que votre utilisateur est en train de modifier, ce qui permet de comprendre facilement où l'utilisateur est en mode de modification. Lorsque l'utilisateur quitte le focus de la grille - supprimez le texte (modification) et laissez-le sans texte modifiable visible, car l'utilisateur sait maintenant qu'il peut être édité. Activez également les fonctions du clavier, telles que la tabulation entre les cellules.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La modification en ligne directement dans la grille se fait normalement ligne par ligne.
Le survol du système affiche l'icône de crayon - pour suggérer qu'une ligne est modifiable. Le système de clic affiche les feilds modifiables avec des boutons pour enregistrer ou supprimer.
Mots d'annonce Google comme exemple:
