数极客首页

移动设备的简单交互设计

用户访问移动站点不仅消费内容,还会完成某些任务。就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务。移动用户界面(UI)的设计是如何帮助用户完成任务的呢?移动站点传达和展现交互的最佳方式又是什么呢?为了找出在移动设备上设计简单交互的最佳方法,我对航班状况查询的任务做了些调查。希望我的分析能阐明这个话题。

交互:查询航班状况

旅客查询航班的状况是从找出该航班开始的,可通过其起飞时间,加上航班号或出发地/到达地或降落机场等信息筛选出来。听起来很简单,对吧?分析这个任务得出了如下几个步骤:

● 第一步—决定是用航班号还是出发地/到达地来查询。

● 第二步—如果是用航班号查询,则输入航班号码。如果是查询出发地/到达地,则输入该城市名字或其机场代号。

● 第三步—输入航班日期。

● 第四步—提交表单。

在web上完成这个任务很容易。把两个选项都呈现在页面上,让用户通过其知道的信息(航班号或出发地/到达地)来完成。输入一个航班号比输入城市名或机场代码更容易,但用户更能记住的是航班城市,而不是机场代号或航班名。然而,下面这些有趣的细节你需要好好考虑:

● 你应该先问哪个?航班日期、航班号还是航班城市?

● 哪个选项应该放在首位?航班号还是航班城市?

●  为了确保完整的工作流,不管用户是通过航班号或航班城市或机场代号来查询航班状态,你都要二次确认航班日期吗?

在web上查询航班状况

各航空公司的回答不尽相同。因此,他们查询航班状况的web页面也各有不同,可从图1和图2看出。但是这些差异对网站的用户体验并没有多大影响。通常,页面上有足够的空间容纳所有选项,让用户清晰明了地完成交互。

图1—United.com的航班状况查询

移动设备的简单交互设计

图2—Airfrance.us的航班状况查询

移动设备的简单交互设计

在移动站点上查询航班状况

但是,这样简单的交互到了移动UI上就显得很笨拙了。触摸屏的小屏幕加上艰难的输入是影响移动用户体验的主要因素。由于各公司对这些貌似细微问题的理解不一样,该交互的移动UI也大相径庭。在移动设备上,这些差异对于查询航班状况的速度和成功率有很大影响。

法航的起始页上有两个选项—航班或城市,要用户选择一个之后才能进一步操作,如图3所示。这样简化了UI,但是多增加了一步。汉莎航空的起始页则放了这两个选项,允许用户输入城市名或航班号,如图4所示。该页面试图提供两个完整的工作流,所以页面上有两个航班日期控件和操作按钮,这样会增加页面长度并且会把第二个按钮(search flight)置于第二屏。

图3—法航移动站点的航班状况查询

移动设备的简单交互设计

图4—汉莎航空移动站点的航班状况查询

移动设备的简单交互设计

法航的例子是一个时间堆栈型(stacked-in-time)的设计,而汉莎航空的例子则是空间邻近型(proximity in space),我在之前的专栏里曾写过《移动站点设计:特殊考虑》。(也可看看Francisco Inchauste的文章《UX里最脏的词:复杂》。)如果用户使用这两个选项(航班出发地/到达地或航班号)的频率差不多,法航的时间堆栈型设计最好用,页面简洁。然而,就像我之前说过的,很多人使用航班的出发地/到达地而不是航班号来查询航班状况。所以,似乎没必把两个选项都列出来。但是,这两个航空公司都认为航班号查询和航班城市查询一样重要。

美国航空想通过使用and/or来混合这两种方式,如图5所示。捷蓝航空的两个选项都有航班日期按钮,如图6所示。但是注意到美国航空和捷蓝航空都是先放城市后放航班号。因此,仅仅是因为这个设计策略,我认为这两个设计优于图3和图4,后者是平等对待这两个选项,而前者更侧重于航班城市。

图5—美国航空移动站点的航班状况查询

图6—捷蓝航空移动站点的航班状况查询

移动设备的简单交互设计

西南航空做了一些跟前面几个案例不太一样的事,具体如下:

他们不仅更看重通过城市查询状况的选项,更是将其设为必选项。这个解决方案仍然允许用户通过航班号查询,但是用户必须要先选择航班城市才行。或许这是一个基于分析数据的商业决策,该分析反映了只用航班号查询的用户比例。

他们把航班时间放在航班城市后,故意将航班号的输入框放到了表单底部,使其很容易被忽略。在西南航空的站点上,焦点是用航班城市查询。

图7—西南航空移动站点的航班状况查询

移动设备的简单交互设计

心得

我们越是理解用户的需求和交互模式,解决方案就会越好。我通过对这些网站的分析得到了一些想法。我认为它们对专注移动设计的人有帮助,尤其是设计和展示工作流方面的。

● 为更频繁的交互做优化

更频繁使用的选项的优先级越高,大多数用户就越发觉得该设计好用。在我们的例子里,因为大多数用户是通过城市查询的,最好给这个选项更多的优先级。

● 使用一个短的下拉列表而不是单选按钮来呈现选项

当用户用手指操作设备时,选中单选按钮是很困难的。尽管捷蓝航空和西南航空都有航班时间选项,捷蓝航空要求用户从三个单选项中选一个特定的日期,而西南航空则用一个短的下拉列表,使得交互更容易些。

● 减少文本和说明

用户完成任务时不会花很多时间去阅读文字。而说明则可能会阻碍交互。最好的方法就是尽量从简从易地设计,这样就根本不需要说明了。可以比较汉莎航空和西南航空在此设计上的差异。

● 尽量少的输入

与其让用户输入城市名或机场代号,不如让他们在下拉列表中选择。减少用户必须在移动设备上的输入数量,让数据录入更容易的同时也会减少用户的错误。比较美国航空和西南航的设计差异,后者需要更少的输入。

所以我要问的问题是:在我谈到的这些案例中,你最喜欢哪个设计?你觉得移动设备的简单交互设计(如查询航班状况)还能如何改善?

via 译言 译者:夏荷塘

 

给大家推荐我国新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是用户行为分析领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章