实例分析:从搜索结果看地图搜索的交互设计

每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。


每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

实例分析:从搜索结果看地图搜索的交互设计

无论是搜索引擎还是垂直搜索,都是用户输入搜索内容,数据库反馈搜索结果,并以列表方式展示。地图搜索区别与其他搜索的是,除了展示搜索结果列表,还要将结果位置直观标注与地图上。那么在地图搜索结果交互设计时,需要考虑到搜索结果与地图行为的互动。

以下从搜索范围、搜索结果与地图互动搜以及搜索结果排序方面,分享百度地图、高德地图等地图类产品的搜索体验,并进行相关分析。

一、搜索范围

百度地图搜索。当输入“美食”,然后更改地图范围,地图搜素结果数随之而更改。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

以高德地图搜索为例,输入“美食”,更改地图搜索范围,地图搜索结果数量不改变。始终是45页,每页20个。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

显然百度地图搜索以地图当前视野范围为准,而高德地图以当前所在城市为准。然而,当我点击百度搜索结果列表的下一页,下一页,再一页时,发现地图搜索范围一直在变更。如果以当前视野为范围的话,不是应该地图不改变,只是结果标注更改吗?于是忍不住一直点击下去。最后76页。然后再返回首页,更换一个地图范围继续,只点击搜索列表,一直点击下去,发现最后也是76页,再次重复几次,发现当前城市不改变时,搜索结果列表数量不改变。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

百度地图随“下一页”地图范围变化

可见百度地图搜索范围有两套,一套以地图上当前视野为搜索范围,一套以当前城市为搜索范围。当百度地图当前视野范围发生变化时,数据库重新进行检索,搜索结果返还当前视野范围的搜索结果数量,并在地图上标注检索结果,其中10个(对应一页检索列表)以醒目的数字形式标识,其他检索结果以红点方式表示;至于搜索列表一直以市区为检索范围,只是根据视野范围变化而重新排序。

高德地图搜索范围为所在城市,当地图范围发生变更时,检索结果重新排序,并将当前视野范围的检索结果优先排在第一页。

分析:

百度地图和高德地图都采用了全局搜索,并都将当前视野范围的结果优先排序,百度比高德更多的是将当前视野在搜索列表第一页以外的其他结果也在地图上标注,并告知用户当前视野范围搜索结果数量。

对于部分用户来说,也许只想在一定范围内(当前视野内)查找,而地图上只醒目标注的10或20个检索结果未必如用户所愿,因此在地图上标注其他检索结果,使用户获取更多信息,却有必要。搜狗地图、腾讯地图都是采用这种方式。但是,不是所有用户都确切了解当前视野内检索这一概念,一定有用户只是要检索相关内容的位置,而并没有考虑具体范围,这也是,所有关于搜索相关文章中说的,默认全局搜索的必要性。基于以上考虑,在天地图网站 ,采用了让用户做选择的方式,“视野内”或“当前城市”,满足了多种类用户的需求,然而不得不说相比“天地图” ,“百度地图”更加技高一筹,它将两种搜索范围做了更好的融合。

二、搜索结果列表与地图的互动

基于地图搜索范围不同,在搜索结果与地图的互动上有明显的差别,百度、搜狗、腾讯地图,这种基于地图范围的检索,当地图发生行为(平移、放大、缩小),检索结果迅速给出回应,并在地图上进行标注,用户的每一步行为都得到响应,这种用户体验很好。而高德采用以全市在检索范围,显然不会以地图行为触发检索,当移动高德地图的地图时,需要点击“搜索”按钮,触发后台数据库检索,搜索列表重新排序,并标注20个检索结果。当前视野范围不够20个时 还需要瞬间缩小地图以便满足当前地图屏幕标注20个搜索结果的需求。用户体验很不友好。对于所有电子地图网站,地图占据屏幕95%空间,不想到进行地图操作恐怕不太可能,而操作后没有即时响应,并在在点击“查看”后,地图又自动缩小以展示要查看的结果,这种交互体验不能令人满意。

三、搜索结果排序

百度地图和高德地图对于地图搜索结果都有默认排序和选择排序两种方式。

默认排序

各地图公司都有自己的默认算法。从表现形式来看,以当前视野为检索结果的搜狗地图、腾讯地图,点击下一页,地图不改变,地图上标注数据随检索结果列表下一页而更改标注。对于检索结果列表以全市为范围的百度地图和高德地图,则首先改变地图中心来平移地图展示当前地图级别的检索结果,然后随着检索结果列表的下一页逐级缩小地图比例尺。

筛选排序

百度地图在PC上的默认排序很奇怪,居然没有“距离优先”一项(APP上有),另外奇怪的是在“中餐馆”分类出现“火锅”,下面和“中餐馆”并列的大类又出现“火锅”,难道因为火锅是检索率最高的美食?

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

百度地图筛选

高得地图分类更多,而且排序更合理,表现形式也更良好。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

分析:

高德地图POI点分类更精细,数据量也更丰富(高德地图检索“美食”北京市内结果列表为45页,每页20个,总数量900个,而百度地图北京市内美食结果列表为76页,每页10个,数量为760个)。

总结:

每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

 

本文由 @giser 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25494/

(0)
CatherineCatherine
上一篇 2017-05-11 12:58
下一篇 2017-05-11 16:01

相关推荐

  • 【实习精选】网易、中信、博彦科技、雅培、太平洋证券等名企实习汇总(04-02)

    序列               实习单位工作地1德国电信咨询北京2腾讯北京3中信研究部北京4东亚银行(中国)有限公司上海5雅培中国上海 嘉兴6太平洋证券上海7广州越秀金融控股集团有限公司广州8广东南方都市报经营有限公司广州9国金证券股份有限公司深圳10博彦科技股份有限公司西安11网易雷火游戏部杭州12科锐国际大连01德国电信咨询一、企业和团队介绍德国电信国际咨询公司(DETECON),德国电信集团的全资子公司,是全球领先的ICT行业专...

    2018-04-08
  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

    不单是视觉扁平,交互层级也更加扁平啦~

    2017-05-09
  • 越碎片化的时代,越需要完整的用户体验

    用户体验是引领,而不是跟随。美学之上,预见未来。我发明了这个词,因为我觉得人性化界面和易用性太狭隘。我希望能用一个系统涵盖人类体验的方方面面,包括工业设计、平面、界面、人机交互和指南。
    ——唐·诺曼  1998

    2017-05-14
  • 【译文】UI设计评审成就微创新

    产品设计流程中,有必要对设计进行评审是大家的共识。在我每周的工作内容中,参加各类大大小小的设计评审是必不可少的一环。既有脑力激荡的评审让设计方案脱胎换骨的,也有针锋相对的评审让设计方案摇摆不定的。怎样进行一场高质量的设计评审?设计师应该如何应对设计评审,更好的表达设计意图,并收集意见改进方案?怎样避免设计评审变成竞稿或PK?如何确保设计评审这样的流程能带来更大价值?带着这些问题,我们一起看看原文作者Jason的观点。*在你点评的设计细节上开始询问背后的原因及意图。为什么我们需要这条信息?对于允许索取这条信息我们设置了哪些期望?我们会用它做什么?如果我们能回答它们,再进入讨论解释各种元素的优劣以及与之对应的不同意见会比较好。“为什么”引出一个故事,解释某件事情的真实性。如果你问为什么,一切都无法奏效,你更想要创造一个故事,无论真实与否。这是让你感到糟糕的危险领域。 与询问“为什么”不同的是,考虑询问“如何”能够引出一个创造流程的故事,不必为它的存在辩护。然后你可以问设计师之前考虑过的各种可能,认真倾听设计师在提供方案之前做过的尝试。他们也许过于看重某些东西,不过没必要深究。优秀的适时交互是让产品(服务)吸引或失去客户的关键区别。将间歇性的互动变为持久关联的秘诀在于一系列精彩微交互,以及当用户需要时恰好出现的信息内容。 在设计评审流程中,应当询问每一个行动、每一次询问或者每一次数据展示是否出现在正确的时机,以确保界面在切换时传递信息时顺畅。随着扁平化设计与用户体验趋势的摇摆变化,我们能预感到页面部件缺少视觉线索的风险,因此动画能减少这种风险。 这种动效可能是颜色、透明度的变化,也可能是用猴子的手臂延伸页面这种细节,或者用户完成任务后展示太阳升起的效果。询问在UI设计中加入逐步动效的可能将极大的推动设计师改善设计,使得设计师思考时间维度的设计细节,而不只是局限在空间维度。这是一个很好的问题,我认为它是每个人都应该吸收的教训,尽管并非如此。我总喜欢提到:对用户的真实目标来说,页面或屏幕上的任何元素都不是解决方案的一部分,而是噪音和干扰。 在设计的每一步中,我们都需要自问:我们如何能够创造更小思考成本下能发挥同样作用的产品?在设计评审中,这是要求把方案简化的最佳表达。在设计中保持界面清晰很重要,使用尽可能少的点击、文案和输入框来达成目标更好。踏踏实实的把用户需要完成工作的消耗降到最低,用户会感激不尽。我们认为,很棒的产品描述(比如产品手册)对用户来说就跟“坐在60码时速的车上看到的广告牌一样”,UI设计师们比较难理解用户是如何忽略这些产品界面细节的,尽管设计师为此付出诸多努力。 优秀的设计评审放慢节奏,考虑每个元素,但是能认识到这些设计细节可能不会被用户注意到。如果参加评审的人员在颜色、字体及体验设计方面没有专业知识,他们可以考虑以下重要因素:经验告诉我,不要试图一概而论。例如我会问“我不确定开放的banner是否足以传达品牌?”,而不是问“哇,用户根本不会理解我们的品牌价值。”这就是为什么我认为每个设计师应该花时间观察用户并且使用自己的产品(又称可用性测试)。

    2017-05-18
  • 产品交互控件:社交App中的「消息」功能窗口化

    每天偷偷看大神秀文采的我终于发了篇字数不多的帖子…在浏览朋友圈时有新消息!而我们必须返回,点击第一个Tab『微信』,才能收发消息。

    2017-05-07
  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 网站设计:单页还是多页好?别争了,看这里

    当你的设计是为了追随时尚潮流,而不是为了满足用户的目标为目的,那你的设计就出现问题了。接下来,我们分析下单页面和多页面网页的UI设计,以便于做出更好的设计选择。

    2017-05-03
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08