登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>网页制作>>怎样设计网页>>机票搜素表单的校验
机票搜素表单的校验
来源:网页教学网 ‖ 作者: ‖ 点击: ‖ 时间:12-02-04 10:08:26 ‖ 【 】‖ 我要投稿

前一篇的校验思考中,我们整体概括了一些校验出现的类型,出现的情况,以及校验设计的设计原则与经验。而在具体设计过程中,需要结合产品的业务逻辑,旅游机票预订的全流程,是我碰到过交互逻辑中,相对比较复杂的情况,它的搜索来说也囊括了比较多的输入项,和各种类别的表单控件,因此它的校验情况也相对比较多样化。

我们来探讨下预订机票中的搜索表单

1、 提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。此类提示信息能够帮助用户在填写表单前,降低出错的可能性。

就拿机票来说,在未填写前,有很多网站做了暗提示来辅助用户更方便的操作输入。

国内的通常做法是提示你可以输入的格式,实例,如:

比如淘宝,就把地址选择的输入格式用暗提示的方式告诉用户可以输入汉字拼音和首字母,清晰明了。

又比如hipmunk,就把返程日期上显示暗提示告知用户如果不填写该选项就搜索单程结果集。

2、 在机票查询中最常碰到的项比如:航程类型,地址,日历。

a) 出错提示

出错提示的目的是要让用户清晰的知道错在哪一项,为什麽出错,怎么改。

出错提示有4个基本原则:即时反馈出错提示,出错提示的位置显示恰当并且明显突出,提示信息内容清晰易懂,一次性显示全部出错提示。

即时反馈出错提示

如下图所示:淘宝机票首页上输入出发城市和到达城市均为上海,会弹出新页面并且提示错误信息,对用户来说等待时间更长,相对来说这类提示信息显示在当页更为合理。

而去哪的机票搜索框,当出发城市和到达城市信息为空的情况下,或者当日历选择返程比去程早的时候,点击搜索之后没有任何反应。我们一开始以为是我们的浏览器出了问题,未加载到js特效,结果换了n多个浏览器,发现它就是没有反馈。

出错提示的位置恰当并且明显突出

提示出现的位置首先考虑到出错和当前填写信息位置的关联性。关联性包括出错提示位置和视觉呈现的效果(如:颜色,或者增加指向性箭头等)

如下图所示:Hipmunk在关联性上做的就尤为突出,错误信息的位置直接在填写项的下方,整个搜索区域一目了然的看出哪个项出错。

如下图所示:Travelocity在关联性上就相对较弱,其提示项在搜索框的上方,出错项与提示项有一定距离。显示屏幕如果较小的话,无法在一屏看到错误提示和填写项。

虽然Hipmunk的做法看起来比较清晰,但也有一定局限性。如果页面空间较为拥挤,就不能适用,因为这有可能造成信息密集,也有可能造成页面撑开而导致显示错误。

如下图所示:Expedia的做法相对合理些,因为其表单项是横向排放,因此使得错误提示和出错框的位置相对较近,比较清晰。

如下图所示:elong在报错提示的指向性中表现较弱,视觉上使用了较弱的提示框颜色,并且没有箭头指向。

出错提示的位置恰当还需要考虑它对其他信息的干扰较少。

如下图所示:Ctrip提示框的错误提示明显遮住了到达城市的填写项而下方的热门城市联想框也同时出现遮住了大部分的填写区域。这个做法严重的干扰了其他搜索项的填写。当然设计师的考虑角度可能是希望减少用户操作,当其出错的时候可以直接进行地址的选择和修改。

如下图所示:Kuxun在报错提示中,使用了alert弹框,虽然非常突出明显的强调了出错,但是强制用户进行确定的操作,导致用户无法进行其他项的操作。

提示信息内容清晰易懂

提示信息内容需要给到用户哪些方面的提示呢?错在哪,出了什么错,怎么改。

如下图所示:Qunar当地址选择相同出发和到达地时,会跳转页面显示提示,提示内容如下。业界对于这种的类型的提示信息有不同的看法,有人喜欢这种比较人性化生动的描述信息,但也有人喜欢更为简明扼要的提示。

|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:一个需要拐点的市场
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论