从消费流程看图书站点设计
收藏
一个网站的内容再好,若是其中的流程让用户很费解,完成不了整个流程的话,很可能所作的一切努力都会化为流水。消费流程,此文将分析China-pub,番薯网以及卓越网,我围绕六个问题来分析:
1、 这是什么网站?
2、 网站有没有我要找的书?
3、 我在网站的哪里?
4、 我该如何搜索?
5、 我该如何支付?
6、 网站还有没有我喜欢的书?
一、这是什么网站?
这个问题主要是品牌相关,品牌建立之后,会带来很大的好处的,所以品牌的意识在网站上的表现一定要清晰,最好要加上口号,咱们来看三个网站的站点标识:



从三个网站的站点Logo来看,卓越网的设计得比较好,主要是因为它的口号很有吸引力,其次是番薯网,但个人感觉番薯网的Logo
的颜色有点杂了,超过了三种颜色,在识别上边并不能给人一种易记的效果,想想苹果的图标,想想IBM的图标,又或者方正的图标,这些都是很简单,但却很有视觉冲击力的图标。China-pub的图标相对来说比较简单些,但是在口号方面做得就不是太好了。
二、网站有没有我要找的书?
这一点主要还是针对首页来说的,首页的设计很重要,但想设计好确很困难。网站的整体内容好比一座漂浮的冰山,我们要做的就是设计这座冰山露出水面的一角,通过这一角最大化的告诉用户我们有什么内容?



用户在了解了“冰山一角”的设计后,就会沿着这个设计的导航寻找自己想要找的书,例如我要找JavaScript方面的书,我首先第一反应是计算机的书,然后我就会满页面的寻找和计算机相关的字眼,此时我的阅读方式不是一列一列内容找,而是扫描,可能我的目光会来回的找,寻找到第一个符合我的期望的标签,立即点击进去看看是不是我想要的。从这种想法出发,首页的“冰山一角”的设计一定要简单清晰,不能过于复杂,这样即使用户是扫描的也能把对于网站整个信息架构有一个大概的了解,当用户想到要买其他类型的书的时候,也能知道我们的网站上有他们想要的。
三、我在网站的哪里?
这一点是针对导航来说的,我想要找自己想要买的书,来来回回在里边转了一阵子了,此时我要知道自己在哪,我怎么寻找我已经看过的东西,还有多少东西我没看过,我要回到某一级层次的页面该怎么走;甚至不知道要找的页面在哪个层次了,我想知道页面会不会有相应的提示,需要回到首页重新走一遍导航路径吗,这些都是严重的问题。
告诉用户当前在哪,他们才会有掌控感,才有会这个网站是给我用的感觉,才可顺利的找到他们想要的书。
要做到这一点,最好的办法是面包屑路径。来看一下三个站点关于这方面的设计:



很遗憾,China-pub和卓越竟然没有面包屑导航,这是很令人惊讶的,这种状况在打开一定量的页面之后,会疯掉的!其实面包屑导航也是一种侧面的信息架构表达,让用户了解网站的架构。
四、如何搜索?
用户通过导航找不着想要的书的时候就会使用搜索,所以搜索需要在比较明显的位置,最好是在每个页面的位置是一致的,让用户需要搜索的时候马上就能找到。
China-Pub:
番薯网:

卓越网:
五、我该如何支付?
支付方面要尽量简单而安全,简单是因为不要挑战用户的耐心,若是过于复杂,很可能导致用户在骂娘之后愤愤的离开,留下被丢弃的购物车,其实这已经是做成这一笔生意的最后阶段,所以在这个阶段怎么优化都不为过,但有个前提就是安全,这相比简单来说,更加重要,若是你的网站需要比较复杂的步骤才能保证支付的安全,一定要先保证安全。
下边来看一下China-Pub的支付流程:
(1)搜索找书

(2)加入购物车
(3)购物车图标链接
(4)购物车内容页
(4)结算页面
(5)结算完成
到此。China-Pub的支付流程已经走完,但在安全方面还有一处China-Pub设计得不错的就是在页脚增加支付相关信息的问答:
咱们来看番薯网的支付设计:
(1)找书(番薯网找书比较困难,因为搜索做得比较差)



(2)加入购物车

在购物车方面,有一个很好的参考(淘宝):
(3)购物车图标链接
(4)购物车内容页
(4)结算页面
在结算的时候,发生了一件让我很抓狂的事情:
若是用户没有登录,购物车的信息可以保存在Cookie中,但是登录之后就必须持久保存起来直到超过一定时间或者用户自己删除。可能是因为点击了结算之后,就会把购物车的信息清空放到了代付款的列表中,但这也不合理,毕竟用户还没有支付完成,那么他回去哪找这些信息呢?只会去购物车,不会想到别的地方,这个问题在淘宝也一样存在,呵呵,刚发现的。
(5)结算完成
终于到了这个页面,过程非常曲折。
好了,来看一下卓越网的流程吧:
(1)找书
通过分类和检索以及销售排行等寻找。
(2)加入购物车

(3)购物车图标链接
(4)购物车内容页
(4)结算页面





六、网站还有没有我喜欢的书?
这一点很重要,决定了用户买了书之后还会不会再来你的网站,其实这一点也就是通过关联推荐来实现,直接看这三个站点在这方面的设计吧。
China-Pub:





卓越网:



就写到这,欢迎拍砖!
|