包含复杂信息的页面UX设计

最近做了一些复杂页面的优化重构工作，比如酒店预订+支付流程的重新设计，选择酒店和房型的流程设计，用户邮件模板的设计等，这类页面中包含许多繁杂的表单信息和数据展示，如何让布局更清晰、流程更简洁，减少用户提交过程中的困惑和痛苦，促进页面转化，帮助用户决策。在此记录一下思考的过程和成果。

原则

在阐述具体案例前先提炼出一些基本原则：

1.信息的架构是关键

IA(infomation architexture)帮助人们很容易的明白他们看到的是什么,并清楚为了实现目标我应该如何做。

因此，重构的第一步就应该梳理页面的信息架构，把属性相同的信息归纳整合，属性相似的信息放置在同一区域。

2.用网格系统布局减少无关信息干扰

将信息整理到一个统一的，有逻辑的grids里面会很大提升用户体验。使用合理的排版、区块划分和一致的对齐方式，会让页面清晰，也让用户更容易在其中找到需要的信息。

3.从用户的视角来考虑问题

一个数据设计的最佳实践就是，你的UI所表达的概念模型跟用户的实用时脑中的模型能够完全吻合。

在线上的体验、产品和服务通常都是某类一系列事件的交互，如果整个交互流程都与用户曾经遇到类似体验一致，他们会更容易接受。

4.用逐步展开的方法来管理复杂问题

将某种复杂流程设计为逐步展开可以使认知负担大量减少。

比如可以将非高频的操作隐藏在hover ，click，activated state之后，或者将原本在一页的大量表单划分为多个步骤，分步展示。

重要的是决定哪些操作是高频哪些是非高频，哪些信息可以被划分到一个区域或步骤。

实例

例1 酒店预定和支付

之前的预定全部都集中在一个页面，用户需要在这一个页面中填写大量信息，逻辑不清的堆砌表单会让用户失去耐心。

所以首先要做的是重新梳理信息结构，简单整理出目前很明显的体验问题：

pic1-AImindnode.png

这么多信息集中在一页显示，显然不合理，将新页面分为三步：

Screen Shot 2017-07-04 at 2.41.18 PM.png

房间信息包含的交互很多，比如增加房间，每增加一个房间，需要填相应的住客信息，住客还包含成人和儿童，如果儿童大于等于1，还会出现年龄等选项，所以单独做一个Part1填写房间信息；Part2是联系人信息，包含联系人和抵达时间；Part3不包含输入操作，只是让用户确认之前填写的信息无误以及展示酒店政策：如退款政策、儿童政策。提交订单后，选择支付方式和优惠券等。

优化后的结构如下：

flow

例2 用户邮件模板系统

当用户完成一些特定操作后（比如预定，支付，或者退款），需要给用户发邮件确认相关操作成功。

邮件流程图.png

通过整理用户操作流程，发现有四个时间点是需要触发邮件服务的：

• typeA：预定待支付
• typeB：完成支付
• typeC：临近出行
• typeD：申请退款

邮件的主要目的有三点：1.确认操作成功，呈现必要的信息。2.提供客服帮助入口。3.品牌营销和广告推广。所以邮件的共享模块包括「帮助中心」「品牌footer」。

而不同类型的邮件有不同的侧重点，比如typeA用户完成了预定，还未进行付款时，不仅需要展示预定信息，还需要优先呈现能促使用户完成付款的信息（用户评论之类）。又如typeC临近出行时，邮件需要提供一键保存订单详情的功能入口。

明确了四种类型的侧重，就可以明确每个模版的信息展示优先顺序。

以typeB邮件为例，需要包含以下信息：

typeB

typeB 邮件模版基本结构设计：

已支付邮件.png

以相同的思路，可以顺利的完成另外三种邮件模版。

以上。