雖說互聯網的革命總覺得勢不可擋,大家都期待著,某一天,只需要一個瀏覽器,就可以完成平常用客戶端才能完成的任務。雖然,HTML5與Chrome一度讓我們看到瀏覽器代替操作系統的希望(via 1,2,3,4,5),但目前來看,用戶同時保持兩種平台的使用的狀況,要持續很長一段時間。
想讓用戶無縫地從客戶端應用轉移到在線應用,我們還面臨很多問題。
從邏輯上說,在線應用屬於操作系統中瀏覽器客戶端應用內運行的一套程序,很多交互上依然還是要依賴上層應用(瀏覽器客戶端),這就如同在Mac OS內跑一個Windows的虛擬機的那種差別。
這樣的環境,就給在線應用帶來一個很嚴重且無法避免的問題:體驗不一致。 在線應用沒法提供和客戶端應用一樣的體驗環境,用戶如果如果想好好使用在線應用,得需要重新學一次,成本過高。尤其是對於那些生產力應用,而這種不一致,無疑是致命的打擊。
生產力應用指的是可以完成那些對具體信息的組織與處理的任務。用戶通過生產力應用可以創造並處理信息。比如Outlook,Photoshop,Word,AutoCAD。
這些體驗的不一致在UI上的表現主要包括以下幾點:
- 鍵盤快捷鍵——只有少部分在線應用支持快捷鍵,這些快捷鍵難以發現且不支持複雜的組合。
- 鼠標右鍵—— 只有少部分在線應用支持,而且無法和瀏覽器右鍵菜單並存。 (新版Flickr的交叉顯示做法不錯。)
- 信息交換—— 把本地照片拖進Photoshop內即可打開,把Flickr照片能拖進Photoshop.com內編輯嗎?
如有其他,歡迎補充。但我個人認為,最大的不一致,是在於頁面的漸進變化,窗口深度變化以及模態化轉變。因為這種不一致,用戶很容易就在一個在線應用中迷失而困惑,因此,“首頁”鏈接成為點擊最高,最救火的鏈接。
觀察一:多樣的對話
在瀏覽器中,用戶一共會遇到4種類型的對話窗口,分別是:
- 瀏覽器對話框——由瀏覽器驅動的對話框窗口,模態對話框(相對於瀏覽器,Opera除外。)如下圖左上角,刪除對話框。
- 內建對話框——由在線應用提供的對話框窗口,如下圖左下角,為QQ郵箱寫信提示,模態(只相對於當前瀏覽器標籤頁內。 )
- 小彈窗——非模態的小瀏覽器窗口,用於完成一些在線應用的子任務。如下圖中部,為Gmail添加其他郵箱帳號的小彈窗。
- 通用對話框——由操作系統所提供的模態窗口,如上傳文件,保存文件,指定文件夾等對話框。
了解更多對話框的分類,請參考Windows user Experience Interaction Guildelines > windows
觀察二:頁面的流動差異化
同樣的頁面,即使他們的功能與內容相同,但在客戶端與在線應用,也存在著較大的差異。
客戶端中,使用窗口的模態疊加,給予用戶導航,同時,Windows平台還提供了任務欄,幫助用戶管理自己的窗口。對於用戶而言,後退至上一步,只需關閉當前窗口,返回操作流程的原點,清除掉任務欄的窗口的佔位即好。
在在線應用內,由於窗口的模態疊加存在實現難度,而且效果也不佳。同時,也不會有任務欄這樣的控件去管理用戶在網頁端內的窗口(Firefox Panorama也不過是對瀏覽器的標籤管理提供了解決方案而已),即使存在麵包屑與導航,也難以避免導航迷失,用戶難以在頁面中快速找到準確的後退路徑,不得不直接選擇“回到首頁”的方式,快速逃離。
窗口和頁面流動
上圖看起來比較複雜,但通過窗口的疊加,有效的記錄到了用戶的整個操作流程。用戶在回退時,都可以採用點擊窗口的X,或者Cancel退回上一步。
而對於在線應用,雖然有麵包屑,但是他表現的不是用戶操作流程,而是信息的分類。
頁面模態的差異化
同樣的內容(設置),在客戶端內,使用模態的對話框,並且會新開一個窗口;而在線應用中,這就變成非模態了,且不會新開窗口。
網頁端后退操作行為過多
網頁上的元素五花八門,在未點擊之前,你根本不知道下一步會怎樣,也許是新開窗口,也許是一個內建對話框,也許是一個小彈窗,也許是一個瀏覽器對話框。而且,存在與一些容易誤導用戶的視覺元素:如上圖,雖然看起來是選項卡的外觀,讓我很容易以為點擊之後,我將繼續保留在這個頁面內,而事實上我都會跳到一個新窗口。
並且在線應用內,你可以通過多種的方式後退,關閉內建對話框,關閉小彈窗,關閉新標籤窗口,點擊瀏覽器後退導航按鈕。
在客戶端,永遠只有一種,點擊X按鈕。
網頁端體驗案例討論
10大可用性準則中,其中就包括的兩點:給予用戶控制權;一致性與標準化。但在線應用中,很多時候,卻不得不面臨兩難的情況。
我將對比在相同的功能中,網易郵箱與QQ郵箱的設計對比,來表現這個問題。
在QQ郵箱內,如果需要徹底刪除一封郵件,將有對話框讓用戶進行再確認。這是一個瀏覽器對話框。
問題出現了,雖然這個對話框只是針對當前標籤頁,可它相對於瀏覽器而言,是模態的,你無法切換到瀏覽器其他標籤內。 限制了用戶的控制權,且它的外觀,難以和郵箱內建對話框取得統一,如果是MAC系統的話,OK按鈕在還會出現在對話框最右下角的位置。操作體驗不一致。
網易郵箱則使用了內建對話框,看似是解決了問題,但實際上並未:
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy