在線應用窗口一致化分析
雖說互聯網的革命總覺得勢不可擋,大家都期待著,某一天,只需要一個瀏覽器,就可以完成平常用客戶端才能完成的任務。雖然,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按鈕在還會出現在對話框最右下角的位置。操作體驗不一致。
網易郵箱則使用了內建對話框,看似是解決了問題,但實際上并未:
在面臨當前頁面已經存在內建對話框的狀況下,當需要再確認的時候,網易郵箱和QQ郵箱同樣采用了模態的瀏覽器對話框。顯然,網易郵箱違背了原來的對話框視覺規范。
但這是一個無奈之舉,如果同樣使用內建對話框,用戶在視覺外觀上,很難對兩個對話框的從屬關系作出即時的判斷。
由于目前,在網頁端,雖然在前端代碼內有HTML5的規范啟用,但在設計上,卻沒有類似Windows User Experience Interaction Guidelines 或者是Apple Human Interaction Guildlines 這樣的規范給設計師提供標榜和準則。這就直接導致,在線應用的窗口設計上,一致性是一個難以解決的問題,用戶就會遇到很多奇奇怪怪的體驗。
探討解決辦法
雖然在線應用從長期看來,將最終在用戶界面方面,將完美替代軟件客戶端。但是目前我們依然還處在,在線應用與客戶端并行的狀況。但是,我們也欣喜的看到,一些在線應用的設計,已經能夠解決這些問題了?;蛟S,他們將引領,在線應用的下一代的窗口設計:
如果用戶安裝了silverlight,那么,在Live Sync中,用戶即可直接在當前網頁內,選擇用戶本地計算機的文件夾,取代了傳統的彈出一個模態對話框的方式。不打擾用戶切換至其他瀏覽器標簽頁。
Gmail同樣使用了非常具有特色的設計方法,Gmail已經完全避免了使用模態的瀏覽器對話框,取而代之的是,Gmail不再確認用戶的危險操作,但是提供后退入口。
另外Gmail還提供了“多線程”的體驗,取消了窗口的模態關系。
小結
從這些案例我們可以大致看出以后在線應用的窗口設計的一些趨勢:
- 模態化的對話框將減少 —— 因為他阻礙用戶的控制權,且影響一致性。
- 窗口結構將變得扁平化 —— 在線應用的不會像客戶端那樣,窗口相互之間有嚴謹的從屬關系,整體數量多。在線應用會只有一個核心的頁面,這些頁面涵括了在線應用的大部分的操作界面。
- 即地化的反饋和操作成為主流 —— 客戶端中原有的,編輯內容-》保存-》查看結果的流程,在網頁端將會變得更加精簡與方便,因為在線應用可以方便的即時變化當前頁面,給予用戶反饋。
無論如何,在線應用已經距離我們越來越近了,也許我們真的只需要一個瀏覽器,就可以完成很多的任務。不論如何,在目前在線應用設計中無通用規范與合理的解決方案中,上訴說法只是做簡單的研究與分析,無法得出具體解決方案。
來源:http://www.userkon.com/tolyer/make_online_app_windows_standard.html
- 目前還沒評論,等你發揮!