用户访问移动站点不仅消费内容,还会完成某些任务。就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务。移动用户界面(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 译言 译者:夏荷塘