表单设计模式。书评

图片

评论作者介绍


该书揭示了现场设计的主题,处理数据类型和可用性的概念(对于设计人员和前端开发人员而言有时并不明显)。这本书对于初学者和精通接口的设计师都将是有用的,因为第一本书将使读者对基础知识有所了解,第二本书将为人们思考有时甚至是有争议的设计模式提供参考。评论将以本书的摘要和评论者的简短评论的形式呈现。

第一部分。关于田野


1.顶部的标签比左侧的标签要好。


图片

原因:论文已成为该流派的经典。关于此主题的文章很多,例如,一篇以及数百篇类似的文章。另外,如果标签较长,则将标签放在顶部可以得到更多空间。这似乎很明显,但是许多设计师都顽固地将标签放在左侧。

2.占位符不要描述填充规则


图片
原因:在字段中单击+裁剪后,占位符消失。

3.不再要求输入密码


图片
原因:要求输入两次。

4.在标签和字段之间写入错误文本


图片
原因:无法通过自动完成功能或手机上的键盘将其关闭。

观点:看来这篇论文是可以理解的,但是看起来确实非常不寻常。在设计界面的所有时间(9年以上)中,我只遇到过一次,并且只在一位设计师的布局中遇到过。但也许值得将此模式投入使用。

5.选择最好不要使用


图片
原因:隐藏选项,不要在某些设备上放大,额外单击,有人试图向它们写信。

意见:如果点小于或等于3,则尽量不要使用selects。如果这样,制作标签或广播组会更容易。也许事实是有些人认为这是一个输入字段,而不是选择并尝试在此处输入,因此以下拉菜单的形式产生了输入和选择的混合形式,但第一项是输入字段(通常是搜索)。这既是解决方案,又是拐杖。

6.当您不需要日历来指示日期时


图片

不需要日历:

  • 出生日期,因为每个人都牢记这个日期并且更容易手动输入;
  • 卡的有效期;
  • 文档中写的日期,您只需毫不犹豫地重新输入。

7.创建一个“密码”


图片
原因:有一种观点认为该短语更容易记住。
意见: \ \ _(ツ)_ /¯

8.使用“-/ +”代替选择


图片
规则:如果数字不大,请使用加号和减号。一个很好的例子是每次航班的乘客人数选择。该书说对此主题进行了测试,加/减表明自己更好。

9.字段的大小应在内容之下


图片

原因:是的,因为这是合乎逻辑的!这样的字段不均匀也没关系。但是在半秒钟内,应该清楚什么类型的内容。

10.正确地说出错误所在


图片

为什么通常不是这样:相信这不是安全性,毕竟说密码不正确,我们暗示登录名正确。但是实际上,如果黑客发现登录名(通常是电子邮件地址),则不会检查世界上存在的所有密码。邮件,是适合公开信息。

第二部分。关于按钮


1.将按钮向左对齐


图片

原因:外观从左到右。例外情况可能是其中没有输入字段的模式窗口。例如,在Google的材料设计中,右侧模态中的按钮。

2.不要禁用按钮


图片

原因:无法通过按Tab进入该菜单,某些屏幕阅读器将无法读取该文本,并且由于暗淡而难以看到。

意见:直到最近,我还是希望设计一个按钮来使用户清楚他们在填写表单中的某些内容。而且他甚至不怀疑这可能并不明显。对用户的测试表明,用户看到的是灰色,但并非所有人都明白这意味着有问题。就像您第一次看到一个交通信号灯并能够区分其颜色一样,只是根本不知道每种颜色的含义。无论现在正在燃烧什么,您都将拥有。

3.在按钮上写动词


图片

原因:更清楚会发生什么。

4.请勿在按钮前放置“我不记得密码”链接


图片
原因:对于那些通过“选项卡”浏览字段的用户,这可能会像进入链接而不是按钮一样,并且习惯于使用,他将按Enter键,运行不必要的密码恢复脚本。

5.长篇幅,不要为在顶部放置按钮感到羞耻


图片

意见:废话。最好从下方固定按钮,以便在滚动时始终可见。但是,例如,Yandex.Mail在顶部放置一个按钮。

图片

第三部分。浏览器和自动化


  • 输入所需数量的字符时,请勿自动从一个字段过渡到另一个字段。它会使用户感到困惑
  • 启用HTML5的浏览器具有内置的表单验证器,每个浏览器都有自己的逻辑。禁用默认验证很有意义
  • 必须禁用自动纠错并自动增加第一个字母。否则,在用户看来这是一个错误,并且数据将不被接受
  • 据统计,Chrome中的自动完成功能每月使用90亿次。平均而言,这可为用户节省12秒钟,每月可节省1,250,000天。有趣的事实
  • 请勿在未单击“过滤器”按钮的情况下进行过滤。例如,如果不仅有单选框和复选框,而且还有输入字段(成本,某些间隔等),则需要一个按钮。但是他们自己继续撰写有关测试的文章,用户认为该过滤器在没有意识到您需要单击“过滤器”按钮的情况下无法工作。¯\ _(ツ)_ /¯

第四部分。关于一切


在某些时候,这本书从表格转向描述图标和其他与主题无关的事物的可用性。他们在书中写道,在这里看到有关图标的文字很奇怪,但是图标也是界面的一部分,例如表格,因此可以描述。但是,尽管如此,我仍然在一些有用的信息中发现了很多有趣的东西。关于他们下面。

1.在不同页面上分布“登录名”和“密码”字段并不可耻


在GOV.UK网站上,他们以授权的形式在一个页面上进行了登录,而在另一页面上进行了密码(现在不是这样),用户没有注意到任何奇怪的地方。

意见:现在,我越来越注意到这种方法。从Google到Abstract等各种服务。

图片

2.显示步骤是可选的


用步骤显示进度条没有任何意义。它们占用大量空间。英国政府取消了这一限制,转换没有改变。

图片

3.记住7±2个元素的主题不再相关


原因:因为没人记得网站上的任何内容。如果您忘记了某些内容,可以简单地向上滚动。

4.将地址字段按特定区域接受的顺序排列


这不是来自书,而是来自我的论文。国际邮政协会的书面规则。例如,在俄罗斯,采用了以下程序:

  • 伊万诺夫·伊万
  • Lesnaya,5号楼,公寓。十一
  • 莫斯科
  • 俄国
  • 邮编

All Articles