帮你提升表单使用效率的四个界面设计技巧

   作为世界最著名的客户关系管理软件巨头,Salesforce 在CRM软件设计上有着深入的了解和过硬的设计和开发经验。诸如CRM这类企业级的软件中,表单类的界面非常多,这也促成了今天的这篇文章。一个优秀的表单到底要具备怎样的素质?如何提高表单的用户体验和使用效率?看看Salesforce 的团队是怎么做的。


  Salesforce 用户每天都在和表单打交道,无论他是销售人员、主管还是经理。所以,对于Salesforce而言,能否无缝地添加、编辑、删除信息就是确保企业生产力的核心因素和驱动力所在。这也是为什么Salesforce的UX团队将表单设计和编辑作为新产品 Lightning Experience的核心。

  1、标签&字段的对齐

  在Lightning 中,表单里的标签和它所对应的输入字段是一起左对齐的,并且标签处于输入框的上方。这种设计方式可以让用户操作更加省心高效,和之前的版本相比,用户在浏览和操作的时候,只需要进行上下眼动就可以搞定一切,无需左右扫视。


  一切都是左对齐的

  虽然新的设计会在垂直方向上占用更多的空间,但是标签和字段的匹配会让整个界面在视觉上更加易用清晰。为了让用户在输入的时候看得更清楚,成对的字段和标签会更加靠近,两个不同的组之间的间隙会更大。无需左右扫视之后,用户可以更加顺畅地填写表单。

  在视图模式之下,我们采用了相同的原理来设计,这样使得信息的层次结构更优秀,同时确保了整体的可读性。


  2、设置默认值

  如果你是一名销售人员,你的工作内容可能涉及到同潜在用户进行沟通(也就是“Leads”)。如果你想在Salesforce中跟踪这些潜在用户的信息,那么通常你得先创建一个相应的档案。如果要这么做的话,可能会创建下面的这种Lead 表单:


  在Salesforce中创建一个新的Lead 表单

  看起来很简单,是吧?但是如果我们仔细看看,就能逐渐找出这种表单在设计上的门道。第一个可编辑的字段是“Lead 状态”,它包含了以下选项:无联系、有联系、开放状态、合格、不合格。


  研究表明,设置一个默认值会引导许多人在多种不同的语境和环境下选择默认选项。好了,回到最初的问题,如果你是一个销售人员,在同新的潜在用户的沟通的时候,第一次填写这个表单的时候,你可能会更倾向于选择“开放状态”而非空着不填写。


  好了,在绝大多数的情况下,新建一个Lead 表单的时候销售人员会选择“开放状态”。而在之后每次新建这类表单的时候,在这个字段上耗费一两秒来进行选择。但是如果这种表单的数量非常多,比如有几百份,那么这个修改成本就非常之高昂了。这就是为何要为一些字段设计默认值。

  3、预填写相关字段

  许多记录的相关页面会根据“发布者”来执行一些预制的操作,比如创建新的任务和事件(我们在淘宝下单的时候,系统会帮你填写预制的默认收件地址、收件人和联系电话,这种机制与之类似)。那么我们看看下面的页面:


  发布者登录之后触发的操作


  系统会自动填写发布者信息

  在理想的状态下,用户会认真填写每一个字段的详细信息,然而事实上用户并没有这么做。

  在这个案例中,这个Lead 表单是关于一个名叫Walter Junior的人,并且这是执行一次调用之后显示的界面。这个用户相关的信息包含了四个字段,而其中“姓名”和“项目”两个字段都被预先填写,由于这是一个调用信息的界面,所以项目中默认填写的是“Call”,而相关用户的名字也无需填写,直接填写进去了。

  在理想的状态下,用户会“勤勉”地填写所有字段,并且详细地描述每一个细节和相关的信息。然而实际上,人是有惰性的,操作者总会详尽办法偷懒。每一个新增加的字段,都是用户完成表单的巨大屏障。为了解决这个问题,我们作出了一个妥协方案:系统预先填充一些相关的关键内容。当用户填写的表单涵盖这些预制信息的时候,系统会帮用户填写预制的信息,这样一来,这个有四个字段的表单中,用户需要填写的仅仅只有2个字段(请继续脑补淘宝下单的时候,自动添加收件人信息的机制)。

  4、让表单拥有更好的可访问性

  在设计新的Lightning Experience 的时候,我们对于它的可访问性设计就有一个基本的构想。由于键盘输入还是目前我们用户的主要输入方式(考虑到我们这是一个企业级软件),所以一定要对键盘有良好的兼容和适配,必须确保用户仅用键盘就可以执行全部的操作。为此,我们为每个表单组件建立了特定的键盘交互模式,而且这些模式的构建是遵循W3C的规则来设计的,这也确保了这套交互的准确和广泛的适配性。


  这是一个日期选择器组件,旁边是W3C中推荐的设计模式

  然而上述的全部规则并不是刚好合适的,真正的重度用户倾向于更高频度地使用键盘,而他们也会从真正高度一致的键盘输入体验中收益。如何评判整套键盘交互的易用和可靠性呢?一个真正为核心用户设计的日期选择器可以让他们完成全部的日期选取、必要的编辑,而双手无需离开键盘。

  结语:更多的问题

  对于Salesforce的UX团队而言,Lightning Experience 是一个里程碑,不过要做的事情还有很多。比如我们需要提升输入体验,引入行内编辑功能。

  不管你在团队中处于什么样的地位,是设计界面还是编写代码,无论是要设计复选框还是要制作更为复杂的CRM程序,表单的设计至关重要。在许多情形下,用户需要同这些表单进行长时间、大范围的交互和操作,任何效率上的提升都会带来体验的极大优化。请务必记住,精心设计的界面不止是要保证形式上的漂亮,方便和高效的设计也是造福用户的重要手段。

时间: 2024-08-19 01:32:42

帮你提升表单使用效率的四个界面设计技巧的相关文章

移动应用表单设计秘籍:提升表单设计的体验

文章描述:本文将从清晰的视觉纵线.信息的分组.极致的减法.利用选择代替输入.标签及文字的排布方式.依靠明文确认密码.合理的键盘利用.校验的小秘密这八个维度来分享我的移动应用表单设计秘籍. 一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到没有时间打理博客.最近体验产品的时候,经常看到错误的的表单设计,要么信息混乱,要么步骤繁复.要么语言程序化,要么视觉焦点跳跃,要么校验顺序混乱,要么反馈不及时,如此种种的问题,让我很想认真的总结一下,思考一下,为移动应用的表单设计,提供一些个人力所

BootStrap智能表单实战系列(四)表单布局介绍_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一.二列占3格

服务器-表单无法提交像dos界面的那样

问题描述 表单无法提交像dos界面的那样 ![ 解决方案 处理Html表单应该用server(比如apcache或iis或ngix)+cgi(asp/php等), 要用原始tcp socket的话,必须自己实现一个http server(也就是实现apcahe/nigix的逻辑,当然可以实现的很简单) 解决方案二: 问题都描述不清楚,叫人怎么答? 网页的form是用http协议提交数据,也就是TCP协议,你这serversocker是什么? 理论上 你在本机开一个tcp端口,然后用网页提交过去是

js模拟点击以提交表单为例兼容主流浏览器_javascript技巧

在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单.上代码吧. Html: 复制代码 代码如下: <h3>请单击"提交",测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#" method="ge

jQuery 表单验证扩展(四)

周末写的 jQuery 表单验证扩展(三)  这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,同时也是巩固自己所学的东西!如果文章中存在问题,请大家多多斧正!本篇文章介绍jQuery 表单验证扩展中的控件值的比较 文章回顾: jQuery 表单验证扩展(三) jQuery 表单验证扩展(二) jQuery 表单验证扩展(一)     (一). 存在的问题 这篇文章和第一篇中提到的控件值之间的比较没有多大的区别,唯一更近的就是在样式的处理.同时

防止用户将表单重复提交四种方法(实例教程)

表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 禁掉提交按钮. 表单提交后使用Javascript使提交按钮disable.这种方法防止心急的用户多次点击按钮.但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了. 例  代码如下 复制代码 <script type

以登录/注册表单为例的用户体验设计

文章描述:在移动端产品设计上,一个应用是否足够友好不仅仅取决与其自身的功能对用户是否足够友好,而也应该考虑这个应用对其他应用是否友好,当用户在调用这个应用去完成其他应用的时候他们是否会发生冲突. 在移动端产品设计上,一个应用是否足够友好不仅仅取决与其自身的功能对用户是否足够友好,而也应该考虑这个应用对其他应用是否友好,当用户在调用这个应用去完成其他应用的时候他们是否会发生冲突 只是说一个在手机端小的交互细节而已. 在Web端做表单设计设计师考虑更多的事情是表单的布局方式.表单的提示语言.表单的长

PHP入门教程之表单与验证实例详解_php技巧

本文实例讲述了PHP表单与验证.分享给大家供大家参考,具体如下: Demo1.php <?php ob_start(); //重新导向一个 URL //header() //header('Location:Demo2.php'); //上面这句话可以自动跳转到你所想要的页面. //header('Location:http://www.baidu.com'); //上面这句话自动跳转到百度上面去. echo 'baidu.com'; header('Location:http://www.ba

对于Form表单reset方法的新认识_javascript技巧

HTML中Form表单的reset方法被用来清空用户所输入的内容,以前一直误以为其是单纯的将input等输入项中的值清空. 但实际上不是这样的,reset方法的本质是将input等输入项中的内容还原为属性value中的值,而不是""空值. w3c上是这样说的: 在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建. 当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值.默认值由