IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

上海航空网站注册表单优化方案

2010-10-10 08:35:25 累计浏览 3,210 次
本机暂存

    上午手忙脚乱的定月底到杭州的机票,通过“去哪儿”入口进入到了上海航空网站,居然必须登录后才能预订(绝大多数购票网站游客也可以定)。看在几百块钱的面子上,那就注册吧。

    注册表单我一看就乐了,简直就是几天前与用户交互的核心文中观点的真实写照,问题非常典型。看起来就很不好,用起来更是很不便。虽然没有给我造成很大的障碍,但肯定耽搁了不少时间,一点都不轻松愉快。先看如下截图:

    上海航空注册表单截图

    这是一道很好的练习题,请先自己思考。问题应该分优先级,我直接把我做改进的观点先列出来,分为“可访问性”和“可用性”两部分,先是可访问性问题列表:

  1. 改成单列布局(引导视线);
  2. 分两块区分“帐户信息”和“机票信息”两类字段(区分内容属性);
  3. 各表单控件根据属性定制宽度并分组(“暗示提供了组织答案的有用线索”);
  4. 红色的必填星号提示应该提前而不是置后(让用户优先看到);
  5. 下拉选项文字不应该淡色降级呈现(至少不要比字段名的颜色浅);
  6. “密码”字段两字中间空格去掉(无需刻意对齐上边的“用户名”);
  7. “性别”字段改用单选控件无默认值(下拉列表默认“男”也是错误的);
  8. “出生日期”字段做成点击选择,并右侧日历icon提示(差异化引导);
  9. “联系地址”字段控件应该使用textarea而不是input(文本区域用来写文字段落);
  10. “国家”和“城市”字段使用下拉选项,联动并在表现上合并(属性一样);
  11. “证件类型”和“证件号码”字段在表现上合并(属性一样);
  12. “联系号码”和“手机号码”字段改成“座机号码”和“手机号码”(表述的含义应该平级);
  13. “邮编”字段放“联系地址”之下(地址比邮编更重要);
  14. “注册”按钮放“重置”左侧(优先看到和使用);

    注意,以上仅仅是可访问性问题,因为我还没有使用表单。可用性问题是使用表单之后发现的,我只做了个简单测试,不完全的测试结果列表如下:

  1. 点击“检测是否有相同的用户名”后,不能使用是警告窗口告知,能使用则“√”提示。第一应该统一提示效果,第二能使用用绿色字符,不能使用用红色字符。
  2. “密码”字段录入完之后tab进入了“真实姓名”,“证件类型”字段选择后之后tab进入了“出生日期”,都应该用tabindex来做索引。当然,如果单列布局不会有这些问题。
  3. 所有错误提示都不应该用警告窗口,最好在各字段之后明确提示。

    也许有人会说,这么较真干嘛,你不也顺利订购成功了么,我能成功不代表所有人都成功。在专业角度,作为测试版我没意见,“完成任务”的目标是实现了。但是设计质量呢,这样的作品只能算不及格(此例子设计只做到了两点,第一辅助说明文字降级呈现,第二区分主次操作按钮)。

    正好用这个例子就事论事的讨论下单双列布局问题,最常见的双列布局优势理由是“可以节省空间,缩短版面”。理论上如此而已,但双列布局会带来很多无法规避的麻烦,而且事实上表单只要足够明确和清晰,长一点对用户来说关系不大。节省版面也有设计技巧可用,其一减少不必要的字段,其二合并同属性或有关联的字段(如证件类型、证件号码),其三隐藏优先级低的字段(如手机号码、座机号码)。

    最后,还是看着几百块钱的面子上,花时间写完这篇具有可操作性的优化方案。网络上机票价格变化很快,因为下单流程不畅而影响没有抢到特价票的事情,我经历过两次。希望所有航空网站的工程师改进网站,造福更多网络上的旅客,也为公司创造价值。

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 120个优秀的水平导航设计 (累计阅读 75,626)
  2. 流程管理与用户研究 (累计阅读 17,053)
  3. 我的 Sublime Text 2 笔记 (累计阅读 16,729)
  4. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
  5. 看看各个网站的404错误处理 (累计阅读 10,208)
  6. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,198)
  7. 视觉注意力―解剖设计的根源 (累计阅读 6,970)
  8. 给想转行做产品经理的同学 (累计阅读 6,927)
  9. 可用性测试好助手——Morae软件的应用 (累计阅读 6,780)
  10. 在大公司和小公司做产品的区别 (累计阅读 6,075)