5招让你的产品做到“别让用户思考”

王建文

北京易酷网络的产品策划，主要负责手游产品的设计和运营工作，提升游戏玩家的把玩体验。曾在奇虎360担任产品经理一年半，主要负责原360移动搜索（现改名“好搜”）的图片Onebox、知识图谱Onebox、世界杯Onebox和冰桶挑战Onebox等。

【精彩观点】

别让用户思考的设计，主要有5招：

1）将页面划分成明确定义的区域。

2）建立清晰的页面视觉层次。

3）尽量利用习惯用法。

4）明显标示可以点击的地方。

5）最大限度降低干扰。

不论在PC，还是在移动互联网时代，“别让用户思考”这个总原则对于Web设计工作都很适用。原因很简单，用户通常喜欢清晰易懂并且与自身相关或感兴趣的东西，所有与之背离的设计都是在考验用户的耐心，很可能导致用户转身离开。

这5招的价值具体表现在以下5个方面：

1）将页面划分为明确的区域，有助于用户在第一眼扫视之后，快速定位到所需的有用信息，轻松忽略掉不感兴趣的部分，大大节省了用户获取信息的时间。

2）建立清晰的页面视觉层次，有助于用户快速弄清楚当前页面信息之间的从属、主次或关联等轮廓。页面上所有的可视信息都可能吸引用户的注意，信息与信息之间可能存在主次、从属或相关的关系。那就需要对页面建立清楚的视觉层次，即突出重要的信息元素，逻辑上相关的部分在视觉上也相关，逻辑上包含的部分在视觉上嵌套。这样方能对页面内容进行组织并区分优先级，便于用户快速理解阅读。

3）尽量利用习惯用法，既能遵从用户的习惯便于用户理解，又能避免不必要的重复造轮子。

4）明确每个符号和每处文案的可读性和可点击性，有助于用户更进一步理解页面上的具体功能。相反，表意不清的文案或者不明确的链接，都将迫使用户思考某些通过下意识就可以知道的东西，这种完全是在浪费用户的耐心和好感，很难得到用户的青睐。

5）尽可能降低页面上的视觉噪声，也有助于用户对页面的理解，减少用户对干扰信息的思考和过滤。

【实践案例】

2013年研究生毕业后，因满怀对搜索的无限热情和对强者的无畏挑战，当时坚定不移地选择了360搜索。且不谈论现如今的移动搜索格局，当时的奇虎股价在360搜索的极速发展下被不断推向一个又一个高潮，直到2014年9月。正是在360搜索的这一年黄金成长时间，我在产品方面受益匪浅。Onebox是360搜索识别用户需求之后，通过整合优质的合作资源从而直接呈现给用户的优质结果，类似于“框计算”，并在短短一年时间就做到了百度阿拉丁6年的产品体验，甚至在知识图谱等方面做到更优。能在这样的精英团队负责图片、知识图谱、世界杯、冰桶挑战赛等Onebox，对于一个产品新人而言无疑弥足珍贵！

接下来，我就以曾负责过的冰桶挑战赛接力图Onebox为例，与大家分享“别让我思考”的原则对产品设计中各方面的指导。产品示例图如下，也可以通过手机360搜索“姚晨冰桶挑战”来查看。

背景：2014年夏天，“ALS冰桶挑战赛”在全美科技界大佬、职业运动员中风靡。同年8月，该挑战蔓延至中国互联网圈，一度成为最热的微博话题。

前提：首先得明确该Onebox需要满足的用户述求，即通过360搜索的大数据挖掘，为用户呈现其感兴趣的冰桶挑战者的前后接力关系，以及每个挑战者是否完成挑战，还可以了解其百科资料并观看其挑战视频等。既然是接力关系，用户势必会关心该挑战者点名的下一棒、下下棒，甚至下下下棒接力的挑战者。接下来，就需要在小小的手机屏幕上为用户清晰直观地呈现出以上信息。

1.将Onebox划分成各个明确的区域

由于整个冰桶挑战赛涉及较多的挑战者，关系图谱庞大，为便于在狭小的手机屏幕上直观展现并便于用户查看，可只展现以当前挑战者为中心的缩略接力图，上面是点名该挑战者的上一任挑战者，下面是该挑战者完成挑战后点名的3位挑战接力者。通过点击上面或下面的挑战者，即可自动切换成以新的选中挑战者为中心的上下接力图，如此循环。此外，还可为用户提供切换到其他热门挑战者的选项，但优先级相对低。

按照优先级，重点展现的内容区域包括：挑战者、接力关系、挑战者的状态和视频等相关信息；其次是不可或缺的标题区域，在该Onebox的最上方使用一行简单说明即可；再者为用户提供切换到其他热门挑战者的选项，满足用户获取其他挑战链条的好奇心，为挑战者切换区域；最后是分享区域，主要满足部分用户分享到各个社交网络的需求。

2.从整体上建立清晰的视觉层次

1）标题区域，用于整体说明，放置在最上方无可厚非。

2）内容区域是重点信息，自然需要占据主要空间突出展现。

①所有挑战者：由于需要凸显并引导用户点击，因此均以圆形头像来表征，这对用户具有很明确的点击暗示效果，再在头像底部以浮层显示其姓名，让用户一眼就知道该挑战者是谁。另外，由于以当前挑战者为中心，因此在视觉上应适当突出展现，例如头像适当放大，并加光圈显示效果。

②接力关系：这一步需要在有限的空间内，让用户清楚挑战者之间的关联关系。这里涉及两个问题：一是如何呈现所有的挑战者头像；二是如何明确表达出挑战者之间的关系，让用户“秒懂”。根据书中提到的用户习惯用法，我尝试仿照家谱关系图的表征方式，采用用户易懂的树状结构，通过向下箭头连接，表征从上往下传递的效果。但这还不够，仅仅只是箭头，用户第一眼仍容易对头像之间的关系产生疑问。于是通过在箭头边加上“点名挑战”的文案说明，在有限的空间内，即可清楚地向用户传达上下挑战者之间的接力关系，减少用户不必要的思考。

③挑战者的状态和视频：由于从属于挑战者，因此可放置在挑战者的两边，正好与之紧密相关。

3）挑战者切换区域：非主需求，做一行展现即可，以免过强展现对内容区域造成干扰。为增强与内容区域之间的关联，可将该区域展现在标题区域和内容区域之间，内容区域与挑战者切换区域之间也可建立从属关系。

4）分享区域：优先级最低，放置在该Onebox底部即可。

3.尽量利用习惯用法

在上面内容区域的接力关系设计中，对树状结构的模仿就是沿用用户对树状结构家谱关系的了解习惯，更有助于用户的理解。

4.明显标示可以点击的地方以及文案的说明

1）挑战者切换区域：切换到某个挑战者时，需要做差异化显示，例如做颜色上的差异，以便用户感知到被选中，从而暗示其他词也可点击。

2）内容区域：挑战者头像和百科视频，均以圆圈形式展现，正是为了能让用户明确的感知到可点击，同时也方便用户点击。

最终从上线后的数据来看，该Onebox的效果非常好，用户确实更多会点击挑战者头像和视频，以及挑战者的切换，这进一步验证了我们对用户的引导成功。

【总结分析】

“别让我思考”是一句很实用的指导性原则，不仅仅适用于PC端或移动端的Web设计，对于通常的产品设计也同样适用。生活中，产品体验无处不在。

一般路边的垃圾桶，分为可回收和不可回收两部分。初衷挺好，但仔细想想，普通人扔垃圾前也怪难受的，还得想半天手中的垃圾到底算不算可回收，可能最终还是将废纸扔进了不可回收的桶里。

为什么交通灯会是红绿黄的设计？一方面是因为光学原理，另一方面人们也习惯于以红色代表危险，绿色代表安全。红色最易表达热或剧烈，而绿色则略显平静和舒心。

有些商场的电梯在外面甚至没有显示屏，焦急等待的人们压根不知道到哪层了，也并不知道是否已满员。这也是没有明确传达用户应有的信息。

总之做任何事，都需要从用户利益出发，免除用户不必要的思考，方能获得用户的青睐。