中国卓越技术团队访谈录读者调查,2022年采访嘉宾由你决定! 了解详情
写点什么

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

  • 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:03222

评论

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

Golang 泛型浅析

D

开源 云原生 编译器 语言 Go 语言

GitHub已封杀!阿里内部金三银四Java面试题被泄露!

Crud的程序员

Java 架构 Java工程师

2021阿里面试通关手册必备:5000字面经解析(技术/攻克)

比伯

Java 架构 面试 程序人生 计算机

访问控制相关概念及常见模型

龙归科技

身份和访问管理

区块链电子合同--赋能企业数字化转型

13530558032

区块链的创新技术给奢侈品行业带来了新的机会

CECBC

奢侈品

Rust:范型使用trait限定的一点总结

Microwood

rust Trait 范型 范型约束Output Add

从0开始的支付业务架构演进之路

誰敢得罪我

I'm Back

小天同学

思考 个人感悟 4月日更

Java高级研发:2021阿里天猫、中间件、蚂蚁金服JD要求+面题答案

钟奕礼

Java 编程 程序员 架构 面试

美团点评高级1234面:算法+HashMap+Zookeeper+线程+Redis+kafka

钟奕礼

Java 编程 程序员 架构 面试

1.4 Go语言从入门到精通:Go代理goproxy

xcbeyond

Go 语言 4月日更 goproxy

Redis为什么变慢了?一文讲透如何排查Redis性能问题 | 万字长文

Java redis 程序员 架构 计算机

百家号在线视频编辑器的技术演进

百度Geek说

大前端

WebRtc学习之旅 —— 初认识

小驰嘻嘻

勇做全球区块链“分布式存储”领航

CECBC

分布式

2021年金三银四全新版互联网大厂面试题,分类80份PDF,累计4700页

Java 编程 程序员 架构 面试

WebRtc学习之旅 —— Android端应用开发

小驰嘻嘻

新动能 · 新机遇:SaaS软件提供商 Zoho 25 周年战略再升级

科创人

莫高窟永不褪色的微笑,照耀在华为未曾止步的数据保护征程

脑极体

探索js让你的网页“自己开口说话”

云小梦

JavaScript 音视频 audioContext API

专科出身,2年进入苏宁,5年跳槽阿里,论我是怎么快速晋升的?

钟奕礼

Java 编程 程序员 架构 面试

朱嘉明:《量子时代和数字经济2.0 》推荐序

CECBC

数字经济

架构培训作业

肖春

架构师训练营

源中瑞智慧平安社区--为平安生活助力

13530558032

零基础学Tableau系列 | 01—Tableau简介、条形图与直方图

不温卜火

数据可视化 数据清洗 4月日更

拥抱云原生,基于eBPF技术实现Serverless节点访问K8S Service

UCloud技术

容器 云原生 k8s serverles

可能是最糟糕的愚人节玩笑:科技史上的美式疯狂

脑极体

智能取色-为多元化的产品场景选择完美的色彩组合

百度贴吧技术团队

智能取色 个性化 视觉策略 沉浸感

gorm源码阅读之schema

werben

Go 语言 gorm

历史命令被黑客删除?教你实时备份

运维研习社

Linux 4月日更 服务器安全

撑起瞬时千亿交易额的云数据库是怎么炼成的?

撑起瞬时千亿交易额的云数据库是怎么炼成的?

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