当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 网页表单设计中的反馈提示

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 网页表单设计中的反馈提示


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 109 ::
收藏到网摘: n/a

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://lilong4174.blogbus.com/logs/39063960.html

反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响。在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果。它有很多种形式,包括界面元素、声音、影像变化和物理位移(如震动)等。

我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息,为了加强区分避免歧义,我们这里姑且称之为反馈提示(如图)。这里分几个方面对其设计中应注意的事项加以简要说明。

位置

页面上的反馈提示作为一种信息输出,最重要的属性要求就是迅速明确的被信息输入者所知晓,这也是对设计师来说最重要的设计原则。执行起来,可以参照两条具体标准:

1.当前页面:反馈提示应该放在操作发生地的附近。

根据心理学的注意力分配模型,不熟悉或十分关注的操作都会占据人脑相当多的注意力资源,若任务有延时反馈,则操作完成后注意力发生聚焦,投射在行为发生地附近,以关注产生的结果。简单点说就是,我在输入框中输入内容,若有任何问题,我希望反馈就在这个输入框旁边发生。这是再正常不过的交互与反馈了。

这条原则对于有同理心的设计师们可以说是共识,他们普遍争议的是另一个问题,反馈与表单元素的相对位置究竟该怎样安排才最合理?实战派的主张“左右”,理论派的则倡导“上下”… … 但其实这一点并不需要太纠结,一般来说,如果宽度足够或不希望表单过长(想在一屏内解决战斗)、过于跳跃的话,那么把反馈提示放在表单元素右侧是可行的,例如淘宝的注册页:

如果对象是有严格逻辑顺序(如纵向)的系列操作,那么反馈提示放在操作流向途中(对应的表单元素下面)则比较合理,并能达到更好的提示效果,例如淘宝的订单页:

所以,上下左右并不像想象中有那么大的关系,只要在发生地附近,用户都是可以注意到的,只是程度不同而已。倒是怎样清晰明确地表达反馈与对发生地之间的关联、不让用户产生迷惑显得更为关键,关于这一点,jQuery Validation 所提供的 Plugin Demo里给出了一个比较好的思路,设计师们可以考虑通过一些样式的改变来制造一些联系。

现在facebook采用的也正是这样的一种方式,它通过加粗的边线与箭头更强的表达这种关联性:

2.刷新页面:反馈提示应该放在用户最渴望看到它的地方或最容易注意到的地方。
网页的加载特性让我们的操作区域有可能会在页面刷新后消失于我们注意力的聚焦范围之内。新的页面中,紧张、“短暂失忆”的用户不一定会拖动滚动条来找刚才的操作区域(原来的聚焦范围也很快消失掉了),进而找到反馈结果。他们担心、茫然,渴望在新页面中一目了然地看到它。这个时候,把反馈提示放在新页面中的显著位置无疑是最佳选择,页面导航的下方和表单区域的上方都是不错的位置。

状态,样式:

关于状态和样式在这里不去做过多的探讨,注意两点:1.将状态分类(对/错/提/警等)并进行差异化设计是一个不错的办法,至少对你的中高级用户会有一定的好处;2.icon能起到明显的状态提示作用,但选用时需慎重,要明确,要友好,不要夸张。至于形式上到底需不需要有底色、带边框、配icon、长箭头等,对反馈来说并不必要,不需要很纠结,具体情况具体分析一下,只要能引起注意、表意快速明确并且不让用户产生迷惑,所有的样式都是值得尝试的。

文案:

虽然说最好的文案就是没有文案,但这只是个遥远的vision,现实中文案必不可少,交互设计师是应该注意一些的,它的好坏直接影响用户体验。

首先你需要一个文案模板以辅助设计和保证统一性,业内比较认同的是“[状态+解释]+(解决办法)”的文案结构,一般来说,按照这个套路来,大体上都能保证文案的完备和明确。下图中都是同形式同指意的反馈提示,百度说的就比YouTube要清楚。

除了明确、清楚之外,文案还需要尊重用户的扫读习惯和个人情感:比如,你想表达一个or的关系,用“或”会比用“或者”好些,因为“或”字会让两边的主体内容在扫读的情况下变得更容易识别;再比如,你面向的是注重风水和彩头的商人,也许“恭喜,只差一步…”就应该写成“恭喜,还有一步…”,因为你的用户们对负面的文字和语义会比其他人更加敏感… …

写文案比写文章困难,它需要更多细腻的心思和周全的考虑,在满足基本要求的同时还必须在狭小的发挥空间内体现出独特的产品气质,这是非常难能可贵的事情。如果你有精彩的案例,请跟我们分享吧!

出口:

出口,即上文中提到的解决办法,它可以是用户对当前反馈的非正常状态的解决途径,如图中的[?];也可以是一个交互阶段结束后,系统给用户的操作引导,如图中的文字链接。在某些情况下,这些出口是十分必要的,这就好像当你告诉用户此路不通时最好指给他一条能通的路,当用户走到一个丁字路口时,你最好能告诉他是该往左还是该往右。

需要提醒的是,这种出口切忌太多,阶段交互结束后,对于思路中断并且茫然的用户来说,太多选择甚至比不上没有选择(如下图)。按照用户心理需求和操作习惯排个序,最多放出两个,一主一次。

可以说有交互就会有反馈,反馈是交互设计中最前线最直接的一环,它的好坏直接影响产品体验。实际设计中,由于缺乏意识或项目时间紧张,设计师对这一块往往并不给以过多的关注,设计起来也比较仓促和盲目,这点需要特别纠正过来,在原型中期,就需要把表单元素的校验规则以及可能的反馈情况都设计好。这是一个良好的习惯。