《33个提升用户体验的表单设计小Tips》由会员分享，可在线阅读，更多相关《33个提升用户体验的表单设计小Tips（12页珍藏版）》请在金锄头文库上搜索。
1、33 个提升用户体验的表单设计小 Tips好的表单设计能够提升伺服器客户端体验，具体如何做？本文梳理收集了 33 个能立即应用的最好处理方式，与大家分享。想象一下，如果你走进第一间商店，往购物篮里塞满了虽找不到收银台的感觉。最后你可能放下所有东西一分钱没花吃惊极其失望地离开了。的确，这种在支付过程中遇到的槽糕事情，也会发生在表单设计中才。糟糕的表单替我省了好几百美元。冗长、繁琐的表单吓跑了你的顾客，让你的公司潜在中流失了几千美元。表单看起来是最简单的 UI 组件，却把控着你产品中最重要的交互设计。它们引导你的用户去注册、支付。我不需要告诉你这些示例在需要精心运作的企业中扮演的重要角色。但是我也
2、有听话的消息：做到好的表单设计不是那么难。在这篇指南里，我收集了 33 个你能立即应用的最好的做法。它提供了一个颇为好的出发点去试验，找到对你有用的方法。我们会讲到：你知道副本有多重要。我们曾在博客里写过。调整表单设计能大大的提高你的转化率。1. 让用户知道完成表单的好处“我闲的时候，喜欢填不同的线上用表单。我就是喜欢填！”从来没人这样说。用户需要明确的知道活动他们的时间投入到这样一个不合理的把里有什么好处。在结账过程中，好处非常明显，但是注册呢？估算在表单的顶部突出显示他们一旦注册完能做什么。他们可以访问独家内容，社区或者免费签到。不要羞于让他们兴奋。Marvel 显示他们的大客户和用户数来
3、展示他们的社会认同2. 在注册窗口旁边使用社会认同作为人类，我们都想归属于某处。我们需要知道一个产品是否应该我们花费时间、金钱和注意力。证明超链接和我们一样，已经加入了这个俱乐部并非常喜欢它，对你的房地产项目非常有帮助。你的产品上有一些大牌吗？在注册表单的旁边描绘展示这些知名品牌的 logo 。你已经拥有了多少满意的用户？它会让原本犹豫的访客对感到安心。现在就为你所获得的成就仰慕吧！3. 明确错误“发生了错误”。好吧谢谢，我发现了。但是，我已经看了多少遍了？这让我非常受挫，我甚至都没有得到一个哪里出错的提示。有人已经使用了我的用户名吗？还是密码强度设置的不够吗？帮帮你的用户吧，让这个正确尽可能
4、的明确。详情呢？4. 在相关输入框旁边显示错误的信息发生出错。哪错的，显示在哪。假设用户提交了有三处十座错误的示例，然后全都结果显示在顶部。这种情况下，他们需要浏览表单找出哪些需要注意。根据上下文显示自相矛盾，不要忘了综合考虑色盲用户。不仅仅只使用红色文字疏忽强调出错字段。图标是万无一失的选择。强烈推荐阅读更多关于易访问性的文章。5. 对指令有明确的称谓用户不该对他们的操作所带来的结果非常自信。如“提交”、“好的”、“允许”。描述用户将采取的快捷键。多使用“注册”、“立即支付”、“创造账户”。6. 用户操作成功时给他们反馈你可能以为支离破碎整个表单的设计到用户按下“下单”就结束了。错！用户需要
5、清楚的已操作成功的反馈。还要让他们知道接下来的步骤。例如，有人在你的网店里下让了单，显示一个支付成功和订单的页面。甚至还可以提供预期的下一步时间线，比如产品什么时候送货。优化移动端表单有两个方面。一方面，我们需要额外注意某些事情。另一方面，我们手机有很多功能，会让填写源文件简单些。在你的设计上多花点心思。本段四个将提供几个简单的示例，专门用于改进移动设备的表单用来设计。1. 提供足够大的点击区域我周日晚上喜欢在电视上所看NFL比赛。球员的运动能力总是能让惊愕我疑惑，就像他们的接球技术一样。他们需要一双狡蛛属去接球。这些足球运动员可能是你下一个客户。这些家伙看起来很强壮，所以你不相信你表单上的小
6、小点击框让他们生气。谷歌建议常量区域为 48x48px,这是一个很好的标准。2. 不要回避使用手机的硬件功能在用手机填写表格的用户中，大约99%都的人长都有一个功能齐全的摄像头。你想过利用它吗？只需点击按钮，他们就可以扫描身份证或信用卡上转账的信息，否则这可以需要更长的间隔填写信息。更进一步，考虑一下使用 GPS 或生物识别的可能性。3. 使用与预期输入相匹配的键盘如果你简体希望用户填入邮箱地址，激活键盘文本模式，如果他们需要输入电话号码，显示数字键盘。这只需要花一点心思，就能节省应用程序宝贵的时间，不需要他 们自己跑来跑去切换键盘。这还有助于他们了解您期望的输入类型。4. 使用本机原生输入谷
7、歌和苹果都投入了大量研究来设计他们自己的 UI 控件。大多数 人都见过这些，所以除非你有充分的理由不这样做，否则请坚持使用 本机控件。选用正确的输入类型这可能将看起来显而易见，但实际上并不总是那么容易。不要让用户从 200 多个下拉列表中所选择一个国家，或者从下拉列表中选择“是 / 否”，这样会让用户觉得一团糟。复选框、单选按钮、下拉菜单、这段话本和长文本输入在表单的世界里任何东西都有自己的位置。只要确保安全在适当的时候使 用它们。5. 避免超长下拉框节日季正在渐次的过去，但你可能在线订购了一些礼物。要做到这一点，你需要送货选择发货到哪个国家。在那个时候，从滚动条里200 多个国家里里头找到你
8、的真是太让人则生气了。明年再设计表单的时候，最好让用户从预设列表里输入并选择国家。这需要你的开发人员多做一些额外的工作，但是你的用户会为此 感谢你。6. 使用智能的即时搜索方案为什么不让前面的提示更进一步呢？花点时间思考挣用户可能将遇到的场景。一个居住在苏格兰的人则可能开始苏格兰输入“苏格兰”，尽管你的网站只申请加入“英国”作为居住国，在理想的情况下，他们即时输入“苏格兰”也应该看到“英国”作为一个建议条目。如前所述的情况也适用于“ Netherlands ”而不是“TheNetherlands ”。考虑这些场景并花些时间开发开发新这种逻辑，这样用户就不用去猜测准确的措辞了。Lilogo 符合
9、了用户的期望，显示了“苏格兰”的结果，尽管标签上写着“联合王国”7. 当你有 6 个或更少的条目时使用单选按钮下拉框不全是解决方案长表单的最佳解决方案，对于短列表如前所述来说同样也没有。为什么让呢每次回答是或否的时候需要点开一个下拉框用户？6 个或更少条目的时候就使用好的经典的单选按钮好了。更好的表单用户体验，用户扫描垂直的排列更轻松。过多的下拉框可能是最差劲表单最设计的标志。8. 选择合适的日期输入方式很多表单仍在使用错误的日期输入方式（最常被请求的内部信息之一），有多少次选择缺省年龄是从预设的 1900年开始滚动？这些网站要么认为他们的大多数是100 岁以上俱乐部要么就是说不清楚。我倾向于
10、后者。在移动端设备上，使用默认的选择框或者使用格式输入，就像我们的例子里FOXW闻一样。注意预期日期格式，因国家而异。在数字键盘上（甚至移动设备 上）输入 8 个数字都能比滚动 3 个下拉框快得多。如果坚持使用混种iOS或Android日期选择器，请确保有一个既定的默认控管日期，而不 是 1900 年或当前年份。除非你在为百岁老人协会的年度晚会设计申请LatelInput t9. 将输入框长度与输入的预期长度匹配你可能想要想牺牲输入框的长度，但请记住，短的输入框对于邮 编或CVV弋码来说更好用。当你冀望用户键入更长前一天的答案时， 请使用更大的类型信息。把这些长短不一的输入框放在一起，要设计
11、者的很漂亮是个挑战。但是，嘿，我们喜欢挑战！我们正式成为了设 计师，不是吗？10. 去掉“确认密码”这一栏，增加“显示密码”的选项在手机上输入上以密码尤其烦人，所以切不可不要让用户输入过 多不必要的。为什么要让他们判明密码呢？想要确保他们的密码没有 打错吗？在输入框旁边放一个小眼睛图标（或“显示密码”文本），这样他 们就可以看到自己输入的错误。越来越多的网站使用这样的解决方案， 我认为这绝对是良好的表单设计的标志。让工作而不是用户变得聪明当你问自己如何设计表单时，第一个要需注意的是：不要偷懒！ 仔细而正确地表单可以节省很多时间在设计它时，想想你可以从存在的信息中猜测出什么，而不需要用户输入一个
12、空格字符。有些解决方案肯定会比“足够好”的解决方 案占用更多的开发资源，但是你的消费者会因此而喜欢它。11. 当用户尝试使用已获取的邮箱地址注册时，提供登录如果用户试图使用已获取的邮箱地址注册，这可能意味着他们以前早已注册过。为什么不给他们提供一个快速登录的方法呢？预填好 邮箱地址，这样他们只可能需要输入密码。12. 使用智能默认值这个有些笼统，但当你使用智慧型默认值时。你可以根据IP 地址、设备设备语言甚至某些情况下的设备位置作出猜测。每次设计表单时， 都科研项目花几分钟仔细考虑所有这些项目。当在开发我们的产品 UXfol.io 时，我们的开发人员代替我们的用户来做困难的工作13. 避免验证
13、码验证码能让人因很烦，但我们仍然用它来规避数据库卢莱县中的数千个虚假账户。然而，一些更好的、不是那么烦人的解决方案也可以做到解决办法这一点。当考虑使用验证码之时，在实行最懒的开箱即用的想法之前，主要考虑一些替代方案，一些最先进的网络设备。14. 基于邮政编码的地址信息电商店主可能会需要一个地址。可能需要让用户即便键入所有内容，然后在末尾输入邮政编码。或者，先从国家开始 （ 因为邮政编码在全球并不是唯一的 ） ，然后自动填充州、城市，在某些情况下甚至居委会街道信息。所以，你可能需要一个第三方插件。电话号码为此为客户提供了一个很好的示例：不用你的用户，而是你自己确保以正确的格式储存号码。接受多格式
14、的电话号码（包括 其他信息），然后自己把它们标准化。如果做不到，至少提供一个你 期望的清晰的格式示例。16. 在提交表单之前显示错误这听起来很简单，但仍有很多表单忽略了这一点点。如果用户输入了错误的邮箱地址，请在提交表单之前显示错误。但是，注意不要鉴别得太快当你还在打字，但是表单“大喊”你输入了一个无异议无效的邮箱地址时，验证须要变得非常烦人。“嗯，好的，但是你能等我打完字吗？谢谢！”以下建议会更专有，所以在收集用户数据时，一般来说基本上可以在任何情况下使用它们。与上面的一些技巧相异，不它们不需要疯 狂的开发精灵，只需要好的设计。精心设计的表单总是从选择的布局 开始。1. 总是显示标签近年来，
15、颇为使用表单标签作为占位符文本变得非常流行。在许多情况下，它很好用，因为它确实以使设计更干净。但是想象一下， 一旦您的用户填写图标了这些输入框，他们就不知道每个输入框应该 包含数据什么信息了。在某些情况下，比如电子邮件地址，可能看起来很明显，但是容易把姓和名搞混。所以即使你决定使用标签作为占位符，也要在字段被填充时让它们可见，就像谷歌建议的那样。Password。ShowOne icweftase chdracter One special characterOne uppcrcasg character8，haact16Tsi mtnimun One f umber谷歌展示标签的建议（Material设计规范）2 .只询问必要的信息“市场部让我这么做成的！”是的，我知道你（或我们）可能会 被施加很大的压力，甚至要求用户提供鞋码。我们拥有的内部信息越 多，我们就能地细分我们不同的信息等等。但是，填写人长一张满是不必要的信息的巨大表单不仅让人感到 沮丧和恐惧，还会让用户产生不信任。想象一下，你刚
