Meilleure interface utilisateur Web pour de grandes quantités d'entrée de données
Je recherche une bonne solution lorsque les utilisateurs doivent entrer de grandes quantités de données dans une application Web.
Exemple
- Un propriétaire de magasin souhaite introduire 30 à 40 nouveaux produits dans le système chaque mois. Le propriétaire du magasin a une feuille de calcul de tous les produits, leurs quantités, prix, produits manufacturés, coordonnées, codes de série, etc. (probablement environ 10 champs différents).
En ce moment, je pense à une sorte de vue de grille qui permet à l'utilisateur de copier et coller des données à partir d'Excel ou de n'importe quelle application de feuille de calcul qu'il utilise.
Quelle est la meilleure solution Web pour permettre à l'utilisateur d'entrer autant de données (sans avoir à saisir chaque élément individuellement)?
Que diriez-vous d'une interface utilisateur pour télécharger le fichier de feuille de calcul à traiter automatiquement par une routine d'importation de base de données?
Excuses, nouvelle affiche.
Donc, si j'ai bien lu, vous demandez un moyen pour une application Web de lire les données collées à partir du presse-papiers provenant d'une feuille de calcul Excel? Il serait certainement utile de savoir avec quelles technologies vous travaillez. Les données Excel collées ci-dessous ressembleront à du texte formaté, comme ceci:
0055486645655 HARICOTS, VERT 700070 0005525551154 HARICOTS, ROSE 99010
Je voudrais simplement configurer un champ de texte sur lequel les données pourraient être collées. La chaîne peut ensuite être nettoyée et analysée dans un tableau en fonction de vos attentes de mise en forme. Ce ne serait certainement pas une jolie solution, mais cela ferait le travail. Dans JSF, vous pouvez simplement ajouter les données au serveur, masquer le champ de saisie et demander au serveur de mettre à jour une table de données avec le contenu que l'utilisateur doit approuver pour s'assurer que les informations appropriées sont transmises à la base de données.
Ce qui serait génial, c'est que si vous connaissiez déjà le format dans lequel ils enregistrent leurs données, de cette façon, vous pourriez avoir un champ de saisie de fichier simple (puis assurez-vous que l'utilisateur peut vérifier ce qu'il a téléchargé avant qu'il ne soit réellement enregistré dans la base de données): les utilisateurs adorent les "boutons magiques" où il suffit de cliquer sur une chose et il calcule tout par lui-même :-)
Et même si vous ne connaissez pas l'ordre des colonnes, s'il s'agit d'un format connu comme CSV, vous pouvez afficher les deux premières lignes de données et demander à l'utilisateur de faire correspondre les données avec le bon , de cette façon, vous connaîtrez la commande et pourrez tout importer à la fois sans forcer les utilisateurs à stocker leurs données dans un format extrêmement spécifique, et vous pourrez même vous souvenir du format pour la prochaine fois. Personnellement, ce serait mon choix préféré .
Sinon pour la saisie manuelle, je suggérerais d'afficher initialement une seule ligne :
Ensuite, lorsque l'utilisateur a rempli au moins toutes les colonnes requises pour cette ligne, ajoutez une deuxième ligne d'entrée en dessous de la première , de cette façon, sauf si l'utilisateur a fait une erreur et revient à une ligne précédente, il entrera probablement des données séquentiellement et se concentrera sur une seule ligne à la fois au lieu d'être confronté à un mur géant de champs de saisie.
vous devriez sauvegarder de temps en temps les brouillons (par exemple Stackexchange) car il n'y a rien de plus frustrant pour les longues entrées de données que d'avoir à tout retaper si vous accidentellement appuyez sur la mauvaise touche (en fait, lorsque vous quittez la page sans soumettre, vous souhaiterez peut-être afficher une boîte de confirmation mentionnant que les données n'ont pas encore été enregistrées)
assurez-vous de mettre en surbrillance la ligne entière contenant la cellule focalisée (et peut-être aussi la colonne), de cette façon s'il veut modifier une colonne très loin sur le côté, il pourrait remplir la mauvaise ligne s'il y a beaucoup de lignes à l'écran. La coloration zébrée pourrait également aider, mais les avis sont partagés à ce sujet.
- si la grille de lignes est vraiment longue (je ne le suggérerais pas, cela pourrait facilement devenir déroutant, mais si vous devez vraiment le faire), assurez-vous que le titre des colonnes est toujours visible en haut même si vous faites défiler. Par exemple, consultez la Démo du plugin Thead jQuery .
Une simple zone de texte, avec cette étiquette:
Entrez une liste de produits comme celui-ci:
Numéro de stock; Nom du produit; Nom sur la facture; Numéro en stock
colonnes séparées par un point-virgule, un produit par ligne
et analyser les données.
Cependant, cela demande un peu de travail: lors de la validation des entrées, détectez les données mal formatées et inattendues, signalez-les à l'utilisateur et permettez-leur de les corriger sans les perdre. La manière la plus simple côté serveur serait:
J'ai reconnu les 75 produits suivants:
Est-ce correct? [Oui, entrez les données] [Non, permettez-moi de les corriger]
Encore mieux serait un aperçu côté client (comme la publication sur stackoverflow).
Justification: par rapport à une grille, vous perdez la navigation dans les cellules et l'alignement des colonnes, ce qui est important lorsque révision et modification les données.Cependant, lorsque saisie données, le séparateur de cellules et de lignes importe moins et Return a le comportement le plus approprié pour démarrer une nouvelle ligne.
Vous obtenez une interface très simple, rapide à utiliser pour saisir un ou deux produits, et pour coller une grande liste d'enregistrements à partir de n'importe quelle source disponible. Le même code peut être utilisé pour traiter les fichiers téléchargés (comme l'a suggéré @Michael Zuschlag).
J'éviterais de mettre les valeurs dans des champs de saisie individuels - souvent cela aide le programmeur plus que l'utilisateur.