AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2019-12-30
  • 本文字数:1048 字

    阅读完需:约 3 分钟

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

[国外设计第 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


2019-12-30 18:03639

评论

发布
暂无评论
发现更多内容

依赖Windows环境的CAD/CAE/CAM等软件如何在信创环境下过渡使用?

点量实时云渲染

信创 云桌面 云渲染 实时云渲染 国产信创

【论文速读】|针对模糊驱动生成的提示性模糊测试

云起无垠

SD-WAN实现全球应用加速

Ogcloud

SD-WAN 企业网络 SD-WAN组网 SD-WAN服务商 SDWAN

一键自动化博客发布工具,用过的人都说好(阿里云篇)

程序那些事

工具 程序那些事 自动发布

华为云开发者桌面全新发布CodeArts IDE for Python,极致优雅云原生开发体验

ide 软件开发 华为云

大模型和传统ai的区别

悦数图数据库

XSKY SDS 6.4 重磅更新:NFS 性能飙升 3 倍,对象多站点等 10 多项功能强势升级

XSKY星辰天合

对象存储 软件定义存储 XSKY 星辰天合

程序员必备的7大神器,效率飞起!

秃头小帅oi

智能商品计划系统:引领未来零售业的革新之路

第七在线

美国站群服务器租用攻略:选择稳定高效的多站点管理服务

一只扑棱蛾子

站群服务器

在 Postman 中设置和使用 Mock Server

Liam

程序员 前端 Postman Mock MockServer

IT外包能在企业上云时提供什么帮助?

Ogcloud

IT IT外包 IT外包公司 IT外包服务 IT外包服务商

@Async异步失效的9种场景

不在线第一只蜗牛

Java JVM 异步 开发语言

分布式数据库有哪几种

悦数图数据库

图数据库

Kafka 业务日志采集最佳实践

观测云

kafka 日志分析

低代码与云原生的技术解析:赋能企业数字化转型

不在线第一只蜗牛

云原生 低代码

浅析MySQL代价模型:告别盲目使用EXPLAIN,提前预知索引优化策略

京东零售技术

后端 MySQL、

京东按关键字搜索商品API(jd.item_search)返回值全面解析

技术冰糖葫芦

API 编排 API 文档 API 策略 pinduoduo API

表单设计:一页只做一件事(一)_语言 & 开发_Think体验设计_InfoQ精选文章