三款巧克力棒评分小组设计项目的成果

上周我提出了一项小小的 设计挑战：设计界面的一小部分，允许用户按喜好顺序对三款巧克力棒进行评分。很多人尝试了这个挑战。我想总结一下我认为最好的作品进行讨论，然后选出“获胜者”（请记住，这只是我个人的选择，不一定代表在世界上每个应用程序中都能获得最佳效果）。

Jesse Shawl 的第一个作品就是三个下拉菜单

我很高兴 Jesse 发布了这个作品，因为它突出了这个挑战的一个重要方面。该设计非常简单，这是好的（虽然我会调整间距以使其更清晰地显示哪些内容相关联）。但它允许用户犯错。用户可以对每款巧克力棒进行评分，但可以选择对每款巧克力棒使用相同的评分，这并不能解决按顺序评分的问题。

Moritz 的作品也使用了下拉菜单

查看

最初只显示一个下拉菜单，包含所有三个选项。选择第一个下拉菜单后，将显示第二个下拉菜单，其中只有剩余的两款巧克力棒选项，最后是第三个下拉菜单，包含最终选项。我会批评最后一个选项是不必要的，但它确实完成了流程。

---

David Booth 的作品很巧妙，它使用巧克力棒本身作为条形图来反映其当前评分。

不幸的是，它也与 Jesse 的解决方案一样存在问题，即用户可以对两款或多款巧克力棒使用相同的评分。它也没有使用任何已知的 Web 可用性功能。是的，它说“点击一款巧克力棒”，但这是一个相当不寻常的请求，不直观。另外，当只有 3 种可能的评分时，它需要 5 次点击才能完成一个循环，这有点奇怪。

---

Nate 是第一个尝试拖放界面的。

这解决了每款巧克力棒具有唯一评分的问题。换句话说，不可能使巧克力棒处于无效的评分顺序状态。

还有类似的拖放解决方案，例如 Martin Blackburn、Josh、stursby、Kyle Sevenoaks、Remco Hendriksen、Óscar Mario Víquez、Michael Crawford 和 Kirby。 Cooper 也使用了拖放技术，它具有一个简洁的功能，即会快速弹出通知消息，总结更改内容。

另一个作品来自 Todd Wolfson，他也尝试了一种变体：选择并拖放。 Zach Smith 创建了“容器”，可以将巧克力棒图标拖放到其中，并提供“X”选项，以便在您犯错时将其移回。 Daniel 也使用了“容器”。

关于拖放

拖放功能在计算机操作系统中已经存在很长时间了。用户知道如何操作它，并且感觉很舒服。但 Web 上的拖放功能要新得多。它并不常见，而且（我没有数据，但我敢打赌）很多用户甚至都没有想过在 Web 上尝试它。

但是，拖放功能确实很有用！尤其是在这种情况下。我将提出，如果我们选择实施它，我们应该尽一切努力告诉用户我们对他们的期望。一些选项

1. 鼠标光标应设置为“移动”

   .move {
      cursor: move;
   }

2. 解释操作说明的文字（例如，“要更改巧克力棒评分的顺序，请将您要移动的巧克力棒拖到您希望它位于的数字上”。）。
3. 设计应突出显示“拖放”。也许可以添加一个小把手来拖动它们，以及一个虚线“容器”来放置它们。
4. 除了拖放之外，还应提供另一种交互方式来实现相同目标（如果更繁琐）。这对于移动设备尤其重要，因为没有鼠标。可以使用点击-拖动-点击的方式，但这肯定不是一种已建立的模式。

在 Wufoo 的表单构建器中，我们提供拖放功能来向表单中添加新字段并重新排列当前字段。我们通过文本进行解释并显示正确的鼠标光标。但是，通过拖放可以完成的所有操作都可以通过点击来完成。这样做会更繁琐，因为所有新字段都将位于底部，您需要反复点击才能将其定位到所需位置，但这是可能的。如果用户愿意尝试学习，拖放功能只会使事情变得更容易。

---

Rafał Krupiński 创建了一个类似于拖放的 UI，但允许用户点击。

将鼠标悬停在第二或第三款巧克力棒上会显示一个箭头，点击该箭头会将该巧克力棒向上移动一个位置。非常简单。作为一项小小的改进，我建议使“向上移动”箭头更加明显（以便不需要解释性文本）并且始终可见。（带文本的替代方案）。只提供向上箭头也略微有点奇怪，因为它可能与用户的思维模式不符。如果他们心里想“士力架，太难吃了！”并且想将其向下移动。他们只能通过向上移动其他内容来做到这一点，这与他们目前的想法相反。

---

prabhu.webdev 尝试了一个投票系统，其中每款巧克力棒都有向上和向下箭头，这些箭头会影响数值。

很高兴看到 UI 的一种完全不同的方法，但不幸的是，这再次没有解决两款巧克力棒可能获得相同评分的问题。如果将此想法扩展到让一个群体决定哪款巧克力棒最好，这可能正是解决办法。

类似的“投票”概念由 Tauseef Jamadar 创建。

---

Richard Bland 使用“获胜者区块”的概念解决了拖放的一些问题

此 UI 使拖放的概念更直观，因为大多数用户可能理解获胜者区块的概念，以及每个参赛者都应该占据一个层级。不幸的是，将每款巧克力棒拖放到一个区块上并不是特别令人满意（很难判断您是否“做对了”），并且没有任何东西可以阻止多款巧克力棒位于同一个区块上，或者停用未使用的区块。

Richard 更新了它，以利用一些“放置区域”和吸附行为，从概念上讲这是一个好主意，但出现了一些错误。

---

Raphael Lopes 使用了拖放，但以一种独特的方式：将巧克力棒制作成垂直滑块。

对我来说，这比其他一些拖放解决方案更自然，但我希望有更多可用性功能，例如浏览器的默认滑块 UI、移动光标或一些有帮助的文本。

---

Thomas Dybdahl Ahle 的这个作品我非常喜欢，因为他将一些数学知识融入其中。这个作品只需最少的步骤即可完成任务（2 步），只需提供两次比较。

我希望从视觉上看，它不像要进行一个三步过程。我认为如果它直接告诉您将是一个两步过程会很好。它只会显示第一次比较，然后在完成第一次比较后显示第二次比较。

类似的点击投票概念由 Zach Malone 创建。更多作品来自 Pablo Botta、William Blanchette 和 IJas，需要三次点击才能“完成”。

---

Damon 将投票的概念与条形图结合起来

好主意，但它也存在我们之前讨论过的早期问题，例如可以对同一款巧克力棒投相同的评分，而且有点过于复杂，允许 1-10 的值，而不仅仅是按顺序评分。

---

Baylor Rae 实现了一些与“具有双向排他性的单选按钮”想法非常相似的东西

查看

我非常喜欢使用简单的表单元素。我最大的批评是，双向排他性感觉有点令人沮丧，因为如果存在冲突，一次点击有时会停用多个先前的选择。改进的方法是使用 值交换，这感觉更好，因为它通过交换而不是停用来处理冲突。

Baylor 还 更新了此技术。它回退到单选按钮网格，但在启用 JavaScript 时，会使用两步排序系统。

---

另一个点击排名系统的版本来自 Remi

两步即可对所有三款进行排名。它确实依赖于悬停效果（请务必记住移动设备 实际上没有悬停效果）。但这可以通过一些文本来解决。

---

Peeter 的此技术结合了许多其他作品的元素。乍一看它看起来像单选按钮网格，但在实践中更像是点击投票，结果看起来像条形图。

Peeter 不是唯一一个实现强制用户选择极端选项（如“糟糕！”和“美味！”）的 UI 的人。我更感兴趣的是简单地对它们进行排名，而不是应用标签。使用像这样的极端标签可能会降低用户填写表单的意愿，如果他们不同意这些标签。例如，有人可能非常喜欢这三款，但其中一款比其他两款稍微好一点，另一款稍微差一点（就像我一样）。

---

Caio Dettmar 的此技术使用了实际的滑块

查看

滑块是一种相当成熟的模式，但这与之前的许多作品存在相同的问题，即您可以将两款巧克力棒滑动到相同的值。另外，为什么可编辑输入？当您更改该值时，滑块似乎不会改变。通常，当实际数值不重要时（就像在这种情况下一样），会使用滑块。

---

最具想象力和“标新立异”的想法来自 David Booth，他创建了“巧克力棒狙击手”

它类似于获胜者展台的想法，但气球漂浮在空中，上面载着巧克力棒。您点击气球（使其爆裂），巧克力棒就会掉入奖杯中，进行评分。如果目标是速度和实用性，当然这个想法不适用，但无论如何，这个想法超级巧妙有趣！使用这样的想法可能会大受欢迎，鼓励用户参与和分享。例如，在创建新的 Wufoo 帐户时，在您完成表单并在第一次看到应用程序屏幕之前，您会被带到一个显示“组装 Wufoo 功能”的屏幕，其中一系列抽象图标依次闪烁。这不是因为网站需要时间来创建您的帐户（此时已经创建了），而是因为它非常有趣，并且使创建帐户的体验更加特别。

---

我并没有太担心设计背后的技术，但Richard想出了一个巧妙的方法，只用CSS就能根据喜好重新排列巧克力棒。特别酷的是，它使用了单选按钮输入，所以理论上它可以像真正的表单一样提交数据。

类似的、主要基于CSS的技术由mike实现，只是用了一点jQuery来防止重复。

---

为了极力减少解决问题的点击次数，David Herrera设计的这个UI只需要一次点击。

查看

显然，这种方法不可扩展（正如David自己所说），但看到这些极端案例还是很有趣的。

总结

看到所有这些想法涌现出来真是太棒了。有很多有趣的提交。如果有人被遗漏了，我表示歉意。我有一些无法运行或者偏离主题太远的提交没有收录。如果你想查看更多，可以阅读完整的评论线程。

这实现了我的期望：突出即使是最简单的用户界面机制也可以用多少种不同的方式实现。下次你需要设计一些用户交互时，想想这个例子，以及看似最简单的事情也可能有多么复杂。

令我惊讶的是，在我看来，没有一个实用的解决方案脱颖而出，成为“明显最佳”的方案。也许这是可以预料到的，因为我们几乎没有上下文可以参考。

“获奖作品”

请记住，这并不代表任何应用的最佳UI，但我认为这三个作品做得非常出色。

• Baylor Rae’ – 简易点击排名，并提供非JavaScript备用方案。
• David Booth – 巧克力棒狙击手
• Richard – 主要基于CSS的点击重排，是一个真正的<form>表单。

恭喜你们！希望以后有机会再次举办这样的活动。