在線應用窗口一致化分析

雖說互聯網的革命總覺得勢不可擋,大家都期待著,某一天,只需要一個瀏覽器,就可以完成平常用客戶端才能完成的任務。雖然,HTML5與Chrome一度讓我們看到瀏覽器代替操作系統的希望(via 12345),但目前來看,用戶同時保持兩種平台的使用的狀況,要持續很長一段時間。

想讓用戶無縫地從客戶端應用轉移到在線應用,我們還面臨很多問題。

從邏輯上說,在線應用屬於操作系統中瀏覽器客戶端應用內運行的一套程序,很多交互上依然還是要依賴上層應用(瀏覽器客戶端),這就如同在Mac OS內跑一個Windows的虛擬機的那種差別。

這樣的環境,就給在線應用帶來一個很嚴重且無法避免的問題:體驗不一致。 在線應用沒法提供和客戶端應用一樣的體驗環境,用戶如果如果想好好使用在線應用,得需要重新學一次,成本過高。尤其是對於那些生產力應用,而這種不一致,無疑是致命的打擊。

生產力應用指的是可以完成那些對具體信息的組織與處理的任務。用戶通過生產力應用可以創造並處理信息。比如Outlook,Photoshop,Word,AutoCAD。

這些體驗的不一致在UI上的表現主要包括以下幾點:

  1. 鍵盤快捷鍵——只有少部分在線應用支持快捷鍵,這些快捷鍵難以發現且不支持複雜的組合。
  2. 鼠標右鍵—— 只有少部分在線應用支持,而且無法和瀏覽器右鍵菜單並存。 (新版Flickr的交叉顯示做法不錯。)
  3. 信息交換—— 把本地照片拖進Photoshop內即可打開,把Flickr照片能拖進Photoshop.com內編輯嗎?

如有其他,歡迎補充。但我個人認為,最大的不一致,是在於頁面的漸進變化,窗口深度變化以及模態化轉變。因為這種不一致,用戶很容易就在一個在線應用中迷失而困惑,因此,“首頁”鏈接成為點擊最高,最救火的鏈接。

觀察一:多樣的對話

在瀏覽器中,用戶一共會遇到4種類型的對話窗口,分別是:

  1. 瀏覽器對話框——由瀏覽器驅動的對話框窗口,模態對話框(相對於瀏覽器,Opera除外。)如下圖左上角,刪除對話框。
  2. 內建對話框——由在線應用提供的對話框窗口,如下圖左下角,為QQ郵箱寫信提示,模態(只相對於當前瀏覽器標籤頁內。 )
  3. 小彈窗——非模態的小瀏覽器窗口,用於完成一些在線應用的子任務。如下圖中部,為Gmail添加其他郵箱帳號的小彈窗。
  4. 通用對話框——由操作系統所提供的模態窗口,如上傳文件,保存文件,指定文件夾等對話框。

了解更多對話框的分類,請參考Windows user Experience Interaction Guildelines > windows

四種對話框

觀察二:頁面的流動差異化

同樣的頁面,即使他們的功能與內容相同,但在客戶端與在線應用,也存在著較大的差異。

客戶端中,使用窗口的模態疊加,給予用戶導航,同時,Windows平台還提供了任務欄,幫助用戶管理自己的窗口。對於用戶而言,後退至上一步,只需關閉當前窗口,返回操作流程的原點,清除掉任務欄的窗口的佔位即好。

在在線應用內,由於窗口的模態疊加存在實現難度,而且效果也不佳。同時,也不會有任務欄這樣的控件去管理用戶在網頁端內的窗口(Firefox Panorama也不過是對瀏覽器的標籤管理提供了解決方案而已),即使存在麵包屑與導航,也難以避免導航迷失,用戶難以在頁面中快速找到準確的後退路徑,不得不直接選擇“回到首頁”的方式,快速逃離。

窗口和頁面流動

客戶端通過窗口的疊加記錄用戶操作流程

上圖看起來比較複雜,但通過窗口的疊加,有效的記錄到了用戶的整個操作流程。用戶在回退時,都可以採用點擊窗口的X,或者Cancel退回上一步。

麵包屑只表現站點分類邏輯

而對於在線應用,雖然有麵包屑,但是他表現的不是用戶操作流程,而是信息的分類。

頁面模態的差異化

客戶端與網頁端窗口模態化對比

同樣的內容(設置),在客戶端內,使用模態的對話框,並且會新開一個窗口;而在線應用中,這就變成非模態了,且不會新開窗口。

網頁端后退操作行為過多

其實點擊這些上面的鏈接,都是在新窗口打開內容

網頁上的元素五花八門,在未點擊之前,你根本不知道下一步會怎樣,也許是新開窗口,也許是一個內建對話框,也許是一個小彈窗,也許是一個瀏覽器對話框。而且,存在與一些容易誤導用戶的視覺元素:如上圖,雖然看起來是選項卡的外觀,讓我很容易以為點擊之後,我將繼續保留在這個頁面內,而事實上我都會跳到一個新窗口

並且在線應用內,你可以通過多種的方式後退,關閉內建對話框,關閉小彈窗,關閉新標籤窗口,點擊瀏覽器後退導航按鈕。

在客戶端,永遠只有一種,點擊X按鈕。

網頁端體驗案例討論

10大可用性準則中,其中就包括的兩點:給予用戶控制權一致性與標準化。但在線應用中,很多時候,卻不得不面臨兩難的情況。

我將對比在相同的功能中,網易郵箱與QQ郵箱的設計對比,來表現這個問題。

在QQ郵箱內,如果需要徹底刪除一封郵件,將有對話框讓用戶進行再確認。這是一個瀏覽器對話框。

QQ郵箱徹底刪除郵件對話框

QQ郵箱刪除對話框

問題出現了,雖然這個對話框只是針對當前標籤頁,可它相對於瀏覽器而言,是模態的,你無法切換到瀏覽器其他標籤內。 限制了用戶的控制權,且它的外觀,難以和郵箱內建對話框取得統一,如果是MAC系統的話,OK按鈕在還會出現在對話框最右下角的位置。操作體驗不一致。

網易郵箱刪除郵件對話框

網易郵箱則使用了內建對話框,看似是解決了問題,但實際上並未:

網易郵箱對話框

QQ郵箱對話框

在面臨當前頁面已經存在內建對話框的狀況下,當需要再確認的時候,網易郵箱和QQ郵箱同樣採用了模態的瀏覽器對話框。顯然,網易郵箱違背了原來的對話框視覺規範。

但這是一個無奈之舉,如果同樣使用內建對話框,用戶在視覺外觀上,很難對兩個對話框的從屬關係作出即時的判斷。

由於目前,在網頁端,雖然在前端代碼內有HTML5的規範啟用,但在設計上,卻沒有類似Windows User Experience Interaction Guidelines 或者是Apple Human Interaction Guildlines 這樣的規範給設計師提供標榜和準則。這就直接導致,在線應用的窗口設計上,一致性是一個難以解決的問題,用戶就會遇到很多奇奇怪怪的體驗。

探討解決辦法

雖然在線應用從長期看來,將最終在用戶界面方面,將完美替代軟件客戶端。但是目前我們依然還處在,在線應用與客戶端並行的狀況。但是,我們也欣喜的看到,一些在線應用的設計,已經能夠解決這些問題了。或許,他們將引領,在線應用的下一代的窗口設計:

select sync folder in Windows Live Sync

如果用戶安裝了silverlight,那麼,在Live Sync中,用戶即可直接在當前網頁內,選擇用戶本地計算機的文件夾,取代了傳統的彈出一個模態對話框的方式。不打擾用戶切換至其他瀏覽器標籤頁。

Gmail Feedback

Gmail同樣使用了非常具有特色的設計方法,Gmail已經完全避免了使用模態的瀏覽器對話框,取而代之的是,Gmail不再確認用戶的危險操作,但是提供後退入口。

另外Gmail還提供了“多線程”的體驗,取消了窗口的模態關係。

小結

從這些案例我們可以大致看出以後在線應用的窗口設計的一些趨勢:

  1. 模態化的對話框將減少 —— 因為他阻礙用戶的控制權,且影響一致性。
  2. 窗口結構將變得扁平化 —— 在線應用的不會像客戶端那樣,窗口相互之間有嚴謹的從屬關係,整體數量多。在線應用會只有一個核心的頁面,這些頁面涵括了在線應用的大部分的操作界面。
  3. 即地化的反饋和操作成為主流 —— 客戶端中原有的,編輯內容-》保存-》查看結果的流程,在網頁端將會變得更加精簡與方便,因為在線應用可以方便的即時變化當前頁面,給予用戶反饋。

無論如何,在線應用已經距離我們越來越近了,也許我們真的只需要一個瀏覽器,就可以完成很多的任務。不論如何,在目前在線應用設計中無通用規範與合理的解決方案中,上訴說法只是做簡單的研究與分析,無法得出具體解決方案。

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.