产品的病用户的痛：谈谈购物网站导航栏设计的“小心思”

2017-03-22 23:02:00

精心雕琢的产品总是让人爱不释手，有的放矢才能极尽完美。

产品的病用户的痛：谈谈购物网站导航栏设计的“小心思”
读了这篇文章，我希望能帮助你明白：

导航栏的一些设计方面的和很多心理学方面的“小心思”。
购物网站的“病”和用户的“痛”。
导航的设计与作用。
设计购物网站应该主要什么。
如何测试或评价一个网站导航的好坏？
我本人对购物网站的感触。

“双十一“、“双十二”、“女王节”……一个个购物网站的促销活动一夜之间变成了全民狂欢，“节日气氛”异常浓烈，和传统节日唯一的区别似乎就是放假了。“剁手”一族也在慢慢壮大，上到精英阶层，下到普通民众，“这几天你剁手了么？”成了很多人在购物街前后的口头的调侃。
购物网站像一个巨大的“黑洞”，你看不清、看不明，但它就是在无时无刻地吸引着你，将你拉入其中。
“剁手”时的购物体验酣畅淋漓，“剁手”后的懊悔心情也是五味杂陈。“为什么我买了一堆我不用的东西？”、“我明明不想买这件衣服的……”。身为“剁手一族”的我，同时更是走在产品路上的童鞋，我在想，为什么淘宝、天猫、京东能让我心甘情愿（或者说是莫名其妙）的把钱花出去的呢？我认真想了想，体会出了一丝味道，我从购物网站都有的“导航”设计来说一说吧。
以下内容是我把自己的使用感受以及原来读的一些书中的知识联系起来所谈的观点和心得，供产品的童鞋互相交流咯！

购物网站的“病”：

我在这些地方“剁过手”— 淘宝，天猫，京东，当当，YOHO！“鲜血淋漓”的剁手使用让我发现了很多购物网站的“病”：

首先，网站内容繁多。（真的太大了！）
其次，网站没有方向感。（真的太大了！）
最后，用户找不到自己的“当前位置”。（真的太大了！）

重要的事情说三遍，网站数据太大了。

那么，网站有这些天生的“疾病”，网站管理者作为“网站医生”是如何“开药方”的呢？

首先，链接点击会变色。这是针对网站内容繁多庞杂，链接众多的“病”的第一剂药。简单的设计带给我们的是一种已经访问了多少内容的直观感觉。
其次，给用户一个“GPS”。网站没有物理上的方向，只有扁平和层级，缺乏方向感，那就给用户一个GPS么，每个网站头部最明显的就是这个“GPS”— 标签，标签让我能去自己想去的地方（虽然不是准确无误精确到每一个物品）。
最后，建立“路标”。在购物网站这个巨大的“繁华城市”中，道路错综复杂，路标和指示牌作用不言而喻。那么，网站的路标长什么样子呢？它叫做“面包屑导航”（面包屑导航(BreadcrumbNavigation)这个概念来自童话故事”汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。）

网民还有一个很重要的“病”— 见困难就选择退缩。这也没什么奇怪，人类从远古进化到现在，可不是凭着蛮力，而是遇到困难懂得躲避的智慧。可是这个网站设计者也带来了问题，只要稍微在使用时遇到一点小困难、高门槛，用户就选择退缩，下意识放弃前进，即使这个门槛不高，迈过之后会更好。
这种“退缩”表现在购物网站上，就是我们在购物或者寻找某个商品时，我们浏览后再次来到时不知道上次的物品在哪儿，我就不想寻找了。所以的给网站降低门槛，简洁准确的导航把这个门槛降低了一点，但还是不够，用户缺乏迈进去的“勇气”以及支撑勇气的“熟悉”。这又得开一服药，药物是：
浏览历史，购物车，历史购买等界面。（网站说：我很熟悉你，你喜欢“XXX”，我能带你找到上次自己走过的路）。

购物用户的“痛”：

购物网站上的用户（我亲切的称呼为剁手党）范围很广，群体很多，从事职业各不相同，但是我们剁手党都有一些小特点：

用户在网站，更多的记住了“页面层级”，而不是物理上的“我在哪儿”（虽然我们想记住）。那种具体物理世界中的真实地址带来的“踏实感”消失了。取而代之的是网站的信息扁平化带给我们的“不踏实”。
购物网站里的用户是身处“网络版的寂静岭”，我知道这里有路，但不确定是不是安全，我迷路了。

那么，网站的“病”治好了，用户的“痛”怎么抚平呢？毕竟一切以用户需求为根本。

首先，网站的标配 —“书签”。“我要给这个地方做个记号”，“我要占领这块地区”。书签让我感觉网站在我手中紧握。
其次，浏览器的标配 —“后退按钮”。真实的人生多么希望有“后悔药”，但是时间过去了就是过去了。但是虚拟网络不是，“后退按钮”就是后悔药，我知道自己能回到“原来”，那是多么难得的一种“踏实” 。

疗伤的药

说了网站的“病”和用户的“痛”。开了治病和疗伤的药。
那么，回到我想说的—“导航”。“导航”（或者说是 “面包屑”）很重要。这其实给了用户一种“得知自己位置”的感觉。这就好比是一个身处丛林中的猎人手上的GPS，只不过你的用鼠标点击，而不是手指按。这是难得的，看似不起眼的改变带来的是用户的心理安全感的建立。
这就好比一个孤独的旅行背包客，手拿GPS，腰上拴着一根“绳子”，我可能不熟悉刚进入的购物网站这个“繁华都市”，但我知道自己的方向，我知道怎么走；我有绳子拴着我，我知道怎么回。有出路和有退路的道路似乎不“刺激”，但却是“最安全”的。

导航的外貌：

导航，它的表达方式。它如同一个超市地面和货架上的标语。超市是立体的“网”。而网站导航是平面的“锁链”。二者有立体和线性的不同表现和感受，但却有相同的功能 — 指引用户的方向。
导航，它的字如其人。身处现实世界，我得知自己具体在哪儿，知道怎么去安全的地方 — 这是“安全感”的保障。
导航，它的简单清晰。导航的简单清晰带来的是安全感，带来的是信任，而信任带来了难得的消费。

导航的内在：

导航的特点我想了很多，比如简单、突出、美观等。但我想，导航不是艺术品，回归到它最初的价值，导航两个最重要的内在特点：

“明显” 。明显才能突出“线索”。不然导航就成了可有可无，甚至是“噪声”。
“准确” 。用户急急忙忙的来，更可能急急忙忙的走，因此需要准确简洁的提醒和导航。

导航的作用：

首先，告诉用户这里有什么。导航让我知道这里有什么，而不用花费额外力气去多想。
其次，告诉我们如何使用网站。上购物网站的用户的目的性很强，购买某一种物品，导航的设计好坏决定了用户购买你而不是其他网站的东西需要跨过多大的门槛。
最后，它给了我们对于网站建造者的信心。导航的好坏很大程度虎让我对网站拥有者产生信任或怀疑。好的设计无疑是加分项。为用户省时间，恰恰是购物网站建立的目的吧。

那么说了这么多，但是具体怎么操作呢？我想做一个网站，我该如何设计一个好的导航呢？

Web导航的那些设计小习惯

十几年的网页设计走过了漫长的道路，引用《Don’t make me think》一书中的说法，网站的那些导航经历了以下几个阶段：

1995—古生代网站由程序员设计，老式的HTML链接和按钮
2000—西部蛮荒时代 web上的各种限制，字体丑陋，下划线丑陋。难以辨别什么地方可以点击。
2005—黄金时代 CSS为我们提供了优雅的解决方案：只用颜色来表示可点击的链接。

所以网站的导航设计要注意以下几点：（4个元素）

站点的名称（腾讯网，天猫，京东…），我知道自己当前在哪儿，需要在每个页面看到站点名称或logo（通常在左上角）。
实用工具（购物车…），帮助我们使用站点。
搜索框
栏目（当前具体在哪儿），主导航条。
导航有统一格式。用户进入你的网站只需要学习一次就会永久使用了。

那么，一下网站导航的好坏如何测试或者评价呢？

网站导航的设计好不好？想象一下突然给你一个陌生的页面，看这个网页，自己问问自己：“我从这个网页中知道了下面这些内容了么？”：

这是什么网站?（站点id和logo）
我在哪个网页上?（站点的面包屑或子一级页面名称）
这个网站主要栏目是什么?（标签）
我在导航系统的什么位置?（面包屑或标签想要的按钮突出显示）
我怎么搜索?我怎么去我想去的地方?（搜索框）

那如何测试一下我设计的导航栏如何呢？

“摘掉眼镜”。想像一下近视眼摘掉眼镜的痛苦，但是面对像素，这也是一个美丽的世界，细节被屏蔽掉了，完整的框架天然的呈现在你面前。 “模糊的视线”让人能更好地发现自己设计的导航产品的不足。好的导航一目了然，清楚无误地呈现，依赖整体外观，而不是看细节。
“拿在手里”。你可以打印出你设计的网页导航，换个与平时观察角度不同的方向，观察并圈出导航，看看能否快速定位地方。

最后呢，想说一说。一个购物网站的最伟大之处在于第一次的打开浏览就给了新用户一种难得的“信任感”。这种信任感的来源于产品设计的专业与细致。网站的一点小出错，不匹配，用户的感到挫折，信任感可能会降低唉。
精心雕琢的产品总是让人爱不释手，创意把握的那么细致准确，有的放矢志的创新做到了准确完美。
我自己写过策划和计划书，做过产品，写过网站，设计过游戏，正因如此，我才明白一个好的产品背后的艰辛和不易。一次完美购物的体验其实是多环节共同努力的结果，产品人的不懈追求，从脑海中的创意到纸上的图画勾勒、到绘制低保真原型的思考、到高保值原型的张弛有力、到研发的艰难、到产品的推广、物流的精心磨合和客服的细致设计等许多环节做到了全面开花。系统的全面完善是不容易的，购物网站的产品人用行动证明了自己的本事和才干，成全了用户的完美购物体验，打造了很多款融入生活的数字化产品，也成就了今天的互联网繁荣的中国。
我不善于写深奥的观点，简单明了直接说点干货，我想是所有产品童鞋和研发童鞋最期待的文章。希望大家喜欢，欢迎批评指正哦！
产品的病用户的痛：谈谈购物网站导航栏设计的“小心思”

文 @Sincerelyw