以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://blog.b3inside.com/......of-map-sites/

地图网站的需求功能与体验

作者:波希米亚  |   发布: (网友)稻草   |   时间:2009-02-23 05:15:32 文字大小:- +

地图现在太常见了,几乎每天在地铁上都能看到卖地图的小贩,”09年新版北京旅游交通图,1块钱一份”,买的人多半是外地来旅游的,这些人需要地图来告诉他们现在是哪,要去的地方在哪,可以坐什么车.瞧,就是这张地图:

一张华丽的1923年北京地图

开个玩笑,这是一张1923年的北京地图.它虽不是本文的重点,但从现在开始我们就要往地图相关的内容上靠了.信息时代,啥玩意发展的都快,北京交通旅游图年年都换,甚至恨不得一年内出好几版,目的只有一个–”赚钱”,呵呵,貌似仔细看了看,除了小广告有所不同以外,实际内容有啥改动还真考眼力呢…人类是最聪明的,总能根据需要创造出新的东西来帮着自己偷懒.

没错,人是越来越懒,不过也越来越智慧,电子地图的诞生正在逐步取代纸地图.过去我们与纸地图交互的唯一方式,就是用手指在上面比划来比划去;而现在不但可以直接在地图页面上点选,还能通过输入关键字,甚至是使用语音来查找地点.只是找个地方,方式变化却如此之大,这是为什么呢?

不妨今天我们坐下来考虑几个问题:地图网站的需求,功能和体验.也思考一下高科技在带给我们便利的同时,还带来了什么.

需求篇

需求是一个产品诞生的原始驱动力.电子地图,地图网站或地图服务的兴起,除了依托互联网相关技术的发展外,更主要的是人因.我们可以罗列一下,是哪些想法在推动着它:

  • 要更快速更准确的找到目的地;
  • 不想再凭眼力去找,我知道地方的名字,只是不知道具体在什么位置;
  • 从我这到目的地有多远,怎么才能过去;
  • 我们碰头的地点是A地,我想知道周边有哪些场所,见面后想在附近吃饭;
  • 懒的记途经的地名和换乘站,是否可以打印,或者能把这些信息发短信给我;
  • 要下班了,想知道那条路回家畅通一点,交通流量如何;
  • 目的地附近有哪些建筑,楼宇大概是什么样子的;
  • 要是能实时提示我该怎么走,那就更好了(GPS辅助);
  • 几个人不在同一个地方,但要能看到同一张地图;

先举这么多.看,我们的想法多五花八门,但它们都是为同一个目标–简单,准确,高效!这是电子地图和纸制地图相比,最大的特点所在.为了要实现这些需求,设计师和工程师们真的是下了不少工夫,要把北京地图,中国地图,甚至世界地图统统装到一个只有纸制地图1/6大的显示屏里来,也不是件容易的事(虽然现在看起来再普通不过).

需求是问题,那功能就是答案.怎么来回答这些问题?

功能篇

很多时候,我们想一口气把问题全答完.等等,喘口气,别答乱喽.功能也一样,要有针对性,别弄一大堆功能上来,看着挺”充实”,其实有用的没几个.作为设计师,先听好问题问的是什么,需求要的是什么,然后再做相应的功能.当然,如果能把几个交叉重复的需求,用更少个数的功能表示明白,我想用户会感谢你的,他们会为你的设计买单.

看看上面列举的需求,是如何转化为功能的:

功能演示1
这个是谷歌地图的一个截图,用简单的几个字,就逐一回答了之前的问题.

功能插图2
比传统纸制地图快就快在,系统可以根据输入的目的地关键字,帮你完成哪些”眼力劳动”.

功能插图3
和看纸制地图一样,看看这儿,看看那儿.因为这些动作都要在屏幕里去完成,因此放大缩小起到辅助浏览的功能:先缩小找到大体位置,再放大查看具体地点.

功能插图4
这个是最吸引人的功能,也是对用户帮助最大的功能.不管是开车,还是坐公交,有了这些数据,出行心里就更有底了.

体验篇

地图类的竞品有很多,比较有名的: 谷歌地图 , 百度地图 , 搜狗地图 ,MapABC , Mapbar , 我要地图网 等…虽然主要功能和达到的目的都一样,但使用上还是有差别的.这些功能的差别来源于针对人群的差异性,功能的设置,技术水平,以及对产品的认识.

1. 城市选择

map-city-1
谷歌: 默认城市是”北京市”,可同时细选各个区县

map-city-2
百度: 默认城市是”北京市”

map-city-5
搜狗: 默认是”北京”

map-city-3
MapABC: 默认是”北京”

map-city-4
Mapbar: 默认是”北京市”

map-city-6
我要地图网: 默认是”全国”

从上面的例子不能发现,多数网站都能通过ip获取用户当前所在的城市,在页面加载初始化的时候,就确定城市.这会让用户感到很亲切,也能少操作一步.

2. 初始界面

map-homepage-1
谷歌: 初始为北京市地图

map-homepage-2
百度: 初始为北京市地图

map-homepage-5
搜狗: 初始为北京市地图

map-homepage-3
MapABC: 网站本身界面

map-homepage-4
Mapbar: 网站本身界面

map-homepage-6
我要地图网: 网站本身界面

貌似以搜索见长的网站,初始界面焦点是北京市地图;而以地图为主产品的网站,焦点则是搜索框.或许专门的地图站点都有一个”首页”情节.

3. 关键字输入

map-keyword-1
谷歌: 自动匹配相关地名

map-keyword-2
百度: 没有自动匹配功能

map-keyword-3
搜狗: 没有自动匹配功能

map-keyword-4
MapABC: 没有自动匹配功能

map-keyword-5
Mapbar: 自动匹配相关地名

map-keyword-6
我要地图网: 自动匹配相关地名(可能是编码问题,匹配出来的字是乱码)

自动匹配(Auto Complete)虽然不是新鲜的东西,但考虑到技术成本,有些网站还是省掉了这个功能.其实这就是一个响应顺序的问题:自动匹配是事前响应,而没有这个功能的站点采用事后响应的方式,当用户触发”查找”动作以后,模糊查询含有关键字的地点,反应在地图上.体验上前者更好些,为什么这么说,是因为自动匹配其实是在帮助用户精确地段,缩小范围.

4. 地标指示及附加功能

map-tip-1
谷歌: 地址,到这里去,从这里出发,周边搜索

map-tip-2
百度: 地址,电话,到这里去,从这里出发,周边搜索

map-tip-3
搜狗: 地址,电话,到这里去,从这里出发,周边搜索

map-tip-4
MapABC: 地址,到这里去,从这里出发,周边搜索

map-tip-5
Mapbar: 到这里去,从这里出发,周边搜索

map-tip-6
我要地图网: 到这里去,从这里出发,周边搜索

从上图比较来看,地标提示框除了标明地点外,”到这里去,从这里出发,周边搜索”是其主要功能.这几个功能是较纸制地图最大的优势所在.传统地图只能告诉我们地点在哪,而电子地图解决了我们最关心的问题–怎么去!

5. 交互形式

用户可以在地图界面内,使用鼠标进行拖拽,改变页面框架内显示的区域.这是模拟我们在看传统纸制地图时用视线寻找地区的样子.屏幕内显示的内容有限,就算我们移动视线也看不到页面以外的东西,但拽进来不就看到了.正所谓”山不过来,我过去”.

依靠鼠标滚轮上下移动,我们可以放大缩小地图显示的范围.这也是优势之一.配合卫星功能(不是所有地图网站都有这个功能)还能看到建筑群是个什么样子.

6.用户界面

点在地图网站的界面都大同小异,一列显示备选地点,其余区域(尽量大)用来显示主地图.线框我就不画了,很好理解.道路,建筑等图示都模拟传统地图,降低学习成本.

发展趋势

随着科技发展,移动终端的丰富,互联网技术的提升,电子地图的载体正逐渐从家用电脑转向手机,GPS,便携式电脑.未来我们无论步行出游,驾车,还是出差,都可以通过无处不在的网络,更方便的使用电子地图带来的便利.快速定位,路线指引,周边搜索将越来越深入人们的生活.高效,信息更丰富将成为未来电子地图的主题.

 

更多
打印  |  相关话题:地图服务和地图网站   |  类别:信息和交互  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买