Modèle d'interface graphique pour un nombre inconnu de paramètres
Je conçois un formulaire qui oblige l'utilisateur à définir une longue liste de paramètres et une valeur. Chaque entrée du formulaire peut avoir un nombre quelconque de paramètres, bien que certains aient des valeurs typiques.
Dans le passé, je le faisais en créant deux zones de texte côte à côte avec un signe + qui leur permettait d'accéder à une nouvelle ligne. Cependant, cela me semble comme il devrait y avoir une meilleure façon de le faire. Une manière plus conviviale.
Voici un exemple de ce que je ferais normalement. Mais je n'aime vraiment pas ça. 
Edit: Voici les problèmes que j'ai avec la conception actuelle:
- Il prend trop de place, horizontalement et verticalement. (vertical est plus un problème pour moi qu'horizontal)
- C'est un peu pénible à utiliser en tant qu'utilisateur. Vous devez taper, puis passer à la souris. Et ce n'est pas aussi clair que possible, sur quoi vous travaillez exactement.
- Je trouve ça assez moche.
- Il ne se prête pas à être utilisé plusieurs fois sur une page. (Retour au point 1, je suppose)
- Ça fait "maladroit"
Il semble qu'une interface de type tableur offre une bonne expérience pour la tâche. Nombre de lignes pratiquement infini - aucun effort d'ajout en ligne, navigation facile, etc.
Vous pouvez imiter certains comportements de feuille de calcul, notamment:
- nouvelle ligne ajoutée automatiquement, car vous avez besoin de beaucoup de lignes et d'appuyer sur
Add rown'est pas toujours convivial - navigation facile entre les lignes et les colonnes avec le clavier, car votre tâche dépend fortement du clavier
- surlignage de la ligne et des cellules en cours
Ces fonctionnalités permettent de créer une interaction plus efficace pour le contexte actuel.
Le dernier élément pourrait être une entrée d'espace réservé pour ajouter rapidement un champ. Je ne sais pas si l'exemple que vous avez donné est le design final mais je suggère de le rendre plus facile à lire et plus accessible en agrandissant les entrées.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il semble que vous vous préoccupiez principalement de l'immobilier (minimiser l'espace requis) et de l'efficacité des utilisateurs (réduire l'effort), l'esthétique étant une préoccupation secondaire. Pour autant que je sache, votre conception est déjà assez proche de l'optimisation sur tous ces éléments, et toute amélioration est principalement le rognage et le ponçage.
Immobilier
Votre conception utilise à peu près aussi peu de biens immobiliers que possible. En supposant que vous développiez la région à mesure que l'utilisateur ajoute des paramètres à la liste, tout l'espace que vous utilisez est rempli de données fournies par l'utilisateur - rien n'est perdu. Oui, si vous avez plusieurs listes contenant chacune de nombreux éléments, alors en fait un long formulaire, mais que pouvez-vous faire d'autre? Vous avez beaucoup de données; si vous voulez tout afficher sur la même page, ce sera un long formulaire.
La seule façon de rendre l'espace plus efficace est de déplacer "Cliquer pour ajouter un champ +" afin qu'il ne prenne pas une ligne entière par lui-même. Cependant, vous souhaiterez probablement l'avoir en bas de la liste, car c'est là que les utilisateurs sont susceptibles de chercher lorsqu'ils sont sur le point d'ajouter un paramètre, alors peut-être que cela ne vaut pas la peine de le déplacer. Voici un peu plus de "ponçage":
Vous pouvez réduire la police des en-têtes de colonne. Leur position et leur audace sont déjà suffisantes pour indiquer la hiérarchie visuelle. Cela peut également répondre à certaines des préoccupations esthétiques.
Si la liste a tendance à être longue (comme vous l'avez fait dans votre exemple), vous pouvez essayer un " présentation compacte " des zones de texte. Cela peut également répondre à certaines préoccupations esthétiques (l'effet BUBOF (Big Ugly Block of Fields)).
Si la liste a tendance à être longue, vous pouvez la placer dans son propre volet et/ou expanseur réglable et défilable afin que l'utilisateur puisse contrôler la quantité d'espace utilisée, quel que soit le nombre de paramètres de la liste. Cela n'aurait de sens que si les utilisateurs modifient le formulaire à l'occasion, plutôt que d'entrer toutes les données une fois et ne reviennent presque jamais.
Efficacité
La principale source d'inefficacité dans votre conception réside dans les transitions clavier-souris. Cela contribue également le plus à la sensation "maladroite". La solution la plus simple consiste à donner à la fonction Ajouter une touche accélératrice. Le la touche d'insertion est un bon choix . Le principal défi consiste à communiquer la disponibilité de la touche accélératrice. Si vous avez des utilisateurs d'ordinateurs formés ou expérimentés, il peut être suffisant de mettre "(Ins)" dans ou à côté de la légende de votre bouton Ajouter. Cependant, votre utilisateur peut avoir besoin d'une instruction plus explicite, telle que "(vous pouvez utiliser la touche Insérer)" à côté du bouton.
L'alternative principale à votre conception consiste à ajouter automatiquement une ligne vide au bas de la liste, comme décrit dans Quoi de mieux lors de l'insertion dans une vue de tableau, et d'ajouter un bouton ou une ligne vierge? on Stack Débordement, et aussi dans d'autres réponses à cette question. Au lieu du bouton Ajouter, vous avez la ligne vide au bas de la liste, donc cela ne prend plus de biens immobiliers. La conception d'ajout automatique est meilleure pour entrer plusieurs paramètres à partir de zéro, tandis que la conception de bouton d'ajout est meilleure pour modifier une liste existante (voir ma réponse au message Stack Overflow pour plus de détails).
Une considération supplémentaire est la longueur moyenne de la liste et le nombre de champs par ligne. Il est un peu plus facile d'appuyer sur la touche Tab pour accéder à la ligne vierge dans la conception d'ajout automatique que d'appuyer sur Insert ou sur un accélérateur Ctrl pour ajouter une ligne vierge dans la conception du bouton d'ajout. Plus il y a de paramètres à ajouter, plus l'avantage de Tab sur la touche Insérer est grand. Cependant, la conception d'ajout de bouton ne prend qu'une seule pression de tabulation pour quitter la liste pour le champ suivant du formulaire, tandis que la conception d'ajout automatique oblige les utilisateurs à parcourir tous les champs de la ligne vierge avant de quitter la liste. Plus il y a de champs sur chaque ligne, pire c'est.
Vous pouvez également réduire la sensation maladroite en utilisant des invites et des légendes de terser. Par exemple, lire "Cliquez ici pour ajouter un champ" prend du temps. Essayez un bouton étiqueté simplement "Ajouter". Être un bouton indique aux utilisateurs qu'il effectue une action d'édition de contenu sur la page (par opposition à la navigation), et être au bas de la liste indique aux utilisateurs qu'il est nécessaire d'ajouter un paramètre.
Esthétique
Je comprends que votre illustration de conception n'est qu'un croquis rapide qui ne doit pas être critiqué, mais elle illustre néanmoins certaines choses qui nuisent à l'apparence, ce qui peut être utile dans votre "ponçage" esthétique. La laideur vient de formes irrégulières, dures et déséquilibrées. Plus vous avez de champs, plus la conception graphique doit être sobre et régulière pour contrer la dureté de tous ces contrôles réunis. J'ai déjà mentionné une présentation compacte et de petits en-têtes de colonne. Vous pouvez également:
Aplatissez le design - évitez les boutons radio et les ombres portées 3D pour la mise au point.
Utilisez une "grille" plus simple - alignez à gauche les en-têtes de colonne afin qu'ils s'alignent avec le contenu de la zone de texte.
Centrez verticalement les champs à l'intérieur de leurs rayures zébrées respectives.
Étendez la bande de zèbre blanche sur les bords afin qu’ils ne ressemblent pas à des boîtes sur le fond cyan.
Utilisez des rayures zébrées plus subtiles (plus pâles, moins saturées). N'utilisez pas du tout de bandes zébrées si la liste contient presque toujours cinq paramètres ou moins.