当前位置:首页 > 经验学习 > 交互设计

移动设备的简单交互设计

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

用户访问移动站点不仅消费内容,还会完成某些任务。就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务。移动用户界面(UI)的设计是如何帮助用户完cheng(成)任务的呢?移动站点传达和展现交互的最佳方式又是什么呢?为了找出在移动设备上设计简单交互的最佳方法,我dui(对)航班状况查询的任务做了些调查。希望我的分析能阐ming(明)这个话题。
交互:查询航班状况
旅客查询航班的状况是从找出该航班开始的,可通过其起飞时间,加上航班号或出发地/到达地或降落机场等信息筛选出来。听起来很简单,对吧?分析这个任务得出了如下几个步骤:
● 第一步—决定是用航班号还是出fa(发)地/到达地来查询。
● 第二步—如果是用航班号查询,则输入航班号码。如果是查询出发地/到达地,ze(则)输入该城市名字或其机场代号。
● 第三步—输入航班日期。
● 第四步—提交表单。
在webshang(上)完成这个任务很容易。把两个选项都呈现在页面上,让用户通过其知道的Xin(信)息(航班号或出发地/到达地)来完成。输入一个航班号比输入城市名或机场代码更容易,但用户更能记住的是航班城市,而不是机场代号或航班名。然而,下面这些有趣的细节你需要好好考虑:
● 你应该先问哪个?航班日期、航班号还是航班cheng(城)市?
● 哪个选项应该放在shou(首)位?航班号还是航班城市?
● 为了确保完整的工作流,不管用户是通过航班号或航班城市或机场代号来查询航班状态,你都要二次确认航班日期吗?
在web上查询航班状况
各航空公司的回答不尽相同。因此,他们查询航班状况的web页面也各有不同,可从图1和图2看出。但是这些差异对网站的用户体验并没有多大影响。通常,页面上有足够的空间容纳所有选项,让用户清晰明了地完成交互。
图1—United.com的航Ban(班)状况查询

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

在移动站点上查询航班状况
但是,这样简单的交互到了移动UI上就显得很笨拙了。触摸屏的小屏幕加上艰难的输入是影响移动用户体验的主要因素。由于各公司对这些貌似细微问题的理解不一样,该交互的移动UI也大相径庭。在移动设备上,这些差异对于查询航班状况的速度和成功率有很大影响。
法航De(的)起始页上有两ge(个)选项—航班或城市,要用户选择一个之后才能进一步操作,如图3所shi(示)。这样简化了UI,但是多增加了一步。汉莎航空的起始页则放了这两个选项,允许用户输入城市名或航班号,如图4所示。该页面试图提供两个完整的工作流,所以页面上有两个航班日期控件和操作按钮,这样会增加页面zhang(长)度并且会把第二个按钮(search flight)置于第二屏。
tu(图)3—法航移动站点的航班状况查询

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

法航的例子是一个时间堆栈型(stacked-in-time)的设计,而汉莎航空的例子则是空间邻近型(proximity in space),我在之前的专栏里ceng(曾)写过《移动站点设计:特殊考虑》。(也可看看Francisco Inchauste的文章《UX里最脏的词:复za(杂)》。)如果用户使用这两个选项(航班出发地/Dao(到)达地或航班号)的频率差不多,法航的时间堆栈型设计最好用,页面简洁。然而,就像我之前说过的,很多人使用航班的出发地/到达地而不是航班号来查询航班状况。所以,似乎没必把两个选项都列出来。但是,这两个航空公司都认为航班号查询和航班城市查询一样重要。
美guo(国)航空想通过使用and/or来混合这两种方式,如图5所示。捷蓝航空的两个选项都有航班日期按钮,如图6所示。但是注意到美国航空和捷蓝航空都是先放城市后放航班号。因此,仅仅是因为这个设计策略,我认为这两个设计优于图3和图4,后者是平等对待这两个选项,而前者更侧重于航班城市。
图5—美国航空移动站点的航班状况查询

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

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: