行业关键字
UI设计UI理论和资料 → 正文
互联网表单设计 第五章 输入框(2)
作者: yummy 译 来源: 视觉同盟 时间: 2009年6月11日

视角:Bob Baxley
作者:Making the Web Work: Designing Effective Web Applications
选择表单元素

决定最合适的输入框,这是优秀表单设计最具挑战性的问题之一。总是有多种方式来表现特定交互行为或请求特定形式数据,表单设计师会面临多种形式选择,从而强烈影响用户体验。

为了评估设计方案范围,设计团队需要完全了解每种形式的相对优点和独到特点。设计团队应努力平衡有效点击率和出错率、学习能力和效率、普遍情况和个别情况,及弹性和明确性,这是典型情况。平衡最终取决于设计团队的判断,对特定受众和使用模型的优化。

数量及类型规格是售票网站的常见问题,提供了有效设计挑战的例子。从建立受众及用法参数开始:(1)只有3种票——成人票,儿童票和老人票;(2)购票主体是小团体,一般不多于6人;(3)少数例外情况外,访问者一个月不到一次从网站购票。

这些参数可清晰总结为如下问题:新使用者从表单3种分类任意选择一种,每种最多6张票。表单很少用,应认为所有受众都是新手,设计应在易学、明显和防止出错方面进行优化。

问题有3个基本解决方案,每个方案采用不同输入控制:文本框,下拉菜单和单选框。

Fandango.com网站设计师选择了基本文本框的解决方案,这种做法明显、直观,但也出现了意想不到的问题。

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

很多使用者不知道能用Tab键切换输入框,如何引导使用者在鼠标和键盘之间切换成了问题。结果,大量访问者为了完成交互行为必须在鼠标和键盘之间来回切换。

无法防止输入错误,这个问题不太明显但比较麻烦。如果使用者输入字母或者非整数,网站会弹出JavaScript报错提示窗,这种干扰对系统操作不幸且不必要。

文本框解决方案在明显和清晰方面优势明显,但在效率和预防错误方面缺点也同样明显。


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

MovieTickets.com网站采用下拉菜单解决方案。该方案同样明确,但并非没有问题。

这种解决方案更加积极防止错误,在问题出现之前进行阻止,但它采用下拉菜单,而下拉菜单是目前最复杂的输入控制。下拉菜单在布局控制、视觉效果方面是有效机制,可惜下拉菜单很难使用,容易且经常被忽视。

同文本框解决方案一样,该方案牺牲了可用性和明确性来阻止错误发生。

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

第三种解决方案,使用单选框收集用户需要的票数量。它跟文本框一样明显,跟下拉菜单一样防止错误发生。

但它同样需要相当多的输入控制,如果每组数量限制在4张票以内,需要12个元素。虽然能用简单图标展现单选框,但是12个模糊界面元素的负担有些过重。

基本分析说明,数据收集问题即使看起来简单,也有多种方式解决,每种解决方式都集合了独特的优势和缺点。设计师的工作是探索和分析可能性,寻求满足受众和应用软件独特需求的最佳解决方案。

(责任编辑: echo

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2026 视觉同盟 visionUnion.com)
Copyright © 2004-2026 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版