web-dev-qa-db-fra.com

Entrées utilisateur dans les tableaux

Je travaille sur une application de bureau, où l'utilisateur doit saisir un grand nombre d'entrées. J'ai du mal à présenter les données à l'utilisateur d'une manière qui semble bonne, tout en donnant l'impression à l'utilisateur qu'il est censé entrer ses propres valeurs.

J'ai inclus une photo de ce que j'ai jusqu'à présent. Je pense que les deux principaux problèmes sont les suivants:

  1. C'est moche.
  2. Il n'est pas immédiatement clair que l'utilisateur doit entrer des valeurs.

Si ce n'est pas un bon moyen de saisir des données, je vous serais reconnaissant de bien vouloir suggérer une autre méthode de saisie par l'utilisateur. Data input table

3
scipiones

Utilisez les commandes standard pour commencer avant de faire des personnalisations.

Plateformes/systèmes d'exploitation (WPF (Windows Desktop), Apple OS X, Apple iOS, Android, navigateur Web, etc.) ont tous de légères variations dans la façon dont ils rendent une zone de saisie.

Si vous vous en tenez au contrôle standard pour la plate-forme ou le système d'exploitation sur lequel vous travaillez, cela devrait commencer à éliminer le problème d'un utilisateur reconnaissant un contrôle comme une zone de saisie.


Maquette (si une application wpf)

Je ne dis pas que tout devrait avoir la même apparence, mais vous devez commencer par la disposition et les contrôles de base avant de procéder aux personnalisations. J'ai supprimé le style de vos zones de saisie et rangées ci-dessous pour le rendre plus utilisable. Vous pouvez prendre cela et en tirer parti pour ajouter votre style créatif, mais dès que vous voyez que vos styles sont appliqués au détriment de la convivialité, vous devez prendre du recul et l'aborder différemment.

enter image description here

8
Dave Haigh

Tout d'abord, supprimez toutes les couleurs - Wireframe d'abord en noir et blanc (et peut-être même avec des niveaux de gris tout au plus).

Ensuite - commencez à rechercher la meilleure façon de faire des formulaires. Avec autant d'étiquettes, je ferais très attention à ce qu'il soit facile pour mes utilisateurs d'entrer les informations correctes dans chaque champ. Lorsque les étiquettes sont si éloignées des zones de saisie, il peut être difficile de voir ce qui va avec quoi. J'ai aligné les étiquettes à droite et j'ai espacé les rangées un peu plus.

enter image description here

Une autre excellente idée est la zone de texte infield comme ici: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

Tant que le curseur clignote dans une zone de saisie, l'utilisateur doit être en mesure de comprendre qu'il peut le saisir.

Bonne chance!

2
Sarah Leigh

Essayez de vous rappeler qu'une bonne interface utilisateur n'est pas une jolie interface utilisateur. Cela ne veut pas dire qu'une bonne interface utilisateur ne peut pas être jolie, mais une jolie interface utilisateur ne fait pas une bonne interface utilisateur.

Lorsque vous devez saisir des données comme celles-ci, utilisez un plan, des commandes faciles à naviguer. Portez une attention particulière aux index des onglets. Vous avez dit Desktop, si c'est .Net Utilisez une grille de données. Marquez les colonnes en lecture seule en lecture seule.

Une interface facile à utiliser, moche, battra une interface jolie mais compliquée à chaque fois (sauf les démos de vente).

Commencez ensuite par modifier la grille de données. Ajoutez une barre grise ou mettez en surbrillance les valeurs manquantes. Mais restez simple.

L'idée est de rendre la saisie des données rapide et efficace, puis d'ajouter du rouge à lèvres.

2
coteyr