为您的应用程序设计一个有吸引力且可用的数据导入器

这篇文章得到了我们在 Flatfile 的亲爱的朋友的大力支持，他们创造了以人为中心的美好体验，以消除人与数据之间的障碍。 谢谢！

如果您以前曾尝试将数据导入应用程序，那么作为用户，您就会知道体验的多样性。 在某些情况下，用户对如何使用导入器的说明感到不知所措。 在其他情况下，根本没有方向。 虽然这可能看起来比导入器溢出的说明和如何使用它的文档链接更好，但一旦不可避免的错误开始抛出，一个完全无用的 UI 也会让用户感到沮丧。

那么，当您设计需要数据导入器的应用程序或软件时，您如何确保最终用户不会发生这种情况？ 您是否尝试自定义构建或找到在最小和信息之间取得适当平衡的 Goldilocks 解决方案？ 那甚至应该是什么样子？

今天，我想看看四种方法来确保您的数据导入器的用户界面设计不会妨碍积极的用户体验。

开始之前的快速说明：我将使用实时数据导入器示例来演示如何自行设计。 但是，如果您只想使用现成的数据导入器，但没有时间根据这些良好的设计实践查看现有选项，那么 Flatfile Concierge 就是您要找的。 随着我们的进行，我将展示一些例子，并在本文末尾告诉你更多关于它的信息。

软件数据导入器的 UI 设计技巧

应用程序和软件的数据载入存在许多挑战。 但是，如果您可以正确地获得 UI — 换句话说，为您的最终用户提供一个有吸引力且可用的导入器 — 您可以有效地减少这些挑战。

如果您想为您的用户实现这一点，您的数据导入器应该如下所示：

1. 格式化说明的可读性

数据导入过程有多简单并不重要。 您永远不能假设您的最终用户会自动知道如何格式化他们的文件、允许哪些文件类型以及可能存在什么样的文件大小限制。

因此，主要的进口商页面必须有他们的说明。 只是要小心过火。

如果你给他们留下一堵解释进口商用途的文字墙，他们会对阻碍他们开始的冗余信息感到恼火。 而且，如果您详细说明每个可能的步骤，他们的眼睛就会呆滞。 在最坏的情况下，他们会开始体验感觉好像他们正在被说服。 这些结果都不是理想的。

要找到最佳位置，请瞄准以下目标：

将说明简化为 100 字或更少。

PayPal 的发票导入器就是一个很好的例子：

此页面上有一个段落告诉用户文件需要：

• 为 CSV 格式；
• 包括电子邮件地址、项目名称和发票金额的字段；
• 包括不超过 1000 张发票。

对于任何错过文件格式的人，他们会在上传字段中得到提醒。

其余信息（文件模板的链接和关于如何批量开发票的常见问题解答）链接到其他页面，这使这个导入器页面保持美观和简短。

如果可能，我建议使用段落、项目符号、粗体标题或空白来格式化说明。 这类似于您在网页或应用程序页面上为可读性而构建文本的方式。

QuickBooks Self-Employed 向我们展示了这可能是如何工作的：

提出了三个步骤，每个步骤都保持简短和重点。 通过在它们之间和周围添加额外的空间，阅读导出/导入说明似乎不那么令人生畏。

您可以做的最后一件事是突出“导入”按钮，以便多次使用导入器的用户可以快速跳过后续使用的说明。

如果您使用 Flatfile 作为数据导入器，这可能是这样的：

该按钮在此页面上清晰可见。 对于那些以前使用过这个导入器的人来说，他们不需要通读右边的说明来提醒他们允许什么样的文件类型。 按钮下方有一个说明，说明了这一点。

更重要的是，该按钮位于左上角，这是大多数用户最初关注新页面的地方。 因此，按钮的强烈颜色加上优先放置将帮助用户快速启动导入过程。

2. 向他们展示所有可用的导入选项

消费者通常希望公司为他们提供选择。 这是我们最近在电子商务中经常看到的情况，购物者希望有各种可用的购买选项（例如店内提货、路边提货、两天交货等）。

如果这样做对您的应用有意义，请考虑为您的用户提供同样的灵活性并控制他们导入数据的方式。 当你这样做时，设计每个选项，以便清楚地看到它 - 只需查看它 - 接下来会采取什么行动。

例如，这是 AND.CO 的费用和收入进口商：

带有虚线边框的块告诉用户他们至少有一个选项：将他们的 CSV 文件拖放到要上传的小部件中。 虽然像这样的进口商设计并不总是允许点击上传，但这个（根据说明）。

Flatfile 在导入页面顶部使用了类似的设计：

这两个示例之间的区别在于，Flatfile 在虚线框内包含一个上传按钮，因此很明显两个导入选项都可用。

此块下方还有第三个选项：

如果您的最终用户将返回导入器以添加少量数据并且不想每次都准备文件，那么包含手动导入选项是一个好主意。

呈现导入选项的最后一种方法是像 Asana 那样使用第三方软件徽标：

页面顶部提供了标准 CSV 文件导入选项。 然而，在这之下，是用户最有可能存储项目数据的应用程序。

如您所见，导入选项的视觉呈现与提供的说明一样重要。 因此，与其尝试在这里发挥创意，不如使用最终用户熟悉的久经考验的设计，并帮助他们立即确定他们喜欢的导入选项。

3. 让复杂的导入看起来简单

在数据导入过程的这个阶段，事情可能会变得有点棘手。 即使您在后端有一个完美的导入过程，如果过程的复杂性开始显现出来，它呈现给最终用户的方式可能会成为问题。

您可以对 UI 做两件事来防止这种情况发生。 这一点将涵盖如果导入过程本身很复杂，您可以做什么。

HubSpot 是一款功能强大的营销和销售软件，因此数据导入过程需要一段时间也就不足为奇了。 无论如何，它开始很简单，询问用户是否要导入他们的数据或从另一个平台提取数据：

现在，这个设计与我刚才谈到的关于设计第一页的最后一点相反。 但是，这是一个不错的选择是有原因的。

假设这个 HubSpot 用户决定从 CSV 文件导入他们的数据。 他们会选择“导入”，然后转到此页面：

如果 HubSpot 使用典型的导入页面设计，该页面将需要用户暂停，然后熟悉新界面，然后再继续。

因此，如果您有一个复杂的数据载入流程，需要在实际导入开始之前将其分解为多个步骤，则需要考虑这一点。

假设用户只想导入 CSV、XLS 或 XLSX，他们接下来会发现自己在这里：

这种方法的好处是它可以防止用户必须为他们必须上传的每个文件都通过导入器一次。 如果有相关数据，他们可以选择“具有关联的多个文件”，导入器将帮助他们建立这些连接：

这样，合并文件中的数据不是用户的责任。 他们也不必花费数小时查看导入的记录来合并相关记录。 这个进口商帮助他们做到这一点。

下一个屏幕类似于“您要导入多少文件？” 屏幕。 但是，当用户选择“一个文件”时，会出现这个：

这再次旨在防止用户导入数据，然后花费过多的时间来清理它。

接下来，我们有用户最终看到导入器的部分过程。 虽然它与我们之前看到的设计不完全一样，但它仍然足够直观，用户可以知道如何将文件上传到其中：

虽然我意识到进入其他软件首先显示的页面需要很多步骤，但想想这些用户能够以多快的速度进入 HubSpot 并开始工作。

如果您有一个复杂的上传过程（即多个文件、对象关联等），请考虑使用类似的设计，每个问题都在其自己的页面上以及一致呈现的选项。

4.使用颜色使数据清理速度更快

另一种简化原本复杂的导入过程的方法适用于所有数据导入器。 特别是，此提示与数据载入过程中的最后步骤有关：

• 数据验证
• 数据清理

现在，拥有一个可以实际完成其中一些工作的数据导入器将是一个巨大的帮助。 但是，最终由您的最终用户来审查他们导入的内容并在他们允许将其放入软件之前对其进行批准。

为了帮助他们不要被所有数据和他们需要解决的所有事情压得喘不过气来，请使用颜色来引导他们完成它。

对于此示例，我们将查看 ClickUp。 如果它看起来很熟悉，那是因为它应该。 它是使用 Flatfile 的数据导入器构建的。

让我们从数据验证过程的第一部分开始：

这个页面很简单。 它向用户显示他们导入数据的片段，并询问他们指向的行是否包含列名。

但是看看绿色的“是”按钮。 虽然这是我们用于 Web 和应用程序界面的设计策略（即，使所需的号召性用语成为积极且引人注目的颜色），但这里还有另一个原因。

假设列名存在并且 ClickUp 可以轻松解释数据，这就是用户接下来看到的内容：

这是数据导入者尝试轻松地进行数据验证的尝试。 左侧是文件中所有已识别的列。

右侧是有关列如何与 ClickUp 的字段匹配的信息。 还有三种可能的数据验证选项：

1. 确认映射（绿色） ；
2. 忽略此列（在灰色幽灵按钮中）；
3. 包含为自定义字段（在另一个幽灵按钮中）。

这里的绿色按钮与我们在最后一个屏幕上看到的相匹配。 因此，用户已经习惯于将此绿色按钮视为肯定，这将帮助他们快速浏览所有结果并确认正确匹配的字段。

绿色和灰色不是应该出现在数据导入器中的唯一颜色。

如果出现错误（这不是一件坏事），您的用户应该有机会在数据上传之前修复它们。 根据错误出现在应用程序中的位置，您可能希望以不同的方式设计它们。

例如，ClickUp 使用橙色警告符号来指出验证期间的值问题：

这允许 ClickUp 告诉用户，“是的，列名匹配，但您的值与我们使用的不一致。”

ClickUp 然后在数据清理期间使用红色荧光笔指出字段错误：

这是上传前的最后一步，因此这是 ClickUp 让用户完善数据导入的最后一次尝试。 在这种情况下，如果某个字段标记为必填但不包含数据，则 ClickUp 会以红色突出显示该字段。

仅颜色就应该引起对字段的注意。 但是，如果用户导入了一个包含数百或数千行的文件并且第一眼看不到红色怎么办？ 让他们在这些红线上归零将是非常有价值的。

而 ClickUp 的“仅显示有问题的行”切换执行此操作：

让我们面对现实吧：除非您的数据导入器告诉您的用户他们的数据何时何地出现问题，否则他们可能不会再看一眼。 也就是说，直到他们在软件中并且想知道为什么他们的记录都搞砸了。

当然，他们会把它归咎于进口商和软件； 不是他们自己的疏忽。 因此，在整个过程中提供这些彩色标记将是一个巨大的帮助。

包起来

正如我之前提到的，如果您不确定自己可以在构建无摩擦和无错误的数据导入器之间实现棘手的平衡，同时将其设计为有吸引力、直观和有用，那何必费心呢？

正如我们已经看到的，Flatfile Concierge 是一个现成的数据导入器解决方案，它不仅可以处理各种数据导入场景，而且看起来也很棒。 通过让它为您的数据导入流程提供支持，您可以将更多时间用于构建产品，您的客户可以将更多时间用于为他们的用户提供更好的客户服务和支持。