拖放问题_拖放

最新推荐文章于 2024-09-17 23:15:58 发布

weixin_26715991

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量119

点赞数

文章标签： python

原文链接：https://medium.com/swlh/drag-drop-90f0a88fad98

版权

拖放问题

总览 (OVERVIEW)

This project was completed for Utah-based SaaS Startup, Skipio, over 3 months in early 2019. As the lead designer, I was assisted by Freddy Shelton and Chris Hardman from the Customer Engagement Team. Special thanks to Tyler Dalinga (QA), Yurii Shevchenko (Dev), and Brandon Beecroft (UX) for helping make this happen.

该项目已在2019年初的三个月内为总部位于犹他州的SaaS Startup( Skipio )完成。作为首席设计师，我得到了来自客户参与团队的Freddy Shelton和Chris Hardman的协助。特别感谢Tyler Dalinga(QA)，Yurii Shevchenko(Dev)和Brandon Beecroft(UX)协助实现了这一目标。

问题：我们可以移动此按钮吗？ (The problem: Can we move this button?)

My coworker Freddy came to me one day and asked me a simple question, “Can we move this button?” I looked at the screen he was showing me and said, “Sure, but…why?” Freddy explained that customers were having problems uploading files to our application and suggested that by moving this button, in particular, we could solve the problem.

我的同事弗雷迪(Freddy)有一天来找我，问了一个简单的问题，“我们可以移动这个按钮吗？” 我看了看他向我展示的屏幕，说：“当然，但是……为什么？” 弗雷迪(Freddy)解释说，客户在将文件上传到我们的应用程序时遇到问题，并建议通过移动此按钮尤其可以解决问题。

Image for post — The original file upload page, featuring the offending button.

I was eager to help. I went to my supervisor and asked if I could dedicate some time to solving Freddy’s “button problem” and the answer was “yes.” We got to work.

我渴望帮助。我去找主管，问我是否可以花一些时间解决弗雷迪的“纽扣问题”，答案是“是”。我们去上班了

As a junior designer, I made a rookie mistake. I didn’t ask more questions. I just wanted to prove that I was a wizard with Sketch/Adobe/InVision and that I was a valuable part of the team. As a consequence, I didn’t see the actual problem. Spoiler Alert: it wasn’t the button.

作为初级设计师，我犯了一个菜鸟错误。我没有再问其他问题了。我只是想证明自己是Sketch / Adobe / InVision的向导，并且是团队的重要组成部分。结果，我没有看到实际的问题。 剧透警报：不是按钮。

发现 (DISCOVERY)

“The button” downloaded a sample CSV file. The sample CSV file was an earlier attempt at solving another problem: customers uploading files with improper formatting. We were making some major assumptions: 1) Improper file formatting was the problem, 2) a sample file with the proper formatting would solve the problem, and 3) this wasn’t solving the problem because the button was hard to find. I thought genius had struck when I thought “What if we don’t need the button at all? What if I design a visual guide that displays the correct file formatting and place it above the fold?”

“按钮”下载了一个示例CSV文件。 CSV样本文件是解决另一个问题的较早尝试：客户上传格式不正确的文件。我们做出了一些主要假设：1)问题是文件格式不正确； 2)具有正确格式的样本文件可以解决问题； 3)因为按钮很难找到，所以不能解决问题。当我想到“如果我们根本不需要按钮时，该怎么办？如果我设计了一个视觉指南，可以显示正确的文件格式并将其放置在折叠上方呢？”

I took my breakthrough to Brandon, Director of UX. He was…nonplussed. He asked me what problem I was trying to solve and I told him, “The users can’t see the button below the fold, and the button downloads a sample spreadsheet that shows how to correctly format the file for our system.” We sat down and he encouraged me to take a deeper look. He asked questions like, “Why does the business want this? What are our users trying to accomplish? Is this the only step in the process?

我取得了突破，来到了UX总监Brandon。他……不知所措。他问我要解决什么问题，然后我告诉他：“用户看不到折叠下方的按钮，该按钮下载了一个示例电子表格，该电子表格显示了如何为我们的系统正确格式化文件。” 我们坐下来，他鼓励我做一个更深的了解。他问诸如“为什么企业要这个？我们的用户想要完成什么？这是过程中的唯一步骤吗？

面试 (Interviews)

I went back to Freddy and explained we had some detective work to do. He suggested we talk to our lead Customer Support Specialist, Ari. Over the course of three days, Ari and her team recorded the number of calls they received from customers requesting help uploading CSV files and the amount of time spent on the phone.

我回到弗雷迪(Freddy)，解释说我们要做一些侦探工作。他建议我们与首席客户支持专家Ari进行交谈。在三天的过程中，Ari和她的团队记录了他们从客户那里收到的请求帮助上载CSV文件的呼叫次数以及在手机上花费的时间。

Average number of calls per day: 15

每天平均通话次数：15

Average minutes per call: 30

每次通话平均分钟数：30

15 calls x 30 minutes = 450 minutes/day x 261 working days = 117,450 minutes -or- 1,958 hours per year.

15个呼叫x 30分钟= 450分钟/天x 261个工作日= 117,450分钟-或- 每年1,958小时。

We multiplied the hours per year by the average hourly wage of a Customer Support Specialist and got: $26,426.25

我们将每年的小时数乘以客户支持专家的平均小时工资，得出： $ 26,426.25

This issue was costing Skipio around $26,000 a year, in labor costs alone.

仅因为人工成本，这一问题每年就使Skipio损失约26,000美元。

Putting a price on the number of canceled subscriptions where poor UX played a role would be harder but we now had support from our CTO to continue with the project.

对糟糕的用户体验发挥作用的已取消订阅的数量进行定价会比较困难，但是我们现在获得了首席技术官的支持，可以继续进行该项目。

可用性测试 (Usability Test)

The next step was to recruit some volunteers and observe them as they navigated the CSV file upload process. We used Silverback 3 (a screen-recording software) to record these sessions. Our goal was to test our other assumptions and see if other areas were causing confusion or frustration.

下一步是招募一些志愿者，并在他们导航CSV文件上传过程时观察他们。我们使用Silverback 3(一种屏幕记录软件)来记录这些会话。我们的目标是检验我们的其他假设，看看是否有其他方面引起混乱或沮丧。

Results

结果

None of our volunteers were able to complete the entire upload process without hints.

没有任何提示，我们的志愿者都无法完成整个上传过程。

It took an average of 4 minutes, 38 seconds to complete the process.
完成该过程平均需要4分38秒。
The most confusing step was Step #2: Verification.
最令人困惑的步骤是步骤2：验证。
When data was lost, there was no feedback regarding which data was lost.
当数据丢失时，没有关于哪些数据丢失的反馈。
Upon success, 2 out of 3 volunteers were not able to find their data within the app.
成功后，每3名志愿者中就有2名无法在应用程序中找到他们的数据。

设计 (DESIGN)

Results from interviews told us that this was a problem worth solving. The usability tests revealed that moving the button above the fold would likely yield negligible results, confirmed our assumptions and revealed where we should focus our efforts. Now, it was time to design.

采访结果告诉我们，这是一个值得解决的问题。可用性测试表明，将按钮移到首屏上方可能会产生微不足道的结果，证实了我们的假设，并揭示了我们应该集中精力进行的工作。现在，该进行设计了。

I made a list of key improvements then scoured the interwebs for common patterns for:

我列出了一些关键的改进，然后在互连网上搜寻了以下常见模式：

file uploads
文件上传
format verification (aka field matching)
格式验证(又名字段匹配)
success/error messages
成功/错误信息
loading indicators
加载指标

I iterated on these patterns using our in-house UI style guide, presented them for feedback during our weekly design review, and created the final four screens below.

我使用我们内部的UI样式指南对这些模式进行了迭代，在每周的设计审查中向他们展示了反馈信息，并在下面创建了最后四个屏幕。

原型/测试 (Prototyping/Testing)

To test the new design, I used InVision to create a clickable prototype and recruited coworkers from different departments and asked them to complete the process and offer feedback.

为了测试新设计，我使用InVision创建了可点击的原型，并从不同部门招募了同事，并要求他们完成流程并提供反馈。

Based on this input:

基于此输入：

Microcopy was refined and improved.
显微镜得到完善和改进。
Upload/contact limits were called out at the beginning of the process.
在该过程的开始就调出了上传/联系限制。
A loading icon was chosen.
选择了加载图标。
A progress bar was added.
进度栏已添加。

Most of the iteration involved the second step in which users are asked to verify what type of data is contained in their files. If you’ve never had to do this, it’s a matching game where you are asked, for example, if the column header labeled “phone” in your spreadsheet contains “phone numbers” (the label the system uses).

大部分迭代都涉及第二步，在第二步中，要求用户验证文件中包含的数据类型。如果您从没有做过，那么这是一个匹配的游戏，例如，询问您电子表格中标有“电话”的列标题是否包含“电话号码”(系统使用的标签)。

质量检查 (QA)

摘要 (SUMMARY)

The CSV upload process was a major pain point for Skipio users. Customer Support Reps at Skipio were spending about 170 hours/month fielding calls related to this process, costing the company over $26,000 each year.

CSV上载过程是Skipio用户的主要难题。 Skipio的客户支持代表每月花费约170个小时来进行与此流程相关的电话咨询，每年为此公司花费超过26,000美元。

Initially, I tried to solve a UX problem with UI. The team and I were doing work based on untested assumptions and it slowed us down. We were able to get back on track by doing better research, testing those assumptions, and improving the entire file upload process instead of just one aspect of it.

最初，我试图通过UI解决UX问题。我和团队基于未经检验的假设进行工作，这使我们放慢了脚步。通过进行更好的研究，测试这些假设并改善整个文件上传过程，而不仅仅是其中一个方面，我们能够重回正轨。

Results

结果

The redesigned process went into production in June 2019, the same month I moved on to another role outside of Skipio. I’m curious if our design work reduced the calls to Support and if not, why?

经过重新设计的流程于2019年6月投入生产，同月我转到Skipio之外的另一个职位。我很好奇我们的设计工作是否减少了对技术支持的电话，如果没有，为什么？

Lessons

经验教训

I could have saved time if I had resisted the urge to skip the initial stages of the design thinking process. Asking questions, gathering data, and challenging my assumptions (and those of my teammates) would have given us a better start.

如果我抵制了跳过设计思考过程初始阶段的冲动，我本可以节省时间。提出问题，收集数据并挑战我的假设(以及我的队友的假设)将为我们提供一个更好的起点。

I was fortunate to have dedicated teammates and a mentor willing to guide and encourage me to do better work. Together we were able to significantly improve the experience of uploading files for users of the Skipio App.

我很幸运，有敬业的队友和一位导师愿意指导和鼓励我做得更好。通过共同努力，我们可以为Skipio App用户显着改善上传文件的体验。

Walk-through of Skipio’s CSV upload process in production.

生产中Skipio CSV上传过程的演练。

Thank you for reading. If you have any feedback or have worked on a similar project that you’ve written about, let me know. I love reading design case studies!

感谢您的阅读。 如果您有任何反馈意见或从事过您撰写的类似项目，请告诉我。 我喜欢阅读设计案例研究！