Disposition pour ajouter un ou plusieurs contacts à un enregistrement
Le contexte:
L'utilisateur crée un enregistrement client. Contre chaque enregistrement, il pourrait y avoir un ou plusieurs contacts (personnes) fournis. Souvent, cela ajoutera 1 ou 2, mais pourrait parfois aller jusqu'à 5-10.
La tâche:
Simplement, l'utilisateur ajoutera chaque personne connue à la liste, puis passera à l'étape suivante du processus de création de compte. Les modifications sont enregistrées lors de la soumission de la page (aucun besoin technique de le faire à chaque ligne).
Maquette actuelle:
C'est ce que j'ai proposé. Le premier est la vue par défaut. La seconde est lorsqu'un contact a été ajouté. Remarque: Il y aura une option de suppression de ligne. 
Question:
Y a-t-il des problèmes potentiels avec cette approche?
- L'utilisateur attendra-t-il une option "enregistrer" à la fin de la ligne? (l'enregistrement est techniquement effectué lorsque la page est soumise).
- Le placement de la ligne "Ajouter un autre"/ajouter une nouvelle ligne est-il approprié?
- Un bouton "Ajouter un contact" serait-il plus approprié en haut de la liste?
Cela ressemble à un très bon point de départ. Pour répondre explicitement à vos questions:
L'utilisateur attendra-t-il une option "enregistrer" à la fin de la ligne? (l'enregistrement est techniquement effectué lorsque la page est soumise).
Ne présentez pas de bouton "enregistrer" à moins qu'il n'enregistre réellement les données! Donc, si les données ne sont enregistrées que lorsque la page est terminée, je ne recommanderais pas d'avoir des boutons d'enregistrement ligne par ligne.
Cela soulève cependant plusieurs questions:
Comment les erreurs seront-elles présentées? Si je viens de remplir 5 à 10 contacts, est-ce que j'obtiendrai des erreurs pour toutes les lignes à la fois? Cela pourrait être beaucoup plus difficile à gérer que de vérifier chaque champ lors de sa saisie. Vous devriez envisager d'utiliser la validation en ligne, présentant des alertes OnChange (par exemple, si l'adresse e-mail ne semble pas être valide - pas de '@', par exemple.
Pouvez-vous enregistrer automatiquement chaque champ OnChange? Cela réduirait les erreurs potentielles si quelque chose se bloque après que l'utilisateur a entré un certain nombre de contacts mais n'a pas encore cliqué sur l'option d'enregistrement explicite.
Le placement de la ligne "Ajouter un autre"/ajouter une nouvelle ligne est-il approprié?
Un bouton "Ajouter un contact" serait-il plus approprié en haut de la liste?
Étant donné la spécification actuelle, il est beaucoup plus logique pour moi d'avoir le bouton en bas de la liste, où la nouvelle ligne apparaîtra. Cependant, vous voudrez peut-être déterminer si vous avez besoin du bouton, plutôt que d'ajouter simplement une nouvelle ligne vierge lorsque la ligne ci-dessus est saisie. C'est l'approche que les pages de contact iOS adoptent, par exemple, et cela semble faciliter la rupture du flux de l'utilisateur.
Je considérerais quelque chose comme le flux suivant:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous pouvez maintenant ajouter un bouton Enregistrer pour cette page afin que l'utilisateur sache qu'il a ajouté tous ces contacts avec succès. Cependant, ce n'est pas absolument nécessaire et cela dépend du contexte de cette page et de la façon dont vous utilisez le bouton Enregistrer dans l'application.
Je pense que la position du "Ajouter un contact" est correcte et elle suggère et suit le flux de votre interface utilisateur. Je ne recommanderais pas de mettre ce bouton en haut parce que si vous aviez 100 enregistrements de contacts, chaque fois que vous voudriez en ajouter un autre, vous devriez revenir en haut pour le faire.
Quelques suggestions:
- Vous pourriez envisager d'ajouter un séparateur entre chaque contact pour obtenir une meilleure séparation visuelle de chaque enregistrement. Essayez également de modifier l'arrière-plan de cette ligne lorsque l'utilisateur passe dessus. Cela fonctionnera comme un indicateur et leur montrera sur quelle ligne ils se trouvent.
- Je ne suis pas sûr de la position du bouton "Modifier". Que se passe-t-il si l'adresse e-mail est trop longue? Je suggère d'afficher le bouton "Modifier" uniquement lorsque l'utilisateur survole cette ligne ou de faire en sorte que le texte "Modifier" ressemble plus à un petit bouton qui sort de votre conteneur lors du survol.
Travailler sur quelque chose de similaire, cela peut être plus compliqué qu'il n'y paraît pour ajouter plusieurs champs avec une méthode d'ajout automatique
J'aimerais connaître votre opinion sur les points suivants:
Dans l'état initial, l'utilisateur devrait-il voir qu'il est possible d'ajouter plusieurs ensembles de champs?
La nouvelle ligne ajoutée devrait apparaître juste au moment où l'utilisateur commence à taper dans le premier champ ou sur le focus hors du dernier champ?
