移动设备上简单交互的设计解决方案和展示
移动设备上简单交互的设计解决方案和展示
发布时间:2015-05-12 来源:查字典编辑
摘要:用户访问移动网站不仅仅是为了浏览内容,而是要做成事情。以订机票为例,用户经常在航空公司的移动网站上做的事有:查询航班状态、查询特定航班、搜索...

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

交互:查询航班状态

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

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

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

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

第四步——提交表单。

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

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

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

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

在Web上查询航班状态

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

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

移动设备上简单交互的设计解决方案和展示1

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

移动设备上简单交互的设计解决方案和展示2

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

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

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

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

移动设备上简单交互的设计解决方案和展示3

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

移动设备上简单交互的设计解决方案和展示4

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设计就是最好的,页面设计显得简单清爽。但是,如我之前所提到的,用出发和到达城市查询的人们比用航班号查询的多得多,所以两个选项都展示就显得很没有必要了。不过这两个航空公司对于两种搜索方式都是同等对待的。

American Airlines试图用 and /or 把这两种方式整合在一起,如图5所示。JetBlue给两种选择都提供了旅行日期框,如图6所示。注意两个公司都把按城市搜索放在了航班号搜索之前。出于这一点考虑,我认为这两个设计优于图3和图4所示的设计。虽然这两个航空公司对待两种选择的方式仍是同等的,但他们对按城市查询多加了一点点权重。

图5——在American Airline的移动网站上查询航班

移动设备上简单交互的设计解决方案和展示5

图6 在JetBlue的移动网站上查询航班

移动设备上简单交互的设计解决方案和展示6

Southwest则和前面的几个例子都截然不同,如下:

他们不仅让通过城市查询的选择更显著,而且还设为必须字段。这个解决方案仍允许用户通过航班号来查询航班状态,但用户必须首先输入城市名称。也许这是基于数据分析的商业决策,数据表明使用了有多少用户查询时只用航班号。

他们在用户输入城市名称之后立即要求输入飞行日期,特意把航班号查询框推到页面底部,很容易被忽略掉。在Southwest的网站上,焦点完全集中在按城市查询。

图7——在Southwest的移动网站上查询航班

移动设备上简单交互的设计解决方案和展示7

学习点

我们对用户及其需求越是了解,就越能了解交互模式,解决方案也就设计得越好。在我分析这些网站时产生了一些想法。我认为在移动社区设计上可能是有用的,特别是考虑到设计和工作流呈现上。

为更为频繁的交互进行优化

我们给频繁使用的选择给予越高的优先级,大部分用户就越觉得设计好用。在本文的例子中,因为大部分用户查询航班是按城市的,所以最好给这个选择以最高的优先级。

用短小的下拉列表而不是用单选按钮来展示选项

用手指操作设备上要想点选单选按钮是很难的。虽然JetBlue和Southwest都要求输入日期,JetBlue要求用户用单选框来选择特定日期,而Southwest则用一个短的下拉列表,使得交互更方便。

最少的文本和引导

用户想要办事的时候不会花很多时间读文本。引导词实际上还可能妨碍了交互。最好的做法就是让设计尽可能好用,所以引导词是不必要的。注意在这方面Lufhansa和Southwest设计的不同。

要求的输入最少

与其要用户输入城市名称或机场代码,不如让他们从下拉列表中选取。减少了用户在移动设备上的打字量,会让输入更为方便也帮助减少了使用错误。注意在American Airlines和Southwest在这方面设计的不同——后者需要的打字更少。

我要问你的问题来了:你觉得以上这些例子中哪个设计最好,你觉得在移动设备上的简单交互设计解决方案——例如查询航班状态——还有哪些方面可以改善?

本文编译自fries418,原文地址。

译文出处:学而时析之,转载请注明出处链接。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新交互设计教程学习
热门交互设计教程学习
网页设计子分类