原著Web Form Design: Filling in the Blanks，作者Luke Wroblewski 。

——————————————————

小测验：输入框旁边的星号代表什么？

很多人会回答“星号代表必填问题，必须要回答”。很多人，但并非所有人。网络惯例（有机形成的事实标准）总会存在例外。事实上，有些网站使用星号代表非必填项，而不是代表必填项（图5.5）。

图5.5  http://www.flickr.com/photos/rosenfeldmedia/2367266030
和大多数人预料的不同，Hogan网站注册表单采用星号表示非必填项！

上述两例中，更重要的问题是何时表示必填项或非必填项（图5.6）。之前讨论内容组织时，我阐述过：应去除任何不需要回答的问题，人们可以更容易填完表单。也许你会说，永远不需要区分必填项和非必填项，对吗？

图5.6  http://www.flickr.com/photos/rosenfeldmedia/2367266066
输入框标签旁表示可选或必选项。

但许多表单收集信息的复杂程度并非那么简单。在线更新或者创建记录时，很多时候都有充分理由标明必填项。特别是网站表单有很多输入框，但只有一小部分是必填时，标明必填项非常有用。它能帮助人们判断出必填项。如果人们没有正确判断就填写，会出错。

相反，如果多数问题必填，少数问题非必填，标明非必填项就非常有用。如果输入框既不是全部非必填，也不是全部必填，标明不会特别有用。这些情况下，标明必填项或者非必填项，会给表单增加不必要信息，人们不得不停下来思考。

标明主要情况（大多必填项或非必填项）与少数情况（只有少数必填项或非必填项），会增加表单信息量。比较本节提到的Macy’s和Wal-Mart网站（图5.7和图5.8）。Macy’s采用大量视觉信息说明两个非必填框。Wal-Mart仅使用一个词说明只有一个非必填框。

图5.7  http://www.flickr.com/photos/rosenfeldmedia/2367266224
Macy’s网站表单除了中间名和其他接收人外，每个选项都必填，简单标明两个选填项会更清晰。

图5.8  http://www.flickr.com/photos/rosenfeldmedia/2366430295
Wal-Mart网站除了地址栏2可选外，每项都必填。可选项被非常明确标明，而没有标明所有必填项，减少了表单信息量。

Wal-Mart的例子还说明，直接标明非必填项或必填项会更好。标签后加上“optional”（可填）比用图片意思更清晰。总会有人不知道星号代表什么，而不得不看图例（图5.9）。图例当然需要！图5.10，Barnes & Noble’s网站，没有图例解释星号。

图5.9  http://www.flickr.com/photos/rosenfeldmedia/2366430463
Barnes & Noble’s网站，所有输入框都必填，而且都被标明了——为什么？

图5.10  http://www.flickr.com/photos/rosenfeldmedia/2367265092
重新设计后，Barnes & Noble’s保留星号标明每个输入框都是必填项，但去除了解释星号的文本。

有些人主张，网络表单应自始至终保持一致，用同样方式标明必填项，而不用考虑表单中是否有非必填项。这种做法对跨页表单有用，但网络表单各式各样，很难想像人们会记住某个特定网站表示一两个表单必填项的系统。

如果的确要使用视觉信息标明必填项，请仔细考虑表单中的标示位置。标签旁标示指引人们迅速浏览表格，判断出必填项（图5.11）。而标示和输入框对齐会导致浏览和判断发生困难，因为输入框形状、长度各不相同（图5.12）。

图5.11 & 5.12
图5.11：http://www.flickr.com/photos/rosenfeldmedia/2366429475
图5.12：http://www.flickr.com/photos/rosenfeldmedia/2366429295
试着浏览每张表单，看看哪些输入框必填。标示与输入框放在同一行而非与标签同一行时，很难迅速知道什么问题必填。