Interface homme-machine: listes

Bonjour à tous
Il s'agit de gérer (ajouter, modifier, supprimer) des éléments dans une liste, en 'occurrence une liste d'adresses mail
J'ai fait la présentation suivante qui ne me plaît guère

Signification des boutons:
- le X rouge: supprimer l'élément: on remonte toute la suite d'un cran
- le + vert: ajouter un élément: on ajoute une entrée vide après l'entrée courante
= la flèche vers le haut: on remonte l'entrée courante d'un cran
- la flèche vers le bas: on descend l'entrée courante d'un cran
L'étoile à droite de la première ligne signifie qu'il doit y avoir au moins une entrée dans cette liste.
Auriez vous quelque chose de plus esthétique à me proposer?
Merci de vos conseils
Modifié par PapyJP (31 May 2020 - 12:12)

Bonjour JP et merci de ta réponse

Il s’agit de gérer la liste, la mise à jour de la base ne se fait que quand tout le formulaire est rempli. Mais effectivement un bouton pour vider une boîte de saisie c’est pas nécessaire et dangereux.
Je trouve cette interface trop lourde. Pas moyen de trouver un exemple de gestion de liste de ce type sur internet. Chaque fois que Google voit le mot "liste" il comprend "prendre une valeur dans une liste".

Une autre façon de faire à laquelle je pense c’est de pouvoir déplacer les boites de saisie de texte à la souris ça éviterait cette collection de boutons: 4 boutons par ligne, c’est inesthétique et de plus ils sont trop proches, ça rend le truc difficile à gérer.
Actuellement mes "listes" sont des <textarea> je pensais que des boites distinctes seraient plus ergonomiques mais c’est pas sûr

PapyJP a écrit :
Bonjour à tous
Il s'agit de gérer (ajouter, modifier, supprimer) des éléments dans une liste, en 'occurrence une liste d'adresses mail
J'ai fait la présentation suivante qui ne me plaît guère
upload/1590919488-48769-itemlist.png
Signification des boutons:
- le X rouge: supprimer l'élément: on remonte toute la suite d'un cran
- le + vert: ajouter un élément: on ajoute une entrée vide après l'entrée courante
= la flèche vers le haut: on remonte l'entrée courante d'un cran
- la flèche vers le bas: on descend l'entrée courante d'un cran
L'étoile à droite de la première ligne signifie qu'il doit y avoir au moins une entrée dans cette liste.
Auriez vous quelque chose de plus esthétique à me proposer?
Merci de vos conseils

Perso pour ce genre d'interface j'utiliserais un formulaire avec :
a) autant de champs saisie texte que de liens existants
b) un champ de saisie en plus pour l'ajout d'une nouvelle entrée
c) un bouton "valider" pour enregistrer tous les changements effectués dans les zones existantes (plus contrôles éventuels)
d) éventuellement un bouton "ajouter" pour valider l'ajout du champ N+1 (cette action peut aussi être prise en charge directement par le bouton "valider" qui enregistre l'existant plus le nouveau)
e) un bouton "supprimer" qui porte sur le champ ayant la focalisation clavier
f) un bouton "remonter" ou "descendre" qui sera actif ou inactif suivant la position de la focalisation clavier et les possibilités de déplacement
Donc, in fine, N champs existants + 1 champ nouvelle entrée + 4 boutons (ou 5 si on dissocie validier et ajouter)

Merci de ta réponse
C’est un peu le genre de chose que j’essaie de faire mais ça fait encore beaucoup de boutons...
Ce que je n’ai pas expliqué c’est qu’il s’agit du profil d’une personne. Le champ "adresses électroniques" est actuellement une <textarea> avec en général une seule ligne, éventuellement 2 ou 3
Mettre une boîte vide serait la bonne solution dans ce cas, mais dans d’autres formulaires il en faudra plus.
Je vais essayer de ne montrer les boutons que quand la boîte est en focus, ça devrait avoir une meilleure allure