案例, 设计

围绕业务场景做改版:途牛酒店PC站改版经验(下)

三、围绕业务场景做改版

打造预订绿色通道

借助「模块+区块」的理念布局的页面,拥有更加清晰的结构,也能够让我们更加灵活地针对业务场景优化页面内容布局,从而帮助用户更好地挑选、预订酒店。

对于途牛酒店而言,引导用户预订下单是我们的唯一重要指标。通过改版,我们希望能够为 用户提供一条预订的绿色通道,让用户预订路线一路畅通无阻。从首页到列表页、详情页再到预订页的过程,用户的注意力是逐渐集中的,用户的预订意向也是逐渐提升,相对应的,我们的页面也通过将信息的清晰度逐渐提高来满足用户获取信息的需求。但是,我们预订相关的功能在页面中的位置却逐渐下调,那是因为当用户在从浏览到预订的过程中,随着预订意愿逐渐清晰,我们便不需要着重强调预订路线的位置,而是通过在列表页强化筛选功能来帮助用户更容易找到心仪的酒店,而在详情页中,我们通过呈现更多用户可能感兴趣的酒店信息来帮助用户做决策。

复杂功能简单化

为了实现我们改版后功能简单的定位,我们对业务中几个过去要用复杂形式呈现的功能进行了特殊的考虑和优化,其中一个例子就是酒店详情页中的复合筛选组件。

在用户进入详情页时,会产生房型筛选的需求。我们吸收了移动端设计的思路,放弃了原先利用表头来作筛选这种不直观的形式,转而采用了一种复合型的筛选组件。默认状态下,当鼠标悬浮到对应筛选项时会弹出浮层菜单,用户选择筛选条件后,筛选组件会变成标签的形式展示用户已选的条件,如果用户对筛选条件不满意,不仅可以再次通过菜单选择,还能够通过「X」按钮一键清空筛选条件。通过这样的做法,我们将原先需要三种不同形式的组件构成的功能转变为同一种形式,不论是视觉上还是功能上都为用户提供了更简单、高效的筛选体验。 另外一个例子则是我们的「限时优惠区块」的设计,在特定的情形下某些报价无法匹配房型,这类报价由于缺少房型信息(比如房间基本情况、房间照片等)通常没有竞争力,这种情况在我们的APP中也是以单个报价直接呈现,而此次改版我们重新对问题进行了审视。

在与产品经理沟通后,我们决定刚好利用这些房型的临时性和价格优势,将原本难以卖出的报价包装成「限时优惠」的形式。打造差异化的设计和配色来打造让用户产生视觉记忆的特殊区块,只有比用户入住期间所有房型报价的起价要底时,未匹配房型的优惠报价才会展示。 

非模态弹窗的应用

我们希望为用户打造一个衬手的工具,所以任何影响用户流畅操作的功能设计都应该修改或摈除。因此,我们在设计中尽可能地减少中断用户操作的模态弹窗,转而使用气泡、半透明浮层等非模态形式给用户带来行云流水般的体验。 

在订单详情页中,用户可以在发票模块中添加或修改发票信息,通常的做法是弹出窗口或打开新窗口来让用户填写,这样的做法一来打断用户的思路,二来会影响填写的效率。而我们在对这一功能进行设计时,充分利用了「模块」的优势,通过「修改发票」按钮将「发票模块」无缝切换为「发票修改模块」。这一设计让用户能够直接在订单页面内完成所有操作,在编辑的过程中不影响用户查看页面内的其他信息,实现了「所见即所得」的操作体验。

通过引导创造闭环

A 修改提示文案 

我们通过对文案风格的打磨,减少用户的负面情绪和挫败感,降低文案中的消极内容,把重心放在鼓励用户参与解决问题的方向。以上示例即是此次项目中对酒店不可订的错误提示进行的优化,仅仅对文案进行非常细微的改动,却能改变向用户传递的讯息。高亮展示操作建议,也能让整段文案的重心向解决方案侧偏移,让用户最先感受到的是「情况尽在掌控中」的安全感,而非由程序错误带来的沮丧和惊愕。

B 增加简短明确的引导提示

当用户遇到一些复杂的错误时,如果解决方法有多条,就不再适用上文中单纯的文案描述了。在我们实际场景中,也有诸如酒店没有评价、没有搜索到酒店等情况,这时,我们通过插画的形式将建议操作展示出来。 

上图是对点评区域空状态的优化案例,在原先的版本中,冰冷而耿直的提示无疑为这家酒店判了死刑,因为对于酒店产品而言,用户评价是用户判断酒店品质非常重要的标准,没有评价意味着酒店是一张白纸,我们要如何尽可能的让用户忽视这件事,甚至鼓励用户做第一个吃螃蟹的人呢?

很幸运的是,途牛酒店为所有预订酒店的用户提供了点评返现的福利,我们决定利用这个福利作为宣传点,将错误提示包装成一个鼓励用户点评拿返现的宣传文案。同时,为了让用户感到更加友好和亲切,我们还将插图的风格从抽象化的图标修改为手绘人物插画。

C 增加酒店推荐

在酒店详情页内,如果遇到酒店无法订购或是其它一些问题的时候,用户需要返回列表页重新挑选酒店,这样的操作对用户而言无疑是非常不悦的。 

我们通过在错误提示下方增加相关酒店的推荐,帮助用户减少在列表页与详情页之间的切换,同时也降低了用户对酒店无房、酒店不可订状态的反感,不让页面成为死胡同,从而提高转化率。

四、结语

在此次改版过程中,我们在结构上将产品以页面、模块、区块和组件逐级细分,从而得以灵活地调整页面布局。在挖掘用户需求的基础上,结合业务需求,探索出一套围绕业务场景需求作改版的思路。

最后,欢迎大家通过 hotel.tuniu.com 体验我们的产品,并为我们提出宝贵意见,我们将持续思考和优化,为用户提供更多、更好的产品体验。

没有评论

(36 篇文章)

一个视觉设计师,一个喜欢科技、数码,也喜欢音乐、电影,热爱生活的好青年。

查看该作者全部文章

留下你的看法

Your email address will not be published. Required fields are marked *