UI/UX案例分析 设计一个更好的电影购票体验

去电影院看电影是一个有趣的体验,但在许多应用程序和网站中订票时,往往给人的感觉像是一个漫长而又令人沮丧的导航过程。让我们来看看如何来优化这个过程吧!

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具

网站订票app

去电影院看电影是一个有趣的体验,但在许多应用程序和网站中订票时,往往给人的感觉像是一个漫长而又令人沮丧的导航过程。

今天我给出的解决方案

在浏览不同的电影网站之后,我发现其中许多人都遇到了主要的用户体验问题。 我选择把重点放在研究我国最大电影公司之一的电影之城。对他们网页及应用程序的分析可以作为我解决此问题的基础。我下载并安装了他们的iOS应用程序,看看它是如何与我们进行交互的。

电影之城APP的流程图

用户场景

为了构建逼真的用户场景,我调查了10个年龄在22到32岁之间的人,他们每两个月至少会去一次电影院。我对他们最近一次在购票过程中发现的问题集中做了一个总结。主要内容如下:

1. 其中的6人说他们想去看一些特定的电影,因此他们会寻找合适的时间去观看。

2. 其中的2人说他们会在每周固定的时间去电影院,因此他们会寻找当天最好看的电影。

3. 其中的1人说她会在当周的某一天晚上去电影院。

4. 他们所有人都会选择去他们生活或工作区域附近的电影院观看电影。


用户痛点

我对自己的使用场景做了一些假设,为了使用数据支持/驳斥我的假设,我在调查中增加了一些其它问题。以此来帮助我找到主要和次要的问题。

1.目前的应用程序并不支持任何用户场景。它会强制用户提供所有确切的细节(如:特定的电影,特定的剧院,特定的日期,特定时间段),然后再查看是否有可用的筛选。

2.10人中有6人抱怨订票过程花费的时间太长。

3.10人中有4人抱怨在节假日买不到票。

4.10人中有2人抱怨需要支付一些不想支付的费用。

5.还有一些人抱怨购票应用程序反应太慢或有bug。

建议解决措施

该解决方案考虑了两个主要的用户场景。我将选项分为按电影搜索或按时间搜索。我试图在购票流程的每个阶段提供相关的筛选功能,并提供额外的选择作为智能筛选选项。

建议解决措施

解决方案

1. 区分不同的用户场景

这两个主要的用户场景是那些正在寻找合适的时间观看新的正义联盟电影(顺便说一句,电影还不错)的人,以及在周三下午寻找一部好看电影的人。这些只是具体的例子,但它们有助于我们理解用户期望看到的内容的是什么。

通过这些信息,可以轻松地将浏览功能拆分为“按标题搜索”和“按时间搜索”。 这样做,可以使用户界面更简单,更容易导航。

区分不同的用户场景

2. 简化字段

在搜索一部在特定时间段观看的好电影时,并不需要日期选择器,因为这些票只在下一周(我选择的真实示例网站)出售,并每天更新。在这个阶段并不是真的需要选择确切的时间。用户的任务是选择一部电影和某一天/某一天中的某一时间。我选择使用大按钮来展示所有的选择,这样大家都很容易理解,而且很难错过。 每一个选项都会过滤一些电影,并突出显示个人选择时间段的电影。

简化字段

3. 帮助用户做出更好的选择

根据调查显示,一些用户的挫折来于在他们选择了正确的放映时间+电影后,才意识到没有可选的座位。我可以帮助他们做出正确的选择来解决这个问题。在每次删选后的电影(点击付款,将打开一个“选择座位”对话框,付款成功后生成订票)旁边,我会用一个图标显示还有多少个座位可选。

帮助用户做出更好的选择

这里是整合UI后的界面

整合UI后的界面

从左至右:电影页面(来于搜索标题),选择座位页面,电影页面(来于搜索时间)

4. 付款

一旦用户选择座位,我选择立即显示付款按钮。价格应该是透明的,并预先显示,这样不会让用户在真实付款时感到任何惊讶。

我不想重塑结帐过程,我相信这个问题可以通过Apple Pay或Google Wallet完美解决。在真正的应用程序中,将需要接入更多的可选择的付款方式。

在付款界面,我还选择增加门票的插图,使用户感觉像是给自己的奖励(电影票)。 我相信这会使这个过程更有意义。

付款界面

测试

我想进行一个小的测试,看看我的解决方案是否运作良好。所以我使用这些屏幕,并用InVision给我设想的应用程序建立了一个原型。我将制作的原型分享给3个从未见过该应用的朋友。我告诉他们:

1. 尝试购买2张今天的“刀锋跑者2049”的票,并选择购票人数最少的放映场次。

2. 一旦操作完成,再购买2张今晚任意的电影票。

测试

他们都成功地做到了这一点,但是这并不能说明很多问题,这只意味着它不是太复杂。这是一个在很少人身上进行的MVP测试,在现实世界中还有很多需要考虑和把控的事情。

如果电影公司对用户体验有更多的认识,我相信会有更多的人去电影院。也许随着这个变化,下一次会发布一个新的,酷的,独立的电影院,我个人希望能找到一些合伙人。

原文作者:Ariel Verber

原文地址:https://medium.muz.li/ui-ux-case-study-designing-a-better-cinema-experience-29abc7cfb94f

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表