移動設備上簡單交互的設計解決方案和展示

　　用戶訪問移動網站不僅僅是為了浏覽內容，而是要做成事情。以訂機票為例，用戶經常在航空公司的移動網站上做的事有：查詢航班狀態、查詢特定航班、搜索並預定機票。那麼移動互聯網用戶界面設計是怎樣支持任務完成呢?在移動網站上傳達信息和展示交互狀態的最優方式又是怎樣?帶著尋找移動設備簡單交互的最有設計方案的目的，我以查詢航班狀態為例來進行研究。希望我的分析能對這個主題有所貢獻。

　　交互：查詢航班狀態

　　旅行者可以通過確定出發日期，或者是輸入航班號，或者是出發城市和到達城市或是機場來查詢到航班狀態。聽起來夠簡單，對吧?分析這個任務，下面是查詢航班狀態所涉及到的步驟：

　　第一步——決定是用航班號還是用出發和到達城市來查詢。

　　第二步——如果用航班號，輸入航班號;如果用出發和到達城市，舊輸入出發和到達城市的名稱，或是它們的機場代碼。

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

　　第四步——提交表單。

　　要在網站上完成這些非常簡單。只要把兩個選擇都展示在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設計就是最好的，頁面設計顯得簡單清爽。但是，如我之前所提到的，用出發和到達城市查詢的人們比用航班號查詢的多得多，所以兩個選項都展示就顯得很沒有必要了。不過這兩個航空公司對於兩種搜索方式都是同等對待的。

　　American Airlines試圖用 and /or 把這兩種方式整合在一起，如圖5所示。JetBlue給兩種選擇都提供了旅行日期框，如圖6所示。注意兩個公司都把按城市搜索放在了航班號搜索之前。出於這一點考慮，我認為這兩個設計優於圖3和圖4所示的設計。雖然這兩個航空公司對待兩種選擇的方式仍是同等的，但他們對按城市查詢多加了一點點權重。

　　圖5——在American Airline的移動網站上查詢航班

　　圖6 在JetBlue的移動網站上查詢航班

　　Southwest則和前面的幾個例子都截然不同，如下：

　　他們不僅讓通過城市查詢的選擇更顯著，而且還設為必須字段。這個解決方案仍允許用戶通過航班號來查詢航班狀態，但用戶必須首先輸入城市名稱。也許這是基於數據分析的商業決策，數據表明使用了有多少用戶查詢時只用航班號。

　　他們在用戶輸入城市名稱之後立即要求輸入飛行日期，特意把航班號查詢框推到頁面底部，很容易被忽略掉。在Southwest的網站上，焦點完全集中在按城市查詢。

　　圖7——在Southwest的移動網站上查詢航班

　　學習點

　　我們對用戶及其需求越是了解，就越能了解交互模式，解決方案也就設計得越好。在我分析這些網站時產生了一些想法。我認為在移動社區設計上可能是有用的，特別是考慮到設計和工作流呈現上。

　　為更為頻繁的交互進行優化

　　我們給頻繁使用的選擇給予越高的優先級，大部分用戶就越覺得設計好用。在本文的例子中，因為大部分用戶查詢航班是按城市的，所以最好給這個選擇以最高的優先級。

　　用短小的下拉列表而不是用單選按鈕來展示選項

　　用手指操作設備上要想點選單選按鈕是很難的。雖然JetBlue和Southwest都要求輸入日期，JetBlue要求用戶用單選框來選擇特定日期，而Southwest則用一個短的下拉列表，使得交互更方便。

　　最少的文本和引導

　　用戶想要辦事的時候不會花很多時間讀文本。引導詞實際上還可能妨礙了交互。最好的做法就是讓設計盡可能好用，所以引導詞是不必要的。注意在這方面Lufhansa和Southwest設計的不同。

　　要求的輸入最少

　　與其要用戶輸入城市名稱或機場代碼，不如讓他們從下拉列表中選取。減少了用戶在移動設備上的打字量，會讓輸入更為方便也幫助減少了使用錯誤。注意在American Airlines和Southwest在這方面設計的不同——後者需要的打字更少。

　　我要問你的問題來了：你覺得以上這些例子中哪個設計最好，你覺得在移動設備上的簡單交互設計解決方案——例如查詢航班狀態——還有哪些方面可以改善?

　　本文編譯自fries418，原文地址。

　　譯文出處：學而時析之，轉載請注明出處鏈接。