注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

CQ点滴

 
 
 

日志

 
 

Web 表单设计   

2007-12-03 22:25:30|  分类: 用户体验 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

“输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”

Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。

表单布局

考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等),垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。

Web 表单设计  - CQ - CQ点滴

在这种布局中,推荐使用加粗的标签,这可以增加它们视觉比重,提高其显著性。如果不加粗的话,从用户的角度讲,标签和输入框的文字几乎就一样了。

如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分),左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了,而不会被输入框打断思路。但这样一来,标签与其对应的输入框之间的距离通常会被更长的标签拉长,可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

Web 表单设计  - CQ - CQ点滴

于是产生了一种替代的方案,标签右对齐布局,使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家,人们习惯于从左至右的书写,所以这种右对齐的布局就给用户造成了阅读障碍。

Web 表单设计  - CQ - CQ点滴

借助可视化元素

由于“标签左对齐布局”的优点(方便检索并且减少垂直高度),尝试纠正它的主要缺点(标签和输入框的分离)就很诱惑人。

一个方案 就是增加背景色和分割线,不同的背景色产生了一列垂直的标签和一列垂直的输入框,每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错,但是还是会存在问题。

对比之前的形态(用户主观的 视觉区分),这增加了15个视觉元素:中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线,让用户难以聚焦到一些重要的元素上,比如标签和输入框。 正如 Edward Tufte 指出的:“信息本身存在差异,必然产生感官上的不同。”换句话说,任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现,你的视线总是被打断,停下来想那些水平线、单元格和背景颜色。

Web 表单设计  - CQ - CQ点滴

当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色,都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。

Web 表单设计  - CQ - CQ点滴

主次操作

一个表单的主要操作(通常是“提交”或“保存”)需要一个比较强的视觉比重(在上面的例子里用了亮色调、粗字体、背景色等等)。这相当于给用户一个提示:您已/即将完成填写表单。

当一个表单有多个操作,比如“继续”和“返回”,那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

Web 表单设计  - CQ - CQ点滴

虽然以上内容可以更好的让你设计表单,但是组合布局、可视化元素以及内容,仍然需要经过用户的测试以及数据分析(完成度评估、错误报告等)。

LukeW 在他的 Web Application Form Design Expanded 一文中用到了两个图,用来说明如何合理区分表单逻辑区域以及主次操作。文章就不翻译了。看图更清楚。

Web 表单设计  - CQ - CQ点滴

Web 表单设计  - CQ - CQ点滴

优秀的表单设计会让用户有一种填写的冲动,并且能够最大限度的降低用户的出错率。

浏览网站时肯定遇到过这样的 Web 表单:一个包含 100 多个国家的下拉框(select);一个有 31 个选项的日期下拉框;等等,经常使人饱受挫折。Web 表单除去文本信息(比如 label 和其他提示等)和提交按钮,还包括五种元素:下拉框(select)、单选按钮(radio)、复选框(checkbox)、输入框(input)和超链接。

下面以旅馆订房为例,来描述表单设计过程中合理选择表单元素的过程。

例子

在本文的例子当中,想从用户那里得到以下数据:

  • 姓名
  • 人数
  • 旅馆名
  • 房间类型(单人、双人)
  • 信用卡类型

第一步:确定页面的主要目的

首先想想为什么要让用户去选择(使用 select)?是页面导航?还是收集信息?

作为导航的下拉框

使用下拉框来做导航、页面间的跳转可以节省很大一部分页面空间。并且在不改变视觉大小的情况下,增加信息量(选项的数量)。但是下拉框仍然是有不少局限的:

  • 下拉框隐藏了选项;除非是高级用户或者在非用不可的情况下,他才会展开下拉框阅读,然后作决定;
  • 超链接只需要点一下,而下拉框需要更多的操作;
  • 良好设计过的超链接列表,比下拉框更容易阅读;
  • 如果选项的数量巨大,用户必须拉动滚动条;

收集信息的下拉框

大部分情况下表单是被用来收集信息的。比如你向用户问一个问题,并且这个问题具有有限的答案(比如信用卡类型)。如何设计才能良好的呈现这些答案?并且减少用户的犯错几率?

第二步:解答 6 个问题

在选择用输入框还是下拉框之前,先解答以下 6 个问题:

1. 输入答案是否比选择答案更加自然?

个人信息,比如姓名、地址、生日等我们熟知的信息,使用输入的方式收集比使用选择的方式收集更加自然并且简单。对于姓名来说,也无法选择。本例中,姓名和人数就推荐使用输入框。

2. 答案是否容易输错?

容易输错的信息,就不能使用输入框来收集。比如本例中的旅馆名、房间类型,取而代之的可以使用超链接、单选按钮、复选框。

3. 用户是否需要浏览完所有的选项,才能理解问题?

比如本例中,“房间类型”这个问题,如果不先浏览所有选项,很难做出判断。在这种情况下,推荐根据情况使用单选按钮或复选框。

4. 有多少个选项?

滚动条是老大难问题了。如果下拉框的选项很多,很有可能导致页面需要滚动、下拉框选择也需要滚动。一般来说 4 个选项及 4 个以内选项的问题,使用单选按钮或复选框会比用下拉框好的多。

5. 用户是否可以同时选择多项?

一般如果用户可以同时选择多项,那么推荐使用复选框。为了避免用户不了解复选框或者不想另外说明,那么有时可以在单选按钮的基础上,增加一个“任意(any)”的选项。比如本例中的“房间类型”。

6. 各个选项是否看上去有区别?

比如“信用卡类型”,“Visa”、“MasterCard”等容易区分。但是对于“人数”来说,假设 01-10,总共两个字符长,使用下拉框不利于浏览(Scan)。而连锁旅馆通常有相似的名字,那么相似的部分可以使用缩写,并且用地名来区分。也可以使用超链接形式来避免此问题。

以上六个问题解决后,可以列出 一张表格(Link to flickr),然后平衡选择,决定哪些信息使用哪种形式表现。

第三步:表单的整体效果和局部调整

尽管按照上面 6 个方面进行了筛选,但是还需要针对表单整体和局部进行调整。主要是以下三方面:

避免太多种类的表单元素

根据第二步,我们得到了“最佳”的选择,如下:

  • 姓名:输入框
  • 人数:输入框
  • 旅馆名:超链接
  • 房间类型(单人、双人):带有“任意”选项的单选按钮
  • 信用卡类型:下拉框

发现问题了?形式太多了,又是输入框又是超链接的。这时候可以回过头再看看有没有合理的替代方案。

使选项精简、易读

对于下拉框的原则就是使用户浏览选项的时候更加方便,不会费眼神,不会点错。对于单选、复选的选项,减少选项的数量,同时也可以使用短句来作为选项。

注意选项的顺序和默认值

给选项赋予一个合理的逻辑顺序,比如按首字母排列、按声母序。然后根据普遍情况确定默认值。

第四步:考虑易用性(Accessibility)

Web 表单可供选择的元素有限,但是要做好也不容易。

-----------------------------------------------------------------------------------------------------------------------------------------
表单布局
-----------------------------------------------------------------------------------------------------------------------------------------

关于输入表单的三种常用布局,大家应该都比较熟悉了,

第一种是这样,称为右对齐/左对齐,左边的标签右对齐,右边的输入框左对齐(来自yahoo):

Web 表单设计  - CQ - CQ点滴

第二种是左对齐/左对齐,左边的标签左对齐,右边的输入框左对齐(来自Google):

Web 表单设计  - CQ - CQ点滴

另一种方式是标签在上,输入框在下(来自豆瓣):

Web 表单设计  - CQ - CQ点滴

(以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。)

这三种方式各有什么不同呢?

从视觉流来看,右对齐/左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。

左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。

 问题:

  1. 什么时候应该采用右左布局,什么时候应该采用左右布局?
  2. 为什么我说上下布局不适合输入框太多的情况?

西贝的回答:

  1. 右左布局:当输入框为多个并且类别相同,字段长短较一致时,建议采用右左布局;
  2. 左右布局:当输入框多,但类别不一致时采用;
  3. 上下布局:当输入框较少,但是引发的提示或帮助较多时,建议采用;不适合输入框多的情况,因为页  面占用较大,跨度较大;连贯性不强,但是易于区分;

  评论这张
 
阅读(1035)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017