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

交互：查詢航班狀態(tài)

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

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

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

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

第四步——提交表單。

要在網(wǎng)站上完成這些非常簡單。只要把兩個選擇都展示在web頁面上，用戶就能根據(jù)他們手頭有的關(guān)于航班的信息來往前推進了。雖然輸入航班號比輸入城市名稱或機場代碼更方便，但用戶通常記城市名稱更清楚，而不是機場代碼或者航班號。不過有些細節(jié)你應該考慮到：

你應該先問哪一個問題：旅行日期，還是航班號，還是城市？

哪個選擇應最先呈現(xiàn)：航班號或城市？

你是否應該問兩次旅行日期以確保工作流完整，不管用戶是通過哪種方式（航班號、城市、機場代碼）來查詢狀態(tài)？

在Web上查詢航班狀態(tài)

不同航空公司對此問題的解決方式不同。結(jié)果就是，它們的網(wǎng)頁大相徑庭，如圖1和圖2所示。不過，這些不同對于網(wǎng)站用戶的體驗影響不大。通常，在網(wǎng)頁上有足夠的空間展示所有的選擇，讓用戶能夠在毫無困惑的情況下完成交互。

圖1——在United.com上查詢航班

圖2——在Airfrance.us上查詢航班

在移動網(wǎng)站上查詢航班狀態(tài)

然而，當使用移動用戶界面時，在web上原本方便的交互卻變得很麻煩。屏幕尺寸小、用觸摸屏輸入難是影響用戶體驗的主要影響因素。由于航空公司們對這個看起來很不起眼的問題的理解不同，每家做的這個交互的移動用戶界面可能會大不相同。并且在移動設(shè)備上，這些不同將會影響快速并成功查詢航班狀態(tài)的方便性。

Air France在第一屏展示了兩個選擇——通過航班號或通過城市查詢，要求用戶從中選一，如圖3所示。這簡化了用戶界面，但是卻增加了額外的一步。Lufthansa在首頁就展示了兩個選擇，讓用戶就在第一屏輸入城市名稱或航班號，如圖4所示。這頁面想要提供兩個完整的工作流，還放了旅行日期輸入框和按鈕，這就增加了頁面的長度，而且把第二個按鈕推到了滾動條下。

圖3——在Air France的移動網(wǎng)站上查詢航班狀態(tài)

圖4——在Lufthansa的移動網(wǎng)站上查詢航班狀態(tài)

Air France的例子是一個Stacked-in-time型的設(shè)計，而Lufthansa的例子則充分使用了空間的鄰近性，我之前在UXMatters的一個專欄里提到過，Designing for the Mobile Web：Special Considerations（參見Francisco Inchauste的文章 The Dirtiest Word in UX： Complexity）。如果用戶使用這兩個選擇（出發(fā)和到達城市或航班號）是同樣頻繁，那么Air France的stacked-in-time設(shè)計就是最好的，頁面設(shè)計顯得簡單清爽。但是，如我之前所提到的，用出發(fā)和到達城市查詢的人們比用航班號查詢的多得多，所以兩個選項都展示就顯得很沒有必要了。不過這兩個航空公司對于兩種搜索方式都是同等對待的。

標簽： 交互設(shè)計 手機交互 產(chǎn)品設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。