专业知识分享其他

案例分析 | 改进酒店预定中的地图设计

2021-10-0410 MIN READ原载于微信公众号 ↗

01

项目概述

这是我为MMT重新设计的一个功能(MMT是印度主要的在线旅游代理商(OTA))。这段时间以来,我们一直在改进酒店预定产品上位置相关信息的显示方式。

这是因为地理位置是用户在选择、比较和最终预订旅游住宿时考虑的主要因素之一。波士顿咨询公司对印度旅游市场的研究表明,地图是印度游客访问最多的第三大接触点,仅次于OTA和谷歌搜索。而带有地图的旅游网站的访问量比谷歌地图要低。在我们的平台上,地理位置也是仅次于价格的第二大筛选器。我们的数据分析还显示,进行国际旅行的用户严重依赖地图。

02

问题概述

改进MMT地图体验是一个特殊的挑战,原因有两个:1. 移动端地图交互的标榜是谷歌地图。但用户对旅游网站的期望和目标与谷歌地图的不同。到目前为止,在印度或国外其他地方,还没有其他主要的在线旅行社能真正破解地图体验。

  1. 在国内(印度)旅游市场,MMT为OTA设计制定了标准,我们的用户群体大部分都是印度人。但随着印度人越来越多地出国旅行,MMT的产品被拿来与Airbnb和Booking.com等全球巨头相比。为了与他们竞争,我们必须具备与他们同等的功能。而地图视图是出国旅行的游客希望在他们选择的OTA上拥有的基本工具。

我们的目标是提高地图在酒店列表页面上的可发现性,并解决当前安卓和iOS地图视图设计中的可用性问题。

03

目标用户

虽然MMT的产品有地图功能,但用户几乎没有与之交互。作为一个产品团队,我们开始相信,也许我们的用户不使用这个功能是因为他们没有足够的技术基础知识。然而,这是一个错误的想法,因为在同一用户群体中,有很大一部分人每天都在与Uber和谷歌地图等以地图为中心的产品交互。为了解释这个项目的任务流程,我们建立了以下两个用户画像:!Image

04

限制因素

搜索功能的限制

我们目前的技术栈不支持进行多城市搜索,也就是说,用户无法搜索“喀拉拉邦的酒店 ”或“泰国的酒店”,因为搜索结果会跨越不同城市。到目前为止,我们的搜索功能上的这一空缺被认为是一种边缘情况,因为大多数用户搜索的是特定城市的酒店。

Makemytrip.com主页上对于目的地的自动推荐但这种限制也会出现在地图视图中:我们无法显示出用户搜索的城市或地区以外的其他酒店。Covid19的影响

这个项目是在2020年初推出的,但由于Covid19对旅游行业的冲击,其增长和使用量都受到了很大的阻碍。

05

设计过程

Step1.对现有功能进行游击测试

我们首先对12名用户进行了一轮游击测试,观察他们如何与地图交互的,然后确定了现有功能中的关键可用性问题。以下是我们发现的问题:没有关于地标或 地点 的信息

地图已经从实体媒介转移到了数字媒介,但它功能不变——为人们提供地理位置信息。即使还是在使用纸质地图的时候,地标也是其中不可或缺的一部分,因为它们充当了用户用来导航的标识物。人们通过地图来获取背景信息,例如:

“这家酒店离市中心有多远?”或“这个海滩上有五星级酒店吗?”

特别是当用户刚到达某个目的地时,主要的引导点成为他们将要参观的风景和他们想要去的地标。我们的地图是一个城市的鸟瞰图,上面有很多酒店,但它没有显示任何地标或与地点有关的信息,导致用户很难导航。

我们测试过的安卓系统上的地图可发现性 差在地图视图中,搜索、区域指南等功能隐藏在措辞含糊的触点后面。正确的渐进式信息呈现方式是很重要的。如果一下子显示过多信息可能会让用户不知所措。但如果显示得太少,信息的可发现性可能就会很差,因为用户不会有进一步探索的动力。在这张地图上,我们犯了这第二个错误。我们没有把相关的功能和内容预先展示出来,而是把所有的内容都藏在了点击之后,但用户可能会点击,也可能不会。在我们的测试中,12个用户中只有3个发现了地图上的搜索功能,而且没有一个用户与“地区指南”的CTA进行交互。

点击1:位置→点击2:搜索框→点击3:输入搜索信息轮播 增加了杂乱性

酒店卡片的显示顺序与列表页相同,是以受欢迎程度排序的。这意味着在酒店信息轮播中,相邻出现的酒店在地理位置上可能相隔数公里。在我们的游击测试中,我们观察到,大多数用户会通过滑动轮播信息与之交互,但很快就失去兴趣。为了查看某家酒店详情,他们会先点击地图上的酒店图标,放大,然后再点击附近的其他酒店。当在地图上浏览时,用户希望查看地理位置相近的住处。因此,虽然信息轮播把更多的信息呈现在用户面前,但呈现的信息并不相关。

酒店卡 片 上提供的信息

虽然我们的酒店卡片不断出现在页面上,但它们提供的信息很零碎,不能吸引用户点击它们并继续向前探索。Step2.竞品分析我们还对谷歌地图、Uber、booking.com、agoda.com等以地图为中心任务流程的应用进行了竞品分析。这帮助我们了解用户对地图功能的基本期望。

最后,我们从电脑端的地图视图中学到了一些东西,包括在电脑端体验和手机上都运行良好的东西。

最近为MMT网站设计的地图视图Step3.设计探索根据从游击队测试和竞品分析中得到的启发,我开始进行一些设计探索(如下图)。考虑到这个项目中其他利益相关者的反馈,我们进行了一系列的迭代,最终确定了一个符合我们项目目标的设计方案。

设计探索在这些探索中,我们尝试了不同的方式,例如,用户在地图和列表视图之间的切换方式,区域指南的入口点以及酒店信息的显示方式。尽管我们最初对于一些探索是雄心勃勃的,想要设计出很多新的功能,但最终我们的解决方案还是侧重于减少认知负荷。地图可能会给人一种认知负荷的体验,通常,更精通技术的用户会与它们交互。我们决定少做一些事情,但要把它们做好。

Step4.

最终设计

在Invision上制作的原型以下是重新设计的重点:减少认知负荷许多对地图的用户体验有明显影响的变化是无法通过模拟来传达的。例如,在之前的地图中,酒店都是聚集在一起的,这让用户无法点击其中的任何一个酒店图标。通过反复试验,我们改进了地图的默认缩放级别,在给定的缩放级别下显示的酒店密度以及酒店图标,让它们就不会像在旧版地图那样密密麻麻地聚集在一起。我们还改进了酒店信息的显示方式,让用户只有在点击某个酒店标记时才能看到酒店,而不是以信息轮播的形式呈现给他们。筛选 器筛选器很重要,因为我们的数据表明,使用筛选器的用户有更高的转换机会。当我们重新设计了桌面端的筛选器后,我们看到使用筛选器的用户数量有了明显的上升。我们将同样的方法应用于桌面端地图视图,并再次发现,在浏览时使用筛选器的用户比不使用的用户转换率要高。因此,我们也将这种方法应用到移动端地图上。虽然我们也探索了移动端的筛选器,但我们最终选择了一个既能促进筛选器的使用,又能确保视觉和认知负荷最小的方案。

地标性建筑这个项目不仅仅是对UX/UI的优化,我们还对后台数据的结构进行了研究。这不仅仅是在地图上显示信息的问题;事实上,如果我们在我们的数据库中填充每一个地标,用户会看不到底下的地图。

用户可以点击并选择地图上的地标,并查看周围的酒店因此,我们将地标、交通枢纽和其他相关兴趣点(POI)分成了一个3级的优先级列表。高优先级的POI是主要的旅游景点(如阿格拉的泰姬陵)和城市内的交通枢纽(如新德里的英迪拉甘地国际机场)。这些地标默认在地图上显示。接下来是中优先级的POI,如市场、办公楼、主要的城际交通枢纽。最后是低优先级的POI,可能是公交车站、小型地铁站和其他较小的地标。这两个类别根据用户的缩放级别来显示。如果有人将地图放大到局部级别,那么他们可以看到中优先级的POI,如果他们再进一步放大,他们也可以看到低优先级的POI。地区指南许多用户访谈结果显示,用户会在我们的平台和谷歌搜索之间来回切换以确定最适合的旅游住宿。MMT还以地区指南的形式给用户提供丰富的信息,介绍果阿、泰国、迪拜等热门旅游目的地的情况。但当用户登陆列表页面查看搜索结果时,它会以一个强制性弹出窗口显示。结果,只有30%的用户会与弹出窗口交互,大多数人只是简单地关闭了弹窗,结果就是他们错过了相关信息,而这些信息有可能可以帮助他们在不离开我们平台的情况下决定旅行住宿。

地区指南底页为了解决这个问题,我们将地区指南信息整合到地图的主导航页面中,放置在底部。默认情况下,底页只有部分可见,用户可以通过滑动轻松地在地图视图和地区指南之间切换。我们选择这种方式是因为这样能让用户在体验乐趣的同时掌握探索的主动权。

06

最终成果

设计地图与其他挑战不同,因为它不是仅仅通过制作原型模拟就能解决的,它需要设计师和开发者合作,通过反复试验来获得正确的结果。重新设计的地图最初于2020年1月以A/B测试的方式与旧版本一起发布。2020年3月,它全面上线。但在疫情爆发后,旅游业的发展陷入了停滞。到了现在,今年的第三季度,随着各国重新开放旅游,我们看到了一些复苏的希望。然而,用户仍需一段时间才能像疫情前那样满怀热情地旅行。我们的产品团队分享了一些初步的见解,这些见解令人鼓舞 :1. 在2020年第三季度,我们发现,尽管与疫情之前的季度相比地图流量明显减少,但与之前的版本相比,地图的使用量略有上升。所以我们知道,地图入口点的可见度比之前提高了。2. 与从酒店列表页中筛选酒店的用户相比,使用了地图的用户预订他所访问过的酒店的可能性比前者高出35%。这验证了酒店位置的视觉概念可以帮助用户更快地选出候选酒店。这有助于我们确定地图下一步需要改进的点的优先级排序。我们仍在努力改进我们的地图和定位体验,而且还有很长的一段路要走!如果你正在计划近期旅行,一定要试试我们的新地图:)


ABOUT US


参考文章:查看链接 ↗

作者:Srishti Gupta

译者:太上老菌

为尊重版权和译者

转载请联系我们

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询