单选框下方显示

另一种基于选择的即时解决方案与从各自的额外输入垂直分离初始选项相关。如图12.9，这种做法能保持所有初始选项和个人选择始终可见。

图 12.9
上：http://www.flickr.com/photos/rosenfeldmedia/2366438293
下：http://www.flickr.com/photos/rosenfeldmedia/2366438361
在基于选择的输入的下方显示方式将跟进问题显示在初始问题下方的一致位置。

通过强烈视觉指示说明初始选择和其额外输入之间的依赖关系，有助于更清晰传达两者关系。

不过，用户改变选择、屏幕更新显示额外输入会导致页面跳动，用户会迷失方向，尤其如果额外输入很长。

像垂直选项卡一样，此方案满意度也近乎完美，因为它显示的单选按钮和其基于选择的输入位置非常靠近。

然而事后看来，此方案并没有达到期望的样子。作为部分任务，我们要求参加者选择组中最后一个单选按钮Postal Service（邮政服务）。作为结果，额外输入直接显示在活动单选按钮下方。如果请求不同选项，此方案表现会更糟，因为所选单选按钮及其相关表单选项的视觉分离会给用户带来更多视觉不适。

我观察了其他测试，也存在这种情况。用户尝试选择初始单选框中一些不同选项，看不清哪个方案是活动状态，也看不清与其基于选择的输入关系。如果基于选择的选项数量大，这种现象更成问题，因为初始选择和额外选项之间的关系变得不太清晰。

垂直选项卡（Tab）

人们自上而下填写表单，水平选项卡缺乏清晰性，为弥补这点，可直接将垂直选项卡放在用户扫描线之内，图12.6。

图12.6
上：http://www.flickr.com/photos/rosenfeldmedia/2366438013
下：http://www.flickr.com/photos/rosenfeldmedia/2366438077
垂直选项卡方式的基于选择的输入将跟进问题显示在初始选择右侧。

就眼睛压力而言，垂直选项卡测试表现最佳。这种解决方案眼睛固定总时间最短，平均时长最短，固定次数最少。

像其他两个测试解决方案，垂直选项卡隐藏了无关表单控件，除非用户需要才出现。这个因素似乎对眼睛压力和参加者能够完成的速度非常关键。（相同三种解决方案平均完成时间最短。）

其他两个测试方案中，垂直选项卡也取得满意度近乎完美，可能因为三个解决方案显示的单选按钮和基于选择的输入彼此都很接近。这确保选定一个单选按钮后，眼睛不需要太多移动（图12.7），设计更有效率。

图12.7 http://www.flickr.com/photos/rosenfeldmedia/2366438237
垂直选项卡基于选择的输入方式中，眼球不必在初始选项和额外输入之间来回移动。Etre提供。

尽管好消息这么多，还是有参加者使用这个设计方案出现了错误，而且对垂直选项卡是否互斥感到混乱。有趣的是，参加者似乎较少混淆水平选项卡，而理论上水平选项卡更容易造成混乱，因为打破了桌面应用程序中水平选项卡并不互斥的惯例。垂直选项卡设计还包括每个选项卡上的单选按钮，有助于传达互斥含义。

因为这些理由，其他我见过的可用性测试中，垂直选项卡比水平选项卡表现优越。由于垂直选项卡在满意度、眼动指标和完成时间方面得分较高，我倾向于使用垂直选项卡，不使用水平选项卡。

第十二章 基于选择的输入

利用弹性输入框，用户可按照希望的方式回答问题；利用额外输入框，用户可以补充回答问题；而基于选择的输入是根据用户完成的初始问题要求用户继续回答，通常不需要加入其他页面。

听起来很繁琐，请参考Found Bin网站，图12.1。两个初始选项：新用户或再次访问者。根据用户回答，出现一系列问题。输入框取决于用户最初选择，因此称为基于选择的输入。

图 12.1
上：http://www.flickr.com/photos/rosenfeldmedia/2366436465
下：http://www.flickr.com/photos/rosenfeldmedia/2367272584
Found Bin网站采用简单的基于选择的输入框，用户选择初始问题后显示接下来的问题。

初始选择之后的输入量取决于所提问题。Found Bin网站只有几个输入框变化。图12.2，eBay网站下载请求表单中，许多问题都取决于初始选择。

图 12.2
上：http://www.flickr.com/photos/rosenfeldmedia/2367272730
下：http://www.flickr.com/photos/rosenfeldmedia/2367272832
eBay网站下载请求表单采用了基于选择的输入方式，根据初始选择显示一系列跟进问题。

如果卖家在物品和记录下拉列表中选择Sold（售出），表单会显示额外输入框，可选择日期范围。如果选择不同选项，表格会出现一套不同额外选项。

值得指出的是，大多数情况下，填写额外输入框之后，用户才可以提交基于选择的输入表单。换而言之，基于选择的输入引入了表单额外要求。

eBay和Found Bin网站都采用了基于选择的输入，但两者表现方式不同。Found Bin采用垂直单选按钮，显示初始选项，然后根据选择，在右侧显示相关输入。创建下载申请表单（Create Download Request Form），eBay网站采用下拉菜单显示初始选项，然后根据选择直接在下方显示相关输入。

基于选择的输入似乎属于用户界面设计基本问题，但网上有多种解决方案，说明问题比估计的要复杂得多。事实上，每种基于选择的输入解决方案优缺点都很明显。为了免去研究烦恼，我和总部设在伦敦的可用性公司Etre进行了一系列研究，测试了八种基于选择的输入不同解决方案。

本书之前提到过主、次动作，我们根据眼动和可用性指标测试了23人。参加者随机获取一种设计（尽量减少熟悉带来的偏见），并被要求“全面准确填写”。测试方案以我曾经在线发布的列表为基础，所以并没有测试每一种解决方案。如果没有使用你最喜欢的方案，很抱歉！

页级选择
将过程明确分为两步，可能是解决表单基于选择的输入问题的最简单方法。通常采用两个单独网页（图12.3）。第一页，或称为过程第一步，向用户显示初始选项。用户选择其中一个，出现相关基于选择的输入，并取代用户初始选择。

图 12.3
上：http://www.flickr.com/photos/rosenfeldmedia/2366436649
下：http://www.flickr.com/photos/rosenfeldmedia/2367272932
网页级别的基于选择的输入将跟进问题显示在独立于初始选择的另外网页。

对多数用户而言，初始选择和相关输入之间关系明确，而一旦做出初始选择，两步模式就会去除宝贵情境（再也看无法访问没有被选择的选项）。这种解决方案比不需要在网页之间移动的即时解决方案速度也慢。

测试中，网页级别选择表现平均，达到平均满意度分数，错误数目较少，眼动参数表现较好，如眼睛固定次数、固定总时间、以及平均固定时间。不过，该解决方案在所有测试方案中完成时间第二长。因此，如果寻找表现平均的安全解决方案，而且不需要关注快速完成时间，网页级别的基于选择的输入会是好办法。

* 额外输入可以提供更多选项或高级选项，满足有需要的用户，不阻碍不需要的用户。

* 应根据优先客户需要，图示额外输入。主要用例应总是直接出现而且可见；次要用例点击鼠标即可见。

* 如果允许用户激活额外输入，额外输入会更受欢迎。

* 确保触发额外选项的操作措辞明确。如果额外选项自动触发，应提供线索预设期望（图标，文字）。

* 对于单一表单，应保持额外输入方式一致。

* 如果需要显示大量额外输入，考虑采用层（叠加）方式代替即时显示方式，避免网页跳跃及用户迷失方向。

* 确保层（叠加）不会覆盖帮助人们填写的输入框，确保人们仍然可以自行填写。

* 如果额外选项需要单独考虑，应使用模态叠加。

* 确保提供用户明确办法关闭或取消模式叠层并返回表单。

* 返回表单时，应显示在叠层中所做的选项。

* 如果引导客户是主要目标，额外输入是引导客户进行选择的迷人方式。

视角：Jack Moffett
互动设计师，Inmedius公司
兼职教授，西弗吉尼亚大学
爆炸物处理（EOD）案例研究

表单设计不是每天都用来解决生死攸关的情况。如果“死亡人数”是输入框标签，可以肯定，每项设计决定都很重要。

美军爆炸物处理（EOD）部队花了很多努力收集和分析事故数据。通过分析炸弹组件，事故地点，敌方战术和任务表现，他们可以改善自己的战术和程序，更好培训战士。数据收集采用爆炸物处理事故报告，报告包含大量表单，覆盖任务各个阶段。

EOD部队通常从当地执法部门收到威胁电话。接电话人员必须向来电者提问，以获得必要信息。采访必须要彻底、迅速，以确保任务形成，部队出发。原始事故问卷（IIQ）内容包括联系信息，威胁种类，爆炸装置信息。

威胁位置信息特别复杂。有四种不同格式报告或输入位置信息。美国境内的任务，最有可能采用街道地址。作战情况中任务安排包括军事网格参考系统（MGRS）格式的位置。战士习惯采用十进制纬度和经度坐标和度数/分/秒。无论以何种格式报告或输入位置信息，最终报告必须采用MGRS。包括所有这些方法直接在表单直接包含所有这些方法会导致表单复杂、混乱、屏幕过长而不得不滚屏。为了保持表单尽可能清晰，位置输入选项被移入对话框，点击IIQ上的一个按钮可访问该对话框。

位置对话框包含每种位置输入方法选项卡（Tab）。在某个选项卡输入的数据会转换或复制到其它选项卡。例如，如果输入位置的纬经度坐标值，然后切换到MGRS选项卡，坐标将转换为MGRS值。地址选项卡提供查询功能，类似绘图应用工具，例如Google Maps，利用geocoder能得到坐标值。地址信息可从任意选项卡输入，因为它可能是MGRS坐标值。输入的位置数据将被保存，对话框关闭。MGRS值和任何输入的地址信息或标记都将显示在IIQ上，同时不可编辑。

坐标输入本身就是重大问题。EOD事故报告全部采用位置对话框，只要有位置需要记录就出现对话框。战士输入位置信息时，不会总坐桌子旁，可能会使用带触摸屏的平板电脑。为方便手指或触摸笔输入，输入框应配上图标，弹出特定小键盘。例如，纬/经度选项卡，点击经/纬度输入框旁的图标，打开经/纬度小键盘。单选按钮允许选择东经或西经（或北纬和南纬）。小键盘上的输入框，和对话框中的输入框一样，根据所选格式，接受十进制格式值或度、分、秒值。只接受有效值。按钮足够大，一根手指就能操作。还可以接受键盘输入，但观察战士表明，他们喜欢采用键盘输入数值，即使在坐着的情况下，也使用物理键盘。

IIQ的设计减少了队伍接受任务花费时间花费，同时还改善了数据有效输入。利用小键盘，很容易进行手指输入数据，同时输入时验证数据。利用对话框，简化阅读，节省了空间，并保持表单可读，同时提供了多数输入方法。该表单消除错误，节省时间，挽救生命。

http://www.flickr.com/photos/rosenfeldmedia/2405623743