绿人地图的研究

作者: Ray 日期: 2010年5月13日发表评论 (0) 查看评论

作者:Ray phoenix

开始时间:09.12.24

最后修订时间:09.12.25

版本:V1.01

综述:

首先,绿人旅行网是一个很优秀的2.0旅行网站.map.lvren.com是绿人旅行网的一个新的组成部分,从形式上来看是旅行地图.

>>旅行地图于一个旅行网站来说是非常重要的组成部分,一般来说有三种做法.

1是采用Google或者mapbar的地图api去做二次开发.

2是自己去画示意图,屏蔽对旅行来说的次要信息,显示主要信息以及路线.

3是做一个简单的flash或者图,只是一个链接定位的方式,并不是真正的地图.

相比之下,第三种方式肯定是不可取的,撇去不论.

第一第二种方式做法不同,思路不同,但是其目的是一样的.就是”最直观的向用户去展示旅行信息,方便用户的查看,选取以及比较”

绿人的做法是第一种,用Google地图进行二次开发.目的在我看来有三个:

1,方便用户从地理位置上进行旅行目的地的选择,信息的查询以及目标条目的比较.

2,插入到网站的其他重要页面,如城市的主页,景点的主页,直观的展示地理位置以及周边情况.

3,作为一种最直观的信息索引方式,地图要比文字或者层级菜单更能让用户快速理解自己所处的层级,自层级,父层级,兄弟层级的位置和关系.在这个意义上来说,可以做很多的拓展,如结合GPS定位可以做旅行路线图的记录,结合移动上网和手机客户端,微博客可以做旅行直播以及问题在线求助,讨论,分享.

下面我分四个方面来详细分析一下绿人地图的案例.

Part1:地图自身的界面设计与UE.

首先看一下整体的界面设计,左侧是地图以及重点条目的显示,右侧分三个板块,”城市直达”"风景区推荐”"路线查询”.其中默认打开页面停靠在”风景区推荐”上面.

>>关于界面设计我从以下几点分析:

>>>导航的设计与统一性

导航是网站重要的组成部分,而导航在设计上一定要具有统一性.统一的导航有助于用户最快的找到自己想找的东西,而不用再次去学习.

在绿人地图的导航设计上我发现有好几处不统一.

1,导航的tab页不一样多.在地图页面上少了”攻略”"装备”"新闻”"社区”.设计者的意图我可以领会.因为地图的导航上面最重要的是突出搜索,让用户通过搜索和快速链接(城市直达)等最快的找到自己想要的信息.于是只设计了城市,景点,酒店,以及自驾路线查询.

但是我想问,一个用户在搜索一个关键词的时候,他到底想得到什么?

参考alexa的数据,我们得到如下信息

百分之71的用户看了新闻

百分之23的用户看了攻略

百分之1.4的用户看了装备

我们再来看alexa提供的另一组数据,网站来源关键词:

大家可以从来源关键词里面看到,其中关心户外装备的不在少数,如关键词”三夫”"哥伦比亚户外”等.

根据这些用户访问数据我们再回头来看之前的问题:

用户在搜索一个关键词的时候到底想要什么?

我觉得用户并不是不关心装备的,并不是不关心新闻以及攻略的.

从某种程度上来说,用户其实关心的是一个综合性的东西.就是关于自己所搜索的关键词的一个综合性描述和信息陈列.因为用户在搜索一个词的时候,往往是没有明确目的性的,对这个词也是没有太大把握的.

而作为搜索引擎来说,我们应该做的是第一时间呈现和用户搜索相关的所有可能最有用的信息.而不是去询问用户,你到底要搜地点还是景点还是酒店还是什么?

举例说明:当一个用户搜索”丽江”的时候,他可能是想去丽江旅行,而他可能并不了解丽江,所以他乡搜索的是关于丽江的所有方面的最有价值的信息.

佐证:我们来看看同样有多种搜索类别的搜索引擎是怎么做的,以关键词”李宇春”为例:

屏幕剪辑的捕获时间: 2009-12-24 17:54

bing以及google都不止是搜索出网页条目,其中bing做了一个整合模块,其中有热门,视频,资讯,图片等.google是资讯,图片,歌曲等.

并且这两个搜索引擎都在左侧列出了类似”李宇春图片”"李宇春视频”等快速入口.

说明用户其实是在一次搜索之后看到结果页面的情况之后,再做一些精准判断,去选择自己想搜索的类别的.

所以:

我得出两个结论.

一是:搜索条目并不应该只限于城市,景点,酒店,以及自驾路线查询.

二是:默认的搜索对象不应该是城市,而是全部搜索.

比较推荐的是豆瓣的解决方式:

在我未指定搜索分类的时候,是全部搜索

在我指定类别之后,才是分类别搜索

2,导航的分类称为不统一:

在一般页面的导航上显示的是”住宿”

而在地图页面上显示的是”酒店”

这虽然是一个很小的细节,但是成为的不统一会让用户增加一个判断思考的过程.习惯了看”住宿”分类的用户需要一个判断,才能知道,这个新页面中的”酒店”就是自己熟悉的”住宿”.

3,功能的割裂感.

在网站主导航上点击所有分类tab,都是在本窗口打开,但唯有地图是在新窗口打开.且打开以后用户会发现导航变了.这会让用户产生”地图不是网站的一部分”的感觉,从而使用户对自己的浏览没有信心,直接退出这次浏览,关闭页面.我敢保证,从网站主页到地图页面的跳出率一定不低.

刚才说的是进入地图.我们再看看从地图出来的流量.

当用户点击左侧地图上的一个具体条目,如”黄山”之后,本页面并没有能展示更多详细信息,二是在新窗口打开了一个页面,回到主站的”景点”频道的”黄山条目下”.用户进入地图之前的时候打开了一个页面,出去的时候桌面上至少有三个页面”主页”"地图”"黄山”.这更降低了用户的浏览信心,还增加了用户处理信息的复杂度(一下变成了三个页面!)

>>>按钮和功能的分布

1,右侧区域

刚才说过,右侧区域是三个部分组成”城市直达”"风景推荐”"路线查询”.由于默认打开的是”风景推荐”,所以实话实说,我大概花了一份众多的时间才发现,屏幕的右下角还有个路线查询的功能.

人再看页面的时候并不是觉得每个部分都是重点.这个早有人总结过,人的视觉中心是呈F形状的.也就是说,从页面的左上角开始,越往右越递减,越往下越递减.从这个角度来看,网页的右下角基本是用户看不到的地方.而地图页面右侧区域的三个部分应该是网页中的很重点的元素,所以并不建议用这种排列方式,而建议用三个平行tab的方式去排列.

示意图:

2,树型导航的美化和操作的统一性

我看到这个页面的第一眼就确认,这个产品是技术导向型开发.因为右侧的树型导航是完全没有经过美化的技术式样.

树型导航的层级性清晰,虽然是一种非常古老的导航方式,但是至今也没有非常好的替代方式,尤其是在表示层级性强的条目系统上面.

但是对树形,每个网站或者产品都有做一些美化,使得整个树形看起来更清晰,更明确并易于操作.举例说明:

如:技术风格的google网站管理员工具:

再如老牌购物网站亚马逊和他的模仿者京东网购:

google的设计中,将树形上加上”+”和”-”,让用户一眼看出哪些层级是被展开的以及哪些是父级哪些是子级.

亚马逊和京东的设计中,将树状二级在右侧的新区块中展示,在不影响用户看到其他父层级的同时,清晰的显示子层级.

从这个意义上来说,右侧的树型导航有待改进.

我们来看右侧树形导航的另一个问题:操作不统一.

当我们进入地图页面的时候,默认是将”景点推荐”展开的.但是如果我们去点击”城市直达”,会发现下面只有两个父分类,而且没有展开.

我需要连续好几次的点击才能将它展开至下图所示的样子

这个操作让我很不喜欢,一方面,当我展开”城市直达”的时候,页面右侧只有两个简单的父分类,,下面是大片区域的空白.另一方面,我需要连续的好几次操作减少了我想看分类内部的条目的热情(因为我的操作成本太高),第三方面,我发现”景点推荐”和”城市直达”的展现形式完全不一样,让我很不适应.

这个地方我想也需要调整.

3,左上角区域诡异的警告:

当我点击页面左上角区域,搜索框下方的”当前”两个字的时候,页面出现了一个让我奇怪的弹出窗口:

首先,”当前”两个字周围有橙色的色块,让我误以为是重要的按钮,我想点点看,但是实际不是按钮.

其次,为什么说我的点击”没有意义”呢?什么叫”要有深度”呢?而且标题还是”警报”.

这个对用户来说太不友好了.

然后我尝试着多点了几次,发现每次出来的提示都不一样.我立即明白,这是开发人员做的一个彩蛋.

但是这个彩蛋并不是显示帮助信息,也不是小技巧,每次点击之后的信息人都让我觉得无厘头,我觉得作为一个普通的用户,我会很疑惑.

“当前”这个按钮所在的地方和颜色让用户错以为这是一个有用的按钮,已经引导了用户误操作,而无操作之后并没有任何有价值的信息呈现,这个彩蛋的意义确实不大,还会引起用户的疑惑甚至是反感.我建议可以将一些小技巧或者快捷键操作加入弹出窗口的提示当中,会比较有意义一点.(ps:实践证明,一共可点20次)

>>>信息呈现

整个地图页面,无论是搜索前的页面信息展示,还是搜索后的信息展示,都不够精简和有效,不再赘述,试举一例说明.

当我在地图左侧点击一个条目的时候,会浮出一个小框体,小框体当中有三个tab,分别是”简介,照片,交通”.也就是说,我看一个条目的信息的时候,需要至少点击两次,而总的信息量不过是几十个字,一张图片.用户的操作成本太大了.

我们看看google是怎么做的.

google在差不多大小的框体当中,将简介,照片,交通三种信息整合了,让用户一次点击就能看到所有信息.

更简单有效.

Part2:地图模块与网站整体的结合与关系

网站的任何一个功能不是独立的,也就是说网站的所有功能不是简单的堆砌在一起的,而是应该互相联系,互相共享数据的一个统一体.

绿人的地图模块是独立于网站之外的,在主站上面只有一个地图模块按钮作为入口可以进入绿人地图.

绿人地图也只是在搜索到确定条目的时候”点击详情”才会再跳回到网站.

我仔细观察了绿人地图上面的条目框体的样式,以及绿人景点页面右侧地图的样式,发现其实并不相同,故我怀疑可能用的是同一套数据,但并不是一个系统.截图如下:

地图模块于我看来应该是旅行网站的信息索引中心.应该一个网站只有一套地图,只是在专门的地图页面会大一点,在条目页面的侧边栏地图会小一点,其实是一套东西,这样做网站的功能模块性及复用性都会比较强,也比较便于维护.

佐证:

www.yelp.com

www.elong.com

map.google.com

等.

模块化的设计,全局的调用性使用,是一个正确的网站构架方式.刚才已经说过,明显的好处是:

1,减小开发与维护的成本,一变全变.
2,减少用户使用的学习成本,因为网站只要出现这个模块的地方都是一样的设计一样的操作.

3,可以方便的部署,修改和复用.

举例说明:

google的很多服务都是独立开发但互相联动的.

如gmail中可以直接发送google doc的文档,对方在gmail中打开也可以直接用google doc打开,无需下载到本地去用office打开.

再如:gmail里面一封邮件可以直接被添加到google task当中,而google task的内容有可以直接被放入google日历.反过来,google日历里面的一个项目可以直接作为一封邮件在gmail中被发送出去.

这就是google产品的强大,也是用户为什么如此热衷于google产品的原因.

Part3:细节设计和UI

产品是否人性化,是否便于使用,也就是大家经常说的”用户体验”,其实最重要的是在于细节的功能,以及对用户行为的充分了解.

试举几例说明:

1,左右栏联动

当我在搜索框体内输入”北京”并选择”搜景点”的时候,我可以搜到北京的所有景点并在地图上显示出来.

同样,我点击右侧的“城市直达>>华北>>北京”也同样能找到北京的所有景点并在地图上显示出来.

理论上进行着两种操作,作为用户来说想得到的结果页面应该是一样的,我们呈现的页面也应该是一样的,但实际不是.

当我直接搜索得到北京景点的时候,右侧的列表并没有展开.

而当我通过右侧列表去点击层级找到北京的景点的时候,右侧列表是展开的.

而这两种情况下,左侧地图显示的内容完全一致.

这就是说,用户在通过不同途径去找同样一个东西的时候,我们给出的现实却不一致.

直接造成的后果是,用户在通过搜索得出结果的时候,右侧列表没有展开,用户并不能清晰的看到北京所属的层级是”华北>>北京”,也就不可能再跳转到和北京同级的其他城市去.

2,用户操作习惯

大家都知道,无论是mapbar还是google的地图上面,当我使用鼠标滚轮进行滑动的时候,地图会放大缩小.

但是实际上在绿人地图上面,我的鼠标滚轮操作没有任何反应,也就是说当我需要放大缩小的时候,我必须用地图上的标尺进行操作.这个是很不符合用户使用习惯的,也让绿人地图的易用性下降了.

3,单击双击

请看如下描述:

单击和双击的使用并没有严格的规定和界限,但是我们一定要遵循用户使用的习惯来进行设计.

据我个人的理解,在操作系统当中,单击有选中的意味,双击有执行或打开的意义.双击,是两次连续的单击,双击的意义在于让用户连续操作两次避免用户的误操作.但是在操作系统当中,我们的操作对象往往是文件,或者是可执行程序.在网页设计当中,我们的操作对象一般为超链接或者是页面,这种情况下选中并没有意义.当你点击一个超链接的时候,你的意思绝对不可能是选中它,而一定是打开它.这是一种约定俗成的行为.用户也非常熟悉这种行为.

从这个意义上来说,用户在绿人地图上每展开一个层级都要双击,这是一种极不符合用户使用习惯的设计.易用性很差.

4,UI

绿人网站是一个纯粹的2.0的旅行分享,点评以及旅行商品的长尾销售站点.

从这个意义上来说,UI角度应该很“2.0”.如果让我用语言来概括什么是”2.0″的美工,我觉得是很难概括的.

但是我可以列出几个关键词”细腻,轻盈,轻松,标识明确,传达清晰”

试举几个细节来说明.

4.1圆角,小切角,大切角

按钮或者tab上面,现在已经很少应用直角和圆角的设计了.

绿人用的是直角和大切角设计,而很多网站用的是小切角.放大图片来观察:

a,老牌旅行点评网yelp.com的导航: