写点什么

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

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

评论

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

FTP VS镭速传输,小文件传输技术内有乾坤

镭速

GreptimeDB v0.1 发布|原生支持 Python, PromQL 和对象存储

Greptime 格睿科技

云原生 时序数据库 PromQL

天池 DeepRec CTR 模型性能优化大赛 - 夺冠技术分享

阿里云大数据AI技术

人工智能 深度学习

JavaScript 对象管家 Proxy

devpoint

JavaScript Proxy ECMAScript 6

Jasper狂飙:AIGC现象级应用的增长秘笈

OneFlow

人工智能 深度学习 ChatGPT

Axure9和Axure10哪款好?有什么区别呢?

Rose

原型设计 Axure RP

mac office 365 商业专业版附升级工具

Rose

Office 365

【活动报名】数据存储降本增效应用实践 PolarDB × ScaleFlux 线下 Meetup 来袭!(杭州站)

阿里云数据库开源

数据库 postgresql 阿里云 开源 polarDB

「金三银四」这些面试题,看看你会答几道?

王中阳Go

Go 后端 面试题 简历优化 就业辅导

IoT物联网平台-规则引擎SQL数据格式详解——设备管理运维类

阿里云AIoT

sql 物联网 数据格式

2023年深圳.NET线下技术沙龙要开始了!名额有限,报名从速

MASA技术团队

.net MASA

React Hooks源码深度解析

京东科技开发者

函数 React Hooks 企业号 3 月 PK 榜

还在curd吗?封装属于自己的Spring-Boot-Starter

Java spring Spring Boot Starter

如何从5万设备中找出频繁掉线设备,长期不在线的设备?——设备管理运维类

阿里云AIoT

15 英寸 MacBook Air 和黄色 iPhone 14 在路上吗?

Rose

apple

龙蜥白皮书精选:面向 DPU 场景的软硬协同协议栈

OpenAnolis小助手

开源 云原生 内核 SMC协议栈 TCP应用

开源工具系列5:DependencyCheck

HummerCloud

ArchKeeper(开篇):架构守护平台的问题与理念

京东科技开发者

架构 敏捷 系统架构 腐化治理 企业号 3 月 PK 榜

共建区块链生态,旺链科技获颁2022年度FISCO BCOS产业应用合作伙伴

旺链科技

区块链 区块链+

企业全球化出海技术体系建设实录【专题合集】

阿里技术

技术专题合集 全球化技术能力

Matlab实现图像分割

timerring

图像分割

高效学 C++|组合类的构造函数

TiAmo

组合 C++

如何规避近年频发的数据安全事故?

Zilliz

云原生 云服务 数据安全

软件测试/测试开发 | Spring Boot 集成 Swagger

测试人

软件测试 springboot 测试发开

IoT物联网时代,如何优化你的网络- DNS域名解析服务——设备接入类

阿里云AIoT

缓存 网络协议 物联网 域名解析 调度

DAPP质押挖矿项目技术开发功能丨DeFI质押挖矿系统开发详细方案

I8O28578624

API Gateway vs Load Balancer:选择适合你的网络流量管理组件

API7.ai 技术团队

Cloud Kernel SIG月度动态:发布 ANCK 新版本及 Plugsched v1.2.0

OpenAnolis小助手

内核 龙蜥社区 sig anck CVE修复

贴合运维业务场景的告警聚合实现——以Zabbix为例

观纵科技

zabbix 运维监控 IT运维

详解数仓中sequence的应用场景及优化

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 3 月 PK 榜

如何基于 Skywalking 来快速搭建一套应用性能监控平台

观纵科技

APM 全链路监控 Skywalking

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