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

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

旅行者可以通過(guò)確定出發(fā)日期，或者是輸入航班號(hào)，或者是出發(fā)城市和到達(dá)城市或是機(jī)場(chǎng)來(lái)查詢到航班狀態(tài)。聽(tīng)起來(lái)夠簡(jiǎn)單，對(duì)吧？分析這個(gè)任務(wù)，下面是查詢航班狀態(tài)所涉及到的步驟：

第一步——決定是用航班號(hào)還是用出發(fā)和到達(dá)城市來(lái)查詢。

第二步——如果用航班號(hào)，輸入航班號(hào)；如果用出發(fā)和到達(dá)城市，舊輸入出發(fā)和到達(dá)城市的名稱，或是它們的機(jī)場(chǎng)代碼。

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

第四步——提交表單。

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

你應(yīng)該先問(wèn)哪一個(gè)問(wèn)題：旅行日期，還是航班號(hào)，還是城市？

哪個(gè)選擇應(yīng)最先呈現(xiàn)：航班號(hào)或城市？

你是否應(yīng)該問(wèn)兩次旅行日期以確保工作流完整，不管用戶是通過(guò)哪種方式（航班號(hào)、城市、機(jī)場(chǎng)代碼）來(lái)查詢狀態(tài)？

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

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

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

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

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

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

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

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

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

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

標(biāo)簽： 交互設(shè)計(jì) 手機(jī)交互 產(chǎn)品設(shè)計(jì) 

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