这些是无需几个小时的用户体验，纸张原型制作或任何其他流行术语即可改善项目用户体验的技巧。

（认真地，寻找“设计思维”。100,500个结果！）

本文适用于谁？

开发者 您已经创建了自己的应用程序，但是每个用户都被它折磨了。而且您知道：如果他们亲自告诉您，那么事情真的很糟糕。
平面设计师 。在Internet上的文章上研究UX是一种非常痛苦的死法。
项目经理 。您已经是四分之一的UX设计人员。学习其余的技能将是很好的。
还有其他骗子 。每个晚上和周末都忙于项目的人。您也将派上用场。

如果您已经是UX设计人员，那么本文不太可能适合您。我跳过了整个领域，将精力集中在新的UX设计师 （或必须执行此操作的相关领域的人员）缺乏的主要技能上 。

该技能是“了解界面语言” 。

在我职业生涯的开始，我为客户通过具有完全明显的UX错误的初稿（或正在运行的原型）的频率感到震惊。我并不是在说经过长时间的A / B测试可以发现的错误。我说的是简单， 最愚蠢的错误。

缺少更好的例子：

某个地方有一群知道HTML但不知道单选按钮和复选框之间有什么区别的开发人员

我的客户不是很坏，但是该死，您不必知道前额是7个跨度即可：如果您可以从列表中选择一个元素，则需要SWITCHES（标志），而不是标志。要了解这一点 ，您只需要了解界面语言即可。对我来说，这是最疯狂的。界面流畅， 每个人都可以使用 。您不需要大学，不需要课程等等。

老实说，您只需要有一种精神就可以：（A）停下来思考一下，当应用程序使您感到尴尬或烦恼时，（B）在界面中说明让您感到烦恼/烦扰的内容，然后（C）弄清楚如何避免这种情况您自己项目中的特定错误。

不断重复此过程-并在最短的时间内成为专业人员。

今天，我想谈谈四个小的规则 ，这些规则将有助于消除您自己项目中的这些痛点。这些启发式方法比“如果用户只能选择一项，则使用开关”要深一到两个级别。但是，如果您遵守此列表的要求，那么您的项目从一开始就将变得更加容易使用，这将为其他更重要的事情腾出时间。

（然后开始听其他UX设计师关于最新学术用户研究方法的讲座！）

这是我们涵盖的内容：

没问题吗然后继续。

1.当地法律

将界面元素放置在引起更改的位置。

在所有其他条件相同的情况下，接口元素应放置在发生更改的位置旁边 。因为当用户想要对系统进行更改时，他不由自主地看着将发生这些更改的位置 。

假设您有一个项目列表。在哪里放置“添加新项目”按钮？

问题：哪里有零钱？

答：在列表的末尾。

好的，在列表末尾放一个按钮。

等待。您认为这很简单。但是有一种诱惑。

诱惑只是将其放置在有可用空间的地方。

例如，如果您有一个菜单，那么您可能会想：“我们有一个菜单！为什么不把它放在菜单上呢？？”

违反音乐界面中的本地法则

答案很明显：因为没人会在那里找她。

（完整的答案是，如果您仅将元素放置在自由的位置，那么该应用程序将变得不适合混乱使用，否则人们将尽快从中逃脱）。

想我在开玩笑吗？曾经遇到过这个界面吗？

在Evernote界面中违反当地法律

同样糟糕且普遍的替代方法只是做出您在Dear技术公司看到的决定，而无需考虑这是否对您有意义。 “需要一个按钮“添加”吗？没问题我看到了一个这样的按钮。拿着啤酒！”

看一下用户永远不会寻找它的另一个按钮。一般来说，他们会怀疑此按钮会为较大的空白空间添加新内容。因为她在那里。

您的用户希望您遵守当地法律。

现在，让我们使用它。

am

也许您是天生的UX设计人员，并且总是从视觉上想象如果有成千上万个元素而不是五个元素，将会发生什么 ，并且您知道会出现问题。如果用户创建了大量的播放列表，则该按钮将向下滑动数百个像素！

因此，最好将按钮固定在列表的底部，以使其始终可见，而不管播放列表的数量如何。

太好了！这正是Spotify所做的。

作为奖励，（1）使用内置按钮，直到它离开屏幕为止，然后切换到固定的项目；（2）使它比Spotify按钮更明显，我几个月后才亲自注意到，无奈地右键单击单击可将单个歌曲添加到播放列表！

另一个选择是确认我们不能可靠且一致地在列表底部显示按钮。最适合她的地方在哪里？

答案（我认为很明显） 在列表的顶部 。

这是我的愿望

该死！这正是Spotify竞争对手Rdio在Pandora收购前所做的。

从记忆中重建（就像所有现实一样，如果您考虑一下）

结论很明确。永远不要出售您的公司，永远要遵守当地的法律。

（实际上，有三个局部性定律，“仅将UI元素放置在它们影响变化的地方”只是第一个。如果感兴趣，请阅读此处）。

下一个！

2.除下拉列表外的所有内容

每当您尝试使用下拉列表时，请考虑所有可能的替代方法。

UX设计中的一个不明显的教训是， 下拉列表通常是最糟糕的选择 。

欢迎来到地狱！

它们并不总是很糟糕，但是以下因素对您不利：

下拉列表需要太多点击 。一次打开，再滚动几次以滚动至所需选项（在移动电话上），另一次选择正确的选项，最后一次关闭（在移动电话上）（与一键式比较，从列出的选项中进行选择）。
下拉列表不显示选项 ！要查看它们，您必须首先单击列表，并且在手机上通常一次不会显示整个列表。
在长下拉列表中，很难导航 。国家/地区下拉列表中可以包含195个以上的项目。在某些时候，几乎任何其他版本的UI都比滚动下拉列表要快。

这非常简单，因此让我们看一下下拉列表的主要替代方法。

如果选择是在两个选项之间...

我们有一些很棒的方法可以选择以下两个选项之一。所有这些（a）立即显示选项，并且（b）所需的点击次数较少。

对于没有“默认”答案的问题，请尝试使用分段按钮 。

如果存在与“关闭”匹配的默认状态，请尝试选中复选框 。这对于在用户单击“保存”或“提交”之前不会影响更改的设置也很有用。

开关的工作方式类似：有利于应立即应用更改。

仅当有两个选项时，标志和开关才有意义。当选项数量从2到大约5时，以下各项很有用，因此您可以尝试其中的一些。

如果选择2-5个选项之间...

上面，我们看了分段的按钮 （这里也使用它们）。值得注意的是，使用更多选项时， 垂直分段按钮可沿文本长度提供更大的灵活性。

开关（单选按钮）的操作方式类似，但是对于显示每个选项的子元素特别有用。

为了详细显示几个选项，卡非常适合。

我喜欢从字面上显示视觉选项而不是列表的技巧。

显然，特斯拉也喜欢它。

如果选择是在许多选择之间...

当有很多选项并且滚动令人讨厌时，请考虑提前输入完成。它看起来像一个搜索栏，在输入字符时显示最佳结果。

如果选择日期...

对于日期，下拉列表是最糟糕的。如果我这样做，那么作为UX设计师，我真的会失败。

哪个选择？好吧，这取决于具体情况。第一个问题： 您选择哪种日期？

泊松日期 。首先， 更可能的日期，然后在列表中，不太可能的日期。例如，预定会议或航班的日期。
挥发性高的日期 。 在很宽的时间范围内具有大致相同概率的日期。例如生日。

（是的，为了纪念数学分布，我称其为“泊松日期” ：-）

不同类型的控件适用于不同类型。

对于Poisson日期，我们想尽可能地简化最可能范围内的日期选择（例如，安排会议可能是下一个日期，例如14天）。选择一个超出此范围的日期是很正常的，这会有些困难。

日历控件完全满足泊松日期的这些要求。如果您知道日期很可能落在接下来的2-4周内，那么您就选择了巧克力。

颇具创意的是， 默认情况下 ， Google Flights 默认为您提供约两周的航班，有时会引起混乱（“我没有选择这个！”），但这可能是Poisson发行版中最有可能的选择。

对于具有高可变性的日期， 日期文本框可能是最佳选择，其中（A）没有理由偏爱一个日期而不是另一个日期，即（B）同样难以选择所有选项。

请记住，输入[type = date]是您的朋友……至少在桌面上

如果您选择一个数字...

数字有多种形式。最有可能的是，您很容易在下拉列表中列出一些东西：机票，人，房间等。

您多久需要一张票？ 很多时候 。

您多久需要10张票？ 不会太多 。

您多久需要10,000张票？ 这是一个残酷的玩笑吗？

在这里，我们再次处理泊松分布，必须使用移到较小数字的控件：例如， 步进器 。

对于范围广泛的号码（例如，社会保险号码），您仍然不会使用下拉列表... 我希望 。

我可以在至少某个地方使用下拉列表吗？

当然可以

记住，当...

用户很少需要更改默认值。
选项很少 。例如，在iOS控件中，默认情况下仅显示三个选项。
用户不在移动电话上 （在台式机上，许多问题已得到缓解）

也许您当中最观察到的人已经注意到，在我上面提到的Google Flights界面中，实际上有三个明显的下拉列表 ！

值得注意的是，在移动界面中没有“经济”下拉列表

他们实际上在这里做得很好。潜在的可用性问题可以通过以下方法得到快速缓解：

特殊控件 ，在按下时会显示所有参数（包括在手机上）-并在一个下拉列表中用四个步进器替换四个下拉列表（成人，儿童，座位上的婴儿，怀抱中的婴儿）。
在移动界面中删除 “经济”下拉列表
每个项目很少有选项和智能默认设置

知道了让我们走得更远。

3.下蹲测试

如果您斜视，最重要的事情应该是首先引起注意，而最不重要的元素应该是最后。

安全性问题：用户应如何使用此页面 ？

（注意：我已经模糊了它，所以请遵循我的直觉，但是我可以给出一个提示：这是数据输入表单）

我建议两件事 ：

在黄色区域中设置所有相关的复选框 （??）
点击蓝色的提交按钮

你也这么想吗

错误和错误。

“标记”实际上是用于输入文本数据的很小的字段（如果您阅读了上一节，则知道应该有步进器）。
最重要的事情 （“查找选项” –顺便说一句，这是一种非常令人困惑的“提交”方式）由灰色且不起眼的按钮框住。紧随其后的是不那么重要的事情（“帮助”），但是它更大且更可见。

斜视测试表明， 最重要的事情应该是最引人注目的 。这里最重要的是什么？这是一个文本框（或步进；）和一个“提交”按钮。

如果走得更远，下一页会更糟。

您将按什么：左侧的灰色按钮或右侧的相同灰色按钮？

希望您选择了左手！

急于填写此表格，我实际上首先单击了“帮助”按钮。 哎呀当我第二次进入时，我单击了“后退”，甚至流畅地扫描了两个按钮的名称，因为在其他99,999％的网站上（字母的方向从左到右），“后退”按钮总是左

再说一次，如果你you起眼睛，我不能说什么很重要。

像本地法则和排除下拉列表一样，斜视测试非常简单。 30秒内纠正方案。

在一次真正的重新设计中，我想在SAME PAGE上选择票数。 但这是不同时间的不同定律

它行得通吗？

自己说。四个开关和一个按钮。还有下面的一个小链接。

我不是想在AlaskaTrain.com网站上找到问题，这很常见。

这是我最喜欢的社交网络的注册屏幕，该屏幕基于Foursquare的建议（当然，值得一看）。

如何实际发送输入的数据（最重要的是）？

提示：该按钮隐藏在右上角纯文本的后面。

但是这里的Foursquare仅遵循Apple的设计标准。不幸的是，即使在行业领导者中也经常发现违反斜视测试的情况。

识别页面上主要元素的一种方法是考虑多少页面视图包含特定操作。以下是Anki程序的相关指标（Anki程序是使用间隔重复来存储单词，表达式和任何其他信息的程序-大约Per。）。

对于我看过的每100张卡，我将转到...

显示答案（约95次）
返回卡片列表（两次）
开始添加卡片（两次）
其他一些功能（非常罕见）

这样的分析确实暗示了哪个界面在这里会更好。

强调最常用的功能（在第一近似中，“最常用”等于“最重要”）
松开，隐藏或删除较少使用的功能

但这仅仅是开始（例如，我想看看用户是否理解带有加号但没有签名的按钮会添加卡片 ）。但是，通过一些简单的启发式方法，我们将10个UI元素的混乱，混乱的界面减少到了5个。这个...在这里检查我的计算...一半。

有关斜视测试的更多信息，您可以观看我的视频，该视频演示了Timezon.es Web应用程序的重新设计。或者，如果您没有十分钟的时间，请参考以下说明性博客文章，并逐步进行同样的重新设计。

4.案例研究

如果您向用户介绍新概念，那么有一些例子值得一千个单词，但人们还是不会读。

当示例更清晰时，我们有一种奇怪的趋势试图用语言解释一切。

以新的初创公司Teeming.ai为例，他最近与我联系以咨询其主页设计。此页面上的标题：

“ Teeming 消除了远程工作中的孤立性 ”
“ Teeming有助于远程团队建设 ”，它也是“ 学习，解决问题，玩乐和互相激励 ”
“用于同步[通信]的信号和视频”
“与您所有喜欢的视频平台兼容”

但这是问题。 充实实际上是做什么的？

很难说。显然，这在某种程度上与…… 对远程工作者的积极影响有关 ？但是我没有具体的想法，这将如何对我个人有所帮助，因此，我将不会尝试这项服务，推荐它等等。

（对不起，Teeming，你知道，我爱你）。

接下来，看看IFTTT 。也许您已经知道他们在做什么-然后假装不知道 ，然后尝试从主页上的标题中了解这一点：

自动为披萨外送（Dominoes + Hue）的家伙照亮道路
(Instagram+Twitter)
(Google Assistant+iOS Calendar)

您无需列出很多示例就可以得出一个清晰的画面：IFTTT将应用程序连接在一起以完成它们无法单独执行的任务。

疯狂的是，他们首先在首页上用文字解释了这一点：

IFTTT帮助您的应用程序和设备以新的方式协同工作。 IFTTT是使所有应用程序和设备相互通信的一种免费方法。互联网上的所有内容都无法正常运行，因此我们的使命是建立一个更加互联的世界。

布莱恩。

问题：什么能更好地解释应用程序的想法？例子或描述？

思考例子。仅当我看到一些如何对我有帮助的示例时，说明才完全清楚。

但是，不仅在登录页面上还需要示例。这是我们第一次进入Basecamp项目管理工具时看到的。

您会看到两个准备明确的项目，而不是一个完全空白的页面，这些项目通过示例教您整个应用程序的工作原理（并给出了一段时间使用该系统的外观的想法）。

认真地说，我可以阅读来自假用户的假聊天，他们在调度程序中讨论假文件下载和假任务。

甚至还有一座友善的山峰吗？ ...这表示我可以观看有关本教程的两分钟说明性视频。

谢谢Gora先生的指导：演示视频是通过示例学习的另一种方法！这些示例显示了我的项目的外观，视频显示了如何使用该软件。

精彩地。

如果您的应用程序为用户提供了一些创建的东西，那么演示是通过示例展示可能性的一种好方法。出色的Procreate

绘图应用程序赢得了Apple设计奖，在App Store和App Store Essential上获得编辑选择奖，约翰·格鲁伯（John Gruber）称其为“开创性的”等等。但是，没有像该编辑创建的作品的真实示例那样令人赞叹。

这不是普通的

哇应用程序。

这不是MS Paint。

演示是了解应用程序功能的强大工具。

因此，如果您的应用程序做了一些陌生的新事物，或者依赖于陌生的新概念，那么您应该学习如何通过示例学习。如果用户以前没有看过此应用程序，那么您需要立即提出一个问题：如何举一个例子使其更清晰？

简而言之，我最喜欢的方法是：

在试图为用户提供功能/应用程序等的任何页面上，均显示使用此工具可以完成的示例。
使用“引导程序”方法，显示示例数据，并举例说明正常运行的应用程序的外观。
战略性地嵌入背景信息（例如文章，视频或提示）以及用法示例。
您的应用程序允许您创建一些创意吗？展示画廊以激发想象力。

有道理吗？来吧，四舍五入。

直观UX的四个规则