Conception d'un importateur de données attrayant et utilisable pour votre application

À propos de l'auteur

Suzanne Scacca est une ancienne réalisatrice, formatrice et directrice d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca
…

Si vous avez déjà essayé d'importer des données dans une application auparavant, vous savez, en tant qu'utilisateur, à quel point le l'expérience peut être. Dans certains cas, l'utilisateur est submergé d'instructions sur la façon d'utiliser l'importateur. Dans d’autres, il n’y a pas de direction du tout. Et bien que cela puisse paraître plus agréable qu'un importateur débordé de directions et de liens vers la documentation sur la façon de l'utiliser, une interface utilisateur complètement inutile causera également de la frustration aux utilisateurs une fois que les erreurs inévitables commenceront à se produire.

Ainsi, lorsque vous concevez un application ou logiciel nécessitant un importateur de données, comment vous assurer que cela n'arrive pas à vos utilisateurs finaux? Essayez-vous de créer sur mesure ou de trouver une solution Goldilocks qui trouve le bon équilibre entre minimal et informatif? Et à quoi cela devrait-il ressembler?

Aujourd'hui, je souhaite examiner quatre façons de m'assurer que la conception de l'interface utilisateur de votre importateur de données n'entrave pas une expérience utilisateur positive.

Note rapide avant de commencer: J'utiliserai des exemples d'importateurs de données en direct pour montrer comment concevoir cela par vous-même. Cependant, si vous préférez simplement utiliser un importateur de données prêt à l'emploi, mais que vous n'avez pas le temps d'examiner les options existantes par rapport à ces bonnes pratiques de conception, Flatfile Concierge est ce que vous recherchez. Je vais vous en montrer quelques exemples au fur et à mesure et vous en dire un peu plus à la fin de cet article.

Conseils de conception d'interface utilisateur pour l'importateur de données de votre logiciel

Il existe de nombreux défis dans les données onboarding pour les applications et les logiciels. Mais si vous pouvez obtenir la bonne interface utilisateur – en d'autres termes, fournir à vos utilisateurs finaux un importateur attrayant et utilisable – vous pouvez réduire efficacement ces défis.

Voici à quoi votre importateur de données devrait ressembler si vous voulez en faire une réalité pour vos utilisateurs:

1. Mettre en forme les instructions pour la lisibilité

Peu importe la simplicité du processus d'importation des données. Vous ne pouvez jamais supposer que vos utilisateurs finaux sauront automatiquement comment formater leur (s) fichier (s), quels types de fichiers sont autorisés et quelles sortes de limitations de taille de fichier il peut y avoir.

Ainsi, la page principale de l'importateur doit avoir des instructions pour eux . Faites juste attention à ne pas aller trop loin.

Si vous les laissez avec un mur de texte expliquant à quoi sert l'importateur, ils seront ennuyés par les informations redondantes qui les empêchent de démarrer. Et si vous décrivez chaque étape possible dans les moindres détails, leurs yeux vont s'émerveiller. Dans le pire des cas, ils commenceront l'expérience avec le sentiment qu'on leur parlait. Aucun de ces résultats n'est idéal.

Pour trouver le point idéal, visez ce qui suit:

Simplifiez les instructions en 100 mots ou moins.

PayPal ' L'importateur de factures en est un bon exemple:

Il y a un seul paragraphe sur cette page qui indique aux utilisateurs que les fichiers doivent:

• Être au format CSV;
• ] Incluez des champs pour l'adresse e-mail, le nom de l'article et le montant de la facture;
• N'incluez pas plus de 1 000 factures.

Quiconque manque le peu d'information sur le format de fichier recevra un rappel lors du téléchargement champ.

Le reste des informations (le lien vers le modèle de fichier et la FAQ sur la façon de grouper la facture) est lié à d'autres pages, ce qui permet de garder cette page de l'importateur belle et courte.

Si possible, je recommandent de formater les instructions en utilisant des paragraphes, des puces, des en-têtes en gras ou des espaces blancs . Ce serait similaire à la façon dont vous structureriez le texte pour plus de lisibilité sur une page Web ou une application.

QuickBooks Self-Employed nous montre comment cela pourrait fonctionner:

Trois étapes sont présentées et chacune est courte et précise. En ajoutant un espace supplémentaire entre eux et autour d'eux, la lecture des instructions d'exportation / importation semblera moins intimidante.

Une dernière chose que vous pouvez faire est de faire ressortir le bouton «Importer» afin que les utilisateurs qui utilisent l'importateur plus d'une fois peut rapidement ignorer les instructions sur les utilisations suivantes.

Voici à quoi cela pourrait ressembler si vous utilisez Flatfile comme importateur de données:

Le bouton ressort clairement comme le jour sur cette page. Et pour ceux qui ont déjà utilisé cet importateur, ils n'auront pas besoin de lire les instructions sur la droite pour se rappeler quels types de fichiers sont autorisés. Il y a une note juste en dessous du bouton qui clarifie cela.

De plus, le bouton se trouve dans le coin supérieur gauche, où les yeux de la plupart des utilisateurs se concentrent initialement sur une nouvelle page. Ainsi, la couleur forte du bouton associée au placement prioritaire aidera les utilisateurs à démarrer rapidement le processus d'importation.

2. Montrez-leur toutes les options d'importation disponibles

Les consommateurs attendent souvent des entreprises qu'elles leur proposent des options. C'est quelque chose que nous avons beaucoup vu ces derniers temps dans le commerce électronique, les acheteurs souhaitant diverses options d'achat disponibles (par exemple, ramassage en magasin, ramassage en bordure de rue, livraison en deux jours, etc.)

Si cela a du sens de le faire Donc, pour votre application, pensez à donner à vos utilisateurs le même type de flexibilité et de contrôle sur la façon dont ils importent leurs données. Et lorsque vous le faites, concevez chaque option de manière à ce que l'action suivante soit claire – rien qu'en la regardant.

Par exemple, il s'agit de l'importateur de dépenses et de revenus pour AND.CO :

Le bloc avec la bordure en pointillé indique aux utilisateurs qu'ils ont au moins une option: Glisser -et-déposez leur fichier CSV dans le widget pour le télécharger. Bien qu'une conception d'importateur comme celle-ci ne permette pas toujours de cliquer pour télécharger, celle-ci le fait (selon les instructions).

Flatfile utilise une conception similaire en haut de la page d'importation:

La différence entre ces deux exemples est que Flatfile comprend un bouton de téléchargement dans la zone de bordure en pointillés afin qu'il soit clair que les deux options d'importation sont disponibles.

Il y a aussi une troisième option sous ce bloc:

C'est une bonne idée d'inclure une option d'importation manuelle si vos utilisateurs finaux reviennent à l'importateur pour ajouter de petites poignées de données et ne pas vouloir préparer un fichier à chaque fois.

Une dernière façon de présenter les options d'importation consiste à utiliser logos de logiciels tiers comme Asana fait:

L'option d'importation de fichier CSV standard est disponible en haut de la page. En dessous, cependant, se trouvent les applications dans lesquelles leurs utilisateurs sont les plus susceptibles d'avoir stocké leurs données de projet.

Comme vous pouvez le voir, la présentation visuelle des options d'importation est tout aussi importante que les instructions fournies. Donc, plutôt que d'essayer de faire preuve de créativité ici, utilisez simplement un design éprouvé avec lequel vos utilisateurs finaux seront familiers et les aidera à identifier instantanément l'option d'importation qu'ils préfèrent.

3. Simplifiez les importations complexes

À ce stade du processus d'importation de données, les choses peuvent devenir un peu épineuses. Même si vous avez un processus d'importation sans faille sur le backend, la façon dont il est présenté à vos utilisateurs finaux peut être un problème si la complexité du processus commence à apparaître.

Il y a deux choses que vous pouvez faire avec l'interface utilisateur pour conserver que de se produire. Ce point couvrira ce que vous pouvez faire si le processus d’importation lui-même est complexe.

HubSpot est un logiciel de marketing et de vente robuste, il n’est donc pas surprenant que le processus d’importation des données prenne un certain temps. Quoi qu'il en soit, cela commence assez simplement, demandant aux utilisateurs s'ils vont importer leurs données ou les extraire d'une autre plate-forme:

HubSpot ) ( Grand aperçu )

Maintenant, cette conception va à l'encontre de ce dont je viens de parler dans le dernier point sur la conception de la première page. Cependant, il s’agit d’un bon choix pour une raison.

Supposons que cet utilisateur HubSpot décide d’importer ses données à partir d’un fichier CSV. Ils sélectionneraient «Importer», puis accéderaient à cette page:

Si HubSpot utilisait la conception de page d'importation typique, cette page obligerait les utilisateurs à faire une pause puis à se familiariser avec la nouvelle interface avant

C'est donc quelque chose à considérer si vous avez un processus d'intégration de données complexe qui doit être divisé en plusieurs étapes avant le début de l'importation réelle.

En supposant que l'utilisateur veut juste pour importer un CSV, XLS ou XLSX, ils se retrouveront ici ensuite:

Ce qui est bien avec cette approche, c'est qu'elle évite aux utilisateurs d'avoir à passer par l'importateur une fois pour chaque fichier à télécharger . S'il y a des données liées, ils peuvent sélectionner «Plusieurs fichiers avec associations» et l'importateur les aidera à établir ces connexions:

De cette façon, il n'est pas de la responsabilité des utilisateurs de fusionner les données dans leurs fichiers. Ils n'ont pas non plus à passer des heures à parcourir leurs enregistrements importés pour fusionner les enregistrements associés. Cet importateur les aide à le faire.

L'écran suivant est similaire au "Combien de fichiers importez-vous?" écran. Celui-ci apparaît cependant lorsque l'utilisateur sélectionne «Un fichier»:

Ceci vise encore une fois à empêcher les utilisateurs d'importer des données et de passer ensuite trop de temps à les nettoyer.

Suivant , nous avons la partie du processus où l'utilisateur voit enfin l'importateur. Bien que ce ne soit pas exactement comme les conceptions que nous avons examinées auparavant, il est encore assez intuitif pour que les utilisateurs sachent comment y télécharger leurs fichiers:

Bien que je réalise qu'il y a beaucoup d'étapes pour accéder à une page que d'autres logiciels afficheraient en premier, pensez à combien plus rapidement, ces utilisateurs peuvent accéder à HubSpot et commencer à travailler.

Si vous avez un processus de téléchargement complexe (c'est-à-dire plusieurs fichiers, associations d'objets, etc.), envisagez d'utiliser une conception similaire avec chaque question sur sa propre page. comme des options présentées de manière cohérente.

4. Utiliser la couleur pour accélérer le nettoyage des données

L'autre façon de simplifier un processus d'importation autrement complexe est applicable à tous les importateurs de données. En particulier, cette astuce concerne les étapes finales du processus d'intégration des données:

• Validation des données
• Nettoyage des données

Maintenant, avoir un importateur de données qui peut réellement faire une partie de ce travail va être d'une grande aide . Cependant, c'est finalement à vos utilisateurs finaux de revoir ce qu'ils ont importé et de l'approuver avant de l'autoriser à l'intérieur du logiciel.

Pour les aider à ne pas être submergés par toutes les données et tout ce dont ils ont besoin pour traiter, utilisez couleur pour les guider à travers.

Pour cet exemple, nous allons regarder ClickUp . Et si cela vous semble familier, c’est parce qu’il devrait. Il a été construit à l'aide de l'importateur de données de Flatfile.

Commençons par la première partie du processus de validation des données:

Cette page est assez simple. Il montre à l'utilisateur un extrait de ses données importées et lui demande si la ligne pointée contient des noms de colonnes.

Mais regardez le bouton vert «Oui» . Bien qu'il s'agisse d'une tactique de conception que nous utilisons pour les interfaces Web et d'application (c'est-à-dire que l'appel à l'action souhaité est une couleur positive et accrocheuse), il y a une autre raison pour laquelle c'est ici.

En supposant que les noms de colonne sont là et ClickUp peut facilement interpréter les données, voici ce que l'utilisateur voit ensuite:

Il s'agit de la tentative de l'importateur de données de faire un travail léger de validation des données. Sur la gauche se trouvent toutes les colonnes identifiées du fichier.

Sur la droite se trouvent des informations sur la manière dont les colonnes ont été mises en correspondance avec les champs de ClickUp. Il existe également trois options de validation des données possibles:

1. Confirmer le mappage (en vert) ;
2. Ignorer cette colonne (dans un bouton fantôme gris);
3. Inclure comme champ personnalisé (dans un autre bouton fantôme)

Le bouton vert correspond ici à ce que nous avons vu sur le dernier écran. Ainsi, les utilisateurs ont déjà été conditionnés à voir ce bouton vert comme une affirmative, ce qui les aidera à parcourir rapidement tous les résultats et à confirmer les champs correctement appariés.

Le vert et le gris ne sont pas les seules couleurs qui devraient apparaître dans votre importateur de données.

Si des erreurs surviennent (ce qui n'est pas une mauvaise chose), vos utilisateurs devraient avoir une chance de les corriger avant que les données ne soient téléchargées. Selon l'endroit où les erreurs apparaissent dans l'application, vous pouvez les concevoir différemment.

Par exemple, ClickUp utilise un symbole d'avertissement orange pour signaler les problèmes avec les valeurs lors de la validation:

Cela permet à ClickUp de dire aux utilisateurs: «Oui, les noms de colonnes correspondent, mais vos valeurs ne correspondent pas à ce nous utilisons. »

ClickUp utilise ensuite un surligneur rouge pendant le nettoyage des données pour signaler les erreurs dans les champs:

Il s'agit de la dernière étape avant le téléchargement, c'est donc la dernière tentative de ClickUp pour amener ses utilisateurs à perfectionner leur importation de données. Dans ce cas, ClickUp met en évidence un champ en rouge s'il est marqué comme requis mais ne contient aucune donnée.

La couleur seule devrait attirer l'attention sur les champs. Cependant, que se passe-t-il si l'utilisateur a importé un fichier avec des centaines ou des milliers de lignes et ne voit pas le rouge au premier coup d'œil? Leur donner un moyen de se concentrer sur ces lignes rouges serait extrêmement précieux.

Et le bouton "Afficher uniquement les lignes avec des problèmes" de ClickUp fait ceci:

Regardons les choses en face: à moins que votre importateur de données indique à vos utilisateurs quand et où il y a un problème avec leurs données, ils sont probablement ne va pas lui donner un second regard. Autrement dit, pas tant qu’ils ne sont pas dans le logiciel et qu’ils se demandent pourquoi leurs enregistrements sont tous foirés.

Bien sûr, ils blâmeront l’importateur et le logiciel; pas sur leur propre négligence. Donc, fournir ces marqueurs colorés tout au long du processus sera d'une grande aide.

Conclusion

Comme je l'ai déjà mentionné, si vous n'êtes pas sûr de pouvoir réussir l'équilibre délicat entre la création d'une friction et une erreur -free importateur de données tout en le concevant pour être attrayant, intuitif et utile, alors pourquoi s'embêter?

Comme nous l'avons déjà vu, Flatfile Concierge est une solution d'importation de données prête à l'emploi qui n'est pas seulement conçue pour gérer un large éventail de scénarios d'importation de données, mais cela a également l'air génial. En le laissant alimenter votre processus d'importation de données, vous pouvez consacrer plus de temps à la création de produits et vos clients peuvent consacrer plus de temps à fournir à leurs utilisateurs un meilleur service client et une meilleure assistance.

(ra, ef, il)