表单设计: 一页只做一件事(一)

阅读数:1 2019 年 12 月 30 日 18:03

表单设计:一页只做一件事(一)

[国外设计第 172 期]

2008 年的时候,我在Boots.com工作。他们想做一个单页的结账页面,运用那个年代最新潮的技术,包括手风琴组件、AJAX 和客户端验证。

每个步骤(寄送地址、寄送选项、信用卡详细信息)都收在一个手风琴面板中。而每个面板都通过 AJAX 提交。提交成功后,这个面板就会收起,并且通过滑动动画展开下一个面板。

看起来就像这样:
表单设计:一页只做一件事(一)

Boots 的单页结账页面,使用了手风琴面板展现每一个步骤。

用户千辛万苦才完成了下单过程。错误难以更正,因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地,客户要求我们作出改变。

我们进行了改版,让每个面板单独成为一个页面,也就不需要手风琴和 AJAX 了。不过,我们还是保留了客户端验证,防止不必要的服务器请求。

看起来就像这样:

表单设计:一页只做一件事(一)

Boots 的结账页面:每一步都是单独的一个页面。

这个版本的转化率好多了。虽然我不记得具体数字了,我知道客户比较满意。

6 年后(2014 年),我在Just Eat工作,发生了同样的事情。我们设计了一个单页结账流程,其中每个部分都有独立页面。这一次,我记下了相关数据。

结果是每年能增加 2 百万订单。要清楚,这是订单量,不是利润。这个数据是基于新版本至少一周后,结账转化率提升的比例得出的。这部分转化成了订单,数量激增 52 倍。

这是我们的移动端优先的设计:

表单设计:一页只做一件事(一)

Just Eat 的结账分为多个页面。我们还在设计中进一步简化了支付页面:用户先选择“现金支付”或“银行卡支付”,然后才会转到相关的页面。可惜我们并没有对这项优化进行测试。

两年后(2016 年),GDS 的 Robin Whittleton 告诉我,把每一步分为单独页面,是一种独立的设计模式,叫做“一页只做一件事”。除了它产生的数据效果,这种模式的背后还有充分的合理性,这部分我们很快就会讲到。

不过在这之前,我们来仔细看看这种模式到底是什么。

“一页只做一件事”到底是什么意思?

一页只做一件事,并不是一定要在一个页面上只展示单一的元素或组件(虽然也可以这么做)。比如说,很可能仍然会保留页头和页尾。

类似的,也不是说每个页面上只能有一个输入框(当然,这么做也是可以的)。

这种模式是指把复杂的流程分解成多个小碎片,把每个小碎片独立一页展示。

比如说,与其把地址输入表单放在寄送选项和支付表单页面,倒不如把地址输入放在一个专用页面。

地址输入表单有许多输入框,但它对于用户来说,实际上是个单一的、独立的问题。在专用页面里回答这个问题是有道理的。

我们看看这种模式到底好在哪里。

本文转载自 Think 体验设计公众号。

原文链接: https://mp.weixin.qq.com/s/7yIAqH7nFhPHMtfmi_VeaQ

评论

发布