為了找出在移動(dòng)設(shè)備上設(shè)計(jì)簡(jiǎn)單交互的***方法，我對(duì)航班狀況查詢的任務(wù)做了些調(diào)查。希望我的分析能闡明這個(gè)話題。

交互：查詢航班狀況

旅客查詢航班的狀況是從找出該航班開始的，可通過其起飛時(shí)間，加上航班號(hào)或出發(fā)地/到達(dá)地或降落機(jī)場(chǎng)等信息篩選出來。聽起來很簡(jiǎn)單，對(duì)吧？分析這個(gè)任務(wù)得出了如下幾個(gè)步驟：  

◆***步—決定是用航班號(hào)還是出發(fā)地/到達(dá)地來查詢。

◆第二步—如果是用航班號(hào)查詢，則輸入航班號(hào)碼。如果是查詢出發(fā)地/到達(dá)地，則輸入該城市名字或其機(jī)場(chǎng)代號(hào)。

◆第三步—輸入航班日期。

◆第四步—提交表單。

在web上完成這個(gè)任務(wù)很容易。把兩個(gè)選項(xiàng)都呈現(xiàn)在頁面上，讓用戶通過其知道的信息（航班號(hào)或出發(fā)地/到達(dá)地）來完成。輸入一個(gè)航班號(hào)比輸入城市名或機(jī)場(chǎng)代碼更容易，但用戶更能記住的是航班城市，而不是機(jī)場(chǎng)代號(hào)或航班名。然而，下面這些有趣的細(xì)節(jié)你需要好好考慮：  

◆你應(yīng)該先問哪個(gè)？航班日期、航班號(hào)還是航班城市？

◆哪個(gè)選項(xiàng)應(yīng)該放在首位？航班號(hào)還是航班城市？

◆ 為了確保完整的工作流，不管用戶是通過航班號(hào)或航班城市或機(jī)場(chǎng)代號(hào)來查詢航班狀態(tài)，你都要二次確認(rèn)航班日期嗎？

在web上查詢航班狀況  

各航空公司的回答不盡相同。因此，他們查詢航班狀況的web頁面也各有不同，可從圖1和圖2看出。但是這些差異對(duì)網(wǎng)站的用戶體驗(yàn)并沒有多大影響。通常，頁面上有足夠的空間容納所有選項(xiàng)，讓用戶清晰明了地完成交互。
 

圖1—United.com的航班狀況查詢  

圖2—Airfrance.us的航班狀況查詢

在移動(dòng)站點(diǎn)上查詢航班狀況 但是，這樣簡(jiǎn)單的交互到了移動(dòng)UI上就顯得很笨拙了。觸摸屏的小屏幕加上艱難的輸入是影響移動(dòng)用戶體驗(yàn)的主要因素。由于各公司對(duì)這些貌似細(xì)微問題的理解不一樣，該交互的移動(dòng)UI也大相徑庭。在移動(dòng)設(shè)備上，這些差異對(duì)于查詢航班狀況的速度和成功率有很大影響。

法航的起始頁上有兩個(gè)選項(xiàng)—航班或城市，要用戶選擇一個(gè)之后才能進(jìn)一步操作，如圖3所示。這樣簡(jiǎn)化了UI，但是多增加了一步。漢莎航空的起始頁則放了這兩個(gè)選項(xiàng)，允許用戶輸入城市名或航班號(hào)，如圖4所示。該頁面試圖提供兩個(gè)完整的工作流，所以頁面上有兩個(gè)航班日期控件和操作按鈕，這樣會(huì)增加頁面長(zhǎng)度并且會(huì)把第二個(gè)按鈕（search flight）置于第二屏。

圖3—法航移動(dòng)站點(diǎn)的航班狀況查詢  

圖4—漢莎航空移動(dòng)站點(diǎn)的航班狀況查詢

法航的例子是一個(gè)時(shí)間堆棧型（stacked-in-time）的設(shè)計(jì)，而漢莎航空的例子則是空間鄰近型（proximity in space），我在之前的專欄里曾寫過《移動(dòng)站點(diǎn)設(shè)計(jì)：特殊考慮》。（也可看看Francisco Inchauste的文章《UX里最臟的詞：復(fù)雜》。）如果用戶使用這兩個(gè)選項(xiàng)（航班出發(fā)地/到達(dá)地或航班號(hào)）的頻率差不多，法航的時(shí)間堆棧型設(shè)計(jì)***用，頁面簡(jiǎn)潔。然而，就像我之前說過的，很多人使用航班的出發(fā)地/到達(dá)地而不是航班號(hào)來查詢航班狀況。所以，似乎沒必把兩個(gè)選項(xiàng)都列出來。但是，這兩個(gè)航空公司都認(rèn)為航班號(hào)查詢和航班城市查詢一樣重要。

美國(guó)航空想通過使用and/or來混合這兩種方式，如圖5所示。捷藍(lán)航空的兩個(gè)選項(xiàng)都有航班日期按鈕，如圖6所示。但是注意到美國(guó)航空和捷藍(lán)航空都是先放城市后放航班號(hào)。因此，僅僅是因?yàn)檫@個(gè)設(shè)計(jì)策略，我認(rèn)為這兩個(gè)設(shè)計(jì)優(yōu)于圖3和圖4，后者是平等對(duì)待這兩個(gè)選項(xiàng)，而前者更側(cè)重于航班城市。

圖5—美國(guó)航空移動(dòng)站點(diǎn)的航班狀況查詢  

圖6—捷藍(lán)航空移動(dòng)站點(diǎn)的航班狀況查詢

西南航空做了一些跟前面幾個(gè)案例不太一樣的事，具體如下：  

他們不僅更看重通過城市查詢狀況的選項(xiàng)，更是將其設(shè)為必選項(xiàng)。這個(gè)解決方案仍然允許用戶通過航班號(hào)查詢，但是用戶必須要先選擇航班城市才行?；蛟S這是一個(gè)基于分析數(shù)據(jù)的商業(yè)決策，該分析反映了只用航班號(hào)查詢的用戶比例。

他們把航班時(shí)間放在航班城市后，故意將航班號(hào)的輸入框放到了表單底部，使其很容易被忽略。在西南航空的站點(diǎn)上，焦點(diǎn)是用航班城市查詢。

圖7—西南航空移動(dòng)站點(diǎn)的航班狀況查詢  

心得  

我們?cè)绞抢斫庥脩舻男枨蠛徒换ツＪ?，解決方案就會(huì)越好。我通過對(duì)這些網(wǎng)站的分析得到了一些想法。我認(rèn)為它們對(duì)專注移動(dòng)設(shè)計(jì)的人有幫助，尤其是設(shè)計(jì)和展示工作流方面的。  

◆為更頻繁的交互做優(yōu)化

更頻繁使用的選項(xiàng)的優(yōu)先級(jí)越高，大多數(shù)用戶就越發(fā)覺得該設(shè)計(jì)好用。在我們的例子里，因?yàn)榇蠖鄶?shù)用戶是通過城市查詢的，***給這個(gè)選項(xiàng)更多的優(yōu)先級(jí)。

◆使用一個(gè)短的下拉列表而不是單選按鈕來呈現(xiàn)選項(xiàng)

當(dāng)用戶用手指操作設(shè)備時(shí)，選中單選按鈕是很困難的。盡管捷藍(lán)航空和西南航空都有航班時(shí)間選項(xiàng)，捷藍(lán)航空要求用戶從三個(gè)單選項(xiàng)中選一個(gè)特定的日期，而西南航空則用一個(gè)短的下拉列表，使得交互更容易些。  

◆減少文本和說明

用戶完成任務(wù)時(shí)不會(huì)花很多時(shí)間去閱讀文字。而說明則可能會(huì)阻礙交互。***的方法就是盡量從簡(jiǎn)從易地設(shè)計(jì)，這樣就根本不需要說明了?？梢员容^漢莎航空和西南航空在此設(shè)計(jì)上的差異。

◆盡量少的輸入

與其讓用戶輸入城市名或機(jī)場(chǎng)代號(hào)，不如讓他們?cè)谙吕斜碇羞x擇。減少用戶必須在移動(dòng)設(shè)備上的輸入數(shù)量，讓數(shù)據(jù)錄入更容易的同時(shí)也會(huì)減少用戶的錯(cuò)誤。比較美國(guó)航空和西南航的設(shè)計(jì)差異，后者需要更少的輸入。

所以我要問的問題是：在我談到的這些案例中，你最喜歡哪個(gè)設(shè)計(jì)？你覺得移動(dòng)設(shè)備的簡(jiǎn)單交互設(shè)計(jì)（如查詢航班狀況）還能如何改善？