移动设备上简单交互的设计和展示

摘要:以订机票为例,用户经常在航空公司的移动网站上做的事有:查询航班状态、查询特定航班、搜索并预定机票。那么移动互联网用户界面设计是怎样支持任务完成呢?

用户访问移动网站不仅仅是为了浏览内容,而是要做成事情。以订机票为例,用户经常在航空公司的移动网站上做的事有:查询航班状态、查询特定航班、搜索并预定机票。那么移动互联网用户界面设计是怎样支持任务完成呢?在移动网站上传达信息和展示交互状态的最优方式又是怎样?带着寻找移动设备简单交互的最有设计方案的目的,我以查询航班状态为例来进行研究。希望我的分析能对这个主题有所贡献。

交互:查询航班状态

旅行者可以通过确定出发日期,或者是输入航班号,或者是出发城市和到达城市或是机场来查询到航班状态。听起来够简单,对吧?分析这个任务,下面是查询航班状态所涉及到的步骤:

第一步——决定是用航班号还是用出发和到达城市来查询。

第二步——如果用航班号,输入航班号;如果用出发和到达城市,旧输入出发和到达城市的名称,或是它们的机场代码。

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

第四步——提交表单。

要在网站上完成这些非常简单。只要把两个选择都展示在web页面上,用户就能根据他们手头有的关于航班的信息来往前推进了。虽然输入航班号比输入城市名称或机场代码更方便,但用户通常记城市名称更清楚,而不是机场代码或者航班号。不过有些细节你应该考虑到:

你应该先问哪一个问题:旅行日期,还是航班号,还是城市?

哪个选择应最先呈现:航班号或城市?

你是否应该问两次旅行日期以确保工作流完整,不管用户是通过哪种方式(航班号、城市、机场代码)来查询状态?

在Web上查询航班状态

不同航空公司对此问题的解决方式不同。结果就是,它们的网页大相径庭,如图1和图2所示。不过,这些不同对于网站用户的体验影响不大。通常,在网页上有足够的空间展示所有的选择,让用户能够在毫无困惑的情况下完成交互。

图1——在United.com上查询航班

图2——在Airfrance.us上查询航班

在移动网站上查询航班状态

然而,当使用移动用户界面时,在web上原本方便的交互却变得很麻烦。屏幕尺寸小、用触摸屏输入难是影响用户体验的主要影响因素。由于航空公司们对这个看起来很不起眼的问题的理解不同,每家做的这个交互的移动用户界面可能会大不相同。并且在移动设备上,这些不同将会影响快速并成功查询航班状态的方便性。

Air France在第一屏展示了两个选择——通过航班号或通过城市查询,要求用户从中选一,如图3所示。这简化了用户界面,但是却增加了额外的一步。Lufthansa在首页就展示了两个选择,让用户就在第一屏输入城市名称或航班号,如图4所示。这页面想要提供两个完整的工作流,还放了旅行日期输入框和按钮,这就增加了页面的长度,而且把第二个按钮推到了滚动条下。

图3——在Air France的移动网站上查询航班状态

图4——在Lufthansa的移动网站上查询航班状态

Air France的例子是一个Stacked-in-time型的设计,而Lufthansa的例子则充分使用了空间的邻近性,我之前在UXMatters的一个专栏里提到过,Designing for the Mobile Web:Special Considerations(参见Francisco Inchauste的文章 The Dirtiest Word in UX: Complexity)。如果用户使用这两个选择(出发和到达城市或航班号)是同样频繁,那么Air France的stacked-in-time设计就是最好的,页面设计显得简单清爽。但是,如我之前所提到的,用出发和到达城市查询的人们比用航班号查询的多得多,所以两个选项都展示就显得很没有必要了。不过这两个航空公司对于两种搜索方式都是同等对待的。