Modifier le bouton ou toucher pour modifier
Quelle est la meilleure façon d'indiquer la fonctionnalité de modification sur place dans une vue de liste dans une application Web réactive? Il s'agit d'une application intégrée au navigateur conçue pour les mobiles (pas une application mobile native), il convient donc de garder à l'esprit la compatibilité entre plates-formes.
La page actuelle ressemble à ceci (en-tête et navigation non affichés):
Outre l'affichage de la liste des employés, les principales actions à effectuer à partir de cet écran sont les appels et les SMS. L'action Modifier n'est pas une action principale, donc étant donné la quantité d'espace sur l'écran, je pense que montrer les crayons est trop encombré.
Malheureusement, il n'y a pas d'option de survol pour mobile. Voici quelques exemples à l'état sauvage:
- Sur Android, pour modifier un contact, vous devez d'abord accéder à la vue des contacts, puis appuyer sur le bouton Modifier de la barre d'action. Cela est logique car il existe de nombreuses coordonnées.
- Pour l'application Réveil sur Android, un appui long sur l'alarme fera apparaître un menu modal avec Modifier l'alarme et Supprimer l'alarme. Le bouton Modifier l'alarme vous amène à un nouvel écran, encore logique car il y a de nombreux champs. Il existe également une option de suppression en masse qui affiche des cases à cocher à côté de toutes les alarmes que vous souhaitez supprimer.
- Sur iOS, je crois que l'édition se fait en appuyant sur l'élément qui vous amène à un nouvel écran, tandis que la suppression se fait soit en faisant glisser vers la gauche et en appuyant sur l'icône moins, soit sur l'écran d'édition en appuyant sur le bouton rouge Supprimer (je ne 'ai pas un appareil iOS à portée de main pour le moment)
Comme il y a si peu de champs (prénom, nom, titre, téléphone et une case à cocher indiquant si le téléphone a des SMS), la transition vers une nouvelle vue ou l'ouverture d'un modal semble exagérée. La fonctionnalité d'édition étend l'élément (ligne) à un formulaire avec les boutons Mettre à jour, Supprimer et Annuler. J'ai pensé à plusieurs options:
- Appuyez sur l'élément de liste pour développer l'élément comme décrit ci-dessus. Je ne suis pas sûr de l'abordabilité de cette option.
- Gardez les boutons d'édition
- Utilisez des ellipses verticales à droite du bouton Appel qui ouvre un menu déroulant avec deux options: Modifier et Supprimer.
Alors qu'en pensez-vous?
J'irais pour:
Option 3: utilisez des ellipses verticales à droite du bouton d'appel qui ouvre un menu déroulant avec deux options: Modifier et Supprimer.
Principalement parce que cette option est la moins susceptible d'entraîner des suppressions accidentelles ou une entrée involontaire en mode édition, mais aussi parce que ce sont des actions secondaires moins courantes mais qui doivent encore être détectées.
Mais je laisserais également un espace clair entre le bouton d'appel et les points de suspension verticaux afin qu'il soit éloigné des actions principales les plus courantes - encore une fois pour éviter les erreurs de frappe.
Je pense qu'il y a trois grandes règles à prendre en compte lors de l'identification du meilleur paradigme de visualisation/édition:
- Je veux que les informations soient faciles à lire (vue Résumé/Impression sans encombrement d'édition)
- Je veux éviter les erreurs indésirables sur les données importantes
- Je souhaite modifier rapidement et facilement les informations
La solution UX pour View/Edit peut être différente en fonction de laquelle des trois ci-dessus est la priorité la plus élevée, car il y a toujours un équilibre entre l'édition facile et la prévention des erreurs. Certains disent qu'il vaut mieux compliquer la tâche des utilisateurs pour modifier les données afin d'éviter qu'ils ne commettent des erreurs. Cependant, si un utilisateur a été autorisé à modifier les données en premier lieu, vous devez présumer que cet utilisateur a l'intelligence et l'expertise nécessaires pour apporter des modifications à ces données: rendre quelque chose difficile à faire n'est jamais une UX appropriée Solution.
Personnellement, j'aime la technique utilisée où les informations sont présentées dans un état "Affichage" jusqu'à ce qu'un utilisateur survole une entrée. Ensuite, un cadre de sélection d'entrée est révélé, qui montre à l'utilisateur que les informations sont modifiables. Au clic, le curseur est placé à l'intérieur de l'entrée, permettant à l'utilisateur de modifier ou d'entrer des données. Enfin, lorsque l'utilisateur quitte le focus et quitte la page, un message de confirmation est présenté montrant à l'utilisateur la modification effectuée, lui permettant de confirmer ou de supprimer la ou les modifications.
Cela résout les trois grandes règles, tout en n'en sacrifiant aucune: les données sont faciles à visualiser/lire. Les données sont faciles à modifier (onfocus/onclick) et les modifications injustifiées sont empêchées (message de confirmation).
Modifier selon les commentaires ci-dessous ... oui, c'est une solution Web uniquement et ne fonctionne pas pour les mobiles.
Que diriez-vous d'un simple "Employés - appuyez sur pour modifier " les éléments d'en-tête et de tableau qui passent instantanément en mode édition lorsque vous cliquez dessus?
Le raisonnement est le suivant:
- c'est explicite
- il reste court et n'entraînera pas de surpeuplement de l'interface et
- Les tendances de l'interface utilisateur sont telles que la plupart des éléments affichés offrent désormais une sorte d'interactivité.Il est donc probable que les utilisateurs essaient ou au moins se sentent à l'aise de cliquer sur les éléments du tableau et découvrent qu'ils passent instantanément en mode édition, c'est-à-dire en cohérence avec l'en-tête suggéré.