Chrome 瀏覽器的哪些設計符合「Don"t Make Me Think」原則?

Don"t make user think意思是不要讓用戶思考


讓我臆測一下,提問者應該是剛看了同名的書籍,同時希望能夠在實際產品當中找到應用的實例,書寫得不錯,但只給出了理論,對嗎? ^_^

Don"t make me think是一個很大的概念,同時提問者也選擇了一款很優秀的產品 -- Chrome,知乎上應該有很多人的默認瀏覽器是這一款,因其被廣泛渲染的速度,以及優秀的設計而選它(當然也有人選擇其它)。

屁話少說,回答提問,Chrome 瀏覽器哪些設計符合「Don"t make me think」原則?
先從以下幾點展開(隨性而寫,到哪算哪)

1. 瀏覽器Tab欄,在Chrome出來之前絕大部分瀏覽器的Tab欄均放置在地欄下方(IE那會兒連Tab欄都木有),初見Chrome時很詫異它的Tab欄設計,位於地址欄上方以梯形的樣式出現,視覺印象很深刻,第一印象(Blink)就與其它瀏覽器形成了區別。

當最大化Chrome並進行瀏覽操作時,總算理解了為什麼Chrome的設計為什麼要將Tab欄放置在地址欄的上方了。在Windows下,用戶將Chrome最大化後,它的邊框將消失,Tab欄就處於整個屏幕最上面一行的位置了。

啰嗦了一大堆,為什麼這樣Tab欄的設計能夠Don"t make user think呢?先介紹一個交互理論的常識--Fitts定律,該定律指的是:使用指點設備到達一個目標的時間與兩個因素有關: 1.設備當前位置和目標位置的距離; 2.目標的大小。位於頂部的Tab欄其實是對Fitts定律的靈活運用,由於游標不可能跑出屏幕以外,因此用戶盡可以隨便將游標向上移動,游標肯定位於Tab欄上(Tab欄呈條狀展現更易被選中),這降低了游標指向的難度,節約了用戶時間。ps. 該設計只出現在Windows的Chrome瀏覽器內,至於為什麼OSX里Chrome不這樣設計,下面有解釋。


我們可以看一個更有名的例子,Apple的應用程序menu bar與Windows的應用程序menu bar對比,Windows一直以來的UI設計都是把menu bar放在應用程序的title bar下面,而OSX採取完全不同的設計,把menu bar固定在螢幕最頂端(注意下圖紅色框起來的部分)。一般人對這兩種設計沒有太多觀感,但當我們應用Fitts定律後,會發現OSX把menu bar放在屏幕最頂端,雖然移動距離變長了,但目標的大小也跟著變成了「無限大」(有興趣的可以看這裡,傳送門:http://zh.wikipedia.org/wiki/%E8%B4%B9%E8%8C%A8%E6%B3%95%E5%88%99)
OSX里Chrome無法應用這樣的設計,因為屏幕最頂部一行被系統佔用!

另外,有興趣的同學,可以試一下在Windows(XP)下將滑鼠緊貼屏幕最左下角點擊Win鍵,以及在OSX系統里在屏幕的最左上角屏幕邊緣點擊蘋果圖標,試一試,理解一下它們分別的做法...... ^_^ ps.win7應該改進了吧,虛擬機里只裝了xp!


再來說Tab欄的另一個設計,用戶在瀏覽窗口打開過多,需要關閉的情況下,Chrome對Tab進行了一個很人性化的設計 -- Tab自動移動至當前滑鼠位置。相信許多Chrome的用戶對此應深有感觸吧,當用戶關閉Tab欄時,Tab會從右向左移動(謝 @tracey12 同學提醒),用戶從最右側的Tab欄開始關閉,Tab會從左向右關閉,並且在等待一段時間用戶沒有進行關閉操作後,Tab才會調整寬度(以保證Tab的關閉icon在用戶操作期間一直在滑鼠下方),細節啊,這些細節都亮瞎了我的雙眼。導致用戶在進行連續多個Tab的關閉時連滑鼠都不用移動,只需要點擊、點擊、點擊......Don"t make me think

2. ToolBar,簡潔、極端的簡潔,剛安裝好的瀏覽器Toolbar簡潔我只能輸入地址。Toolbar上的列出用戶最需要的功能:後退、前進、刷新、輸入框、設置,只有5項,數量上屬於短期記憶的能力範圍內,減少了用戶的認知負擔,此時用戶關注點只在瀏覽本身上,幾乎不需要對瀏覽器進行額外的學習。

3. 輸入框,將同樣具有輸入屬性的地址欄與搜索框進行融合,導致這個輸入框成為一個很複雜的系統,僅在輸入部分這個框就能夠輸入地址(廢話)、搜索本地歷史、搜索本地收藏、搜索Chrome插件、引用其它搜索引擎......Chrome將這些有機的融合在一起,用戶需要做的只是輸入,結果已經列好了。Chrome試圖簡化用戶在到達瀏覽頁面之前的所有操作,舉個小例子吧,用戶輸入http://zhihu.com進入知乎網站,下次用戶再試圖進入輸入時,從用戶輸入第一字母 Z 時,Chrome已自動幫用戶進行了補全(目前僅支持網址補全,而且是用戶瀏覽過的網站,這個設定很好,細節不表述自己思考吧),接下來就看用戶採取何種動作,回車鍵(打開網頁)或Tab鍵(引用知乎的引擎)。

個人認為,Chrome的輸入框還可以針對中文使用習慣進行再深一層次的設計,能夠使輸入框更優化。 ps.同學可以嘗試在輸入框內輸入 zhihu。com(中文字元的dot,也就是句號)

4. 後台同步,這個是神一樣的功能,近乎所有信息均可進行同步,看下圖設置當中的選項就可了解(當然,這些設置項用戶都不用去管,默認同步就好了),保證多平台、多端在某一程度體驗上的一致,這功能設計之初就是為了減少用戶重複性的操作及設置。

5. Loading,這個放在最後吧,很少有人注意到Loading,也就是我們稱之的進度條,因為曾經有段時間我希望能夠從非技術角度解釋Chrome速度為什麼快,讓我Chrome的進度條有了一定的了解。當頁面進行loading時,Tab左側有個不斷滾動的四分之一圓的小環,最初是以逆時針方向緩慢轉動,這個時候的Loading狀態可能是解析DNS,並嘗試與伺服器進行連接,當連接成功開始Loading伺服器上的數據時,小圓環以順時針快速轉動(看下圖)。這樣的設計有效有讓用戶明確的知道了目前Loading的狀態,並對結果有一個直觀的預期(一直逆時針用戶就可以果斷關閉網頁了)。同時,這樣的設計讓我感覺在載入伺服器數據時更快(有了逆時針緩慢的對比),並且情感上讓我聯想起小時玩過的後拉式小汽車,往後拉動汽車集蓄動能,放手後車輪就快速的向前奔跑 ^_^,這都是Chrome設計者對細節的把握,簡單的旋轉被設計者賦予了完全不同的含義,就算用戶不明白技術細節,從動態的顯示上也能了解一個大概。

不知不覺寫到半夜了! 又是一篇長文,以上僅從設計角度解答所提出的問題,還有許多Chrome優秀的設計無法在這一篇里完成,如:收藏管理、下載、歷史、開發者模式、右鍵功能...... 等等!有興趣的同學可以看看這個《Chrome的100個小技巧》,傳送門: http://pan.baidu.com/share/link?shareid=98675uk=3944669047

Don"t make me think是一個概念,不要停留在表象層面,在不讓用戶思考的同時意味著設計者需要花費更多的時間及精力進行思考,相應產品需要更精緻的雕琢才能夠達到要求。

明天要出差,趕緊去補個覺。

ps.平常自己是一個懶於寫作的人,感謝有這樣一個問題能夠讓自己零散的思路得到整理!


從最開始,Chrome 的設計宗旨就是內容為王(Content, not chrome [1])。既然使用瀏覽器是用來瀏覽網頁的,那麼對使用者來說,最重要的因素是什麼?

速度,當然是速度。載入速度、渲染速度、響應速度 …… 這是最重要,也是在人們討論設計時最不被重視的。「Design is not just what it looks like and feels like. Design is how it works」。如果網頁需要載入半天,即便瀏覽器擁有眾多的華麗功能,也無濟於事。

Chrome 在提升速度上做的努力,在這裡就不贅述了。

既然是內容為王,那麼內容當然應該佔據更大的空間,功能設計就應該極簡。所以,以狀態欄(status bar)為首的一系列老舊瀏覽器特有的累贅功能和區域都被 Chrome 幹掉了。

隨之產生的還有合搜索框和地址欄二為一的 Omnibox。很多時候人們並不需要知道 url 是什麼,他們只是想在網上找某樣東西(搜索),或訪問一個去過的網頁,Omnibox 的設計更符合大多使用者的直覺。對於長期用者來說,它就是人類記憶的體外延伸。

其他如標籤欄可拖拽的設計,雖不知是否屬 Chrome 原創,但都屬於極度簡單實用而又不搶眼的功能。

擴展閱讀 ----
[1] Chromium Blog: Content, not "Chrome"
[2] Inside Chrome: The Secret Project to Crush IE and Remake the Web


難道沒人意識到Chrome的安裝過程和靜默升級才是最體現「Don"t make me think」原則的?


我來說一個這兩天才注意到的。
ctrl+F搜索的時候,如果當前高亮的文字被搜索bar檔住了,搜索bar會移開!這個細節太贊了!!


其實 @MoonMonster 的答案和「Don"t make me think」基本上沒有多大的關係。
而且,舉的這些例子,很多都已經過時或者是牽強附會。

比如說Tab欄大都都放在地址欄下面,這個就很扯淡。除了最早的一些多標籤瀏覽器把標籤切換放在底部之外,大多數的多標籤瀏覽器一開始就選擇將Tab欄放在地址欄上面,IE用MSN工具欄實現的那個效果純粹是因為插件實現的技術限制,無奈之舉。
而放在地址欄上面,最重要的原因也不是便於定位,而是不需要用戶去思考它和地址欄之間的關係,地址欄被Tab欄包含,代表當前Tab與當前地址的一一對應關係,這是Don"t make me think的一個體現,但這種原則實在是太低級,以至於很少有NC瀏覽器會把標籤欄放在地址欄下面。
Chrome全屏後將地址欄侵入標題欄的位置,其最主要的目的是最大化可瀏覽的面積。而不是為了方便定位,事實上因為這個設計,使得Chrome在Windows 7下的還原手勢受到影響(將一個最大化的窗口的標題往下拖即還原窗口)。

順便說一句,Windows 7的這個還原手勢就依據了費茨法則,而且事實上這個法則一點都不高深莫測,騰訊QQ很早做了側邊停靠的效果。

事實上沒必要動輒扯蘋果,將這個法則用的很好的也包括Windows 7和8.Windows 7左上右三邊都有手勢,左下開始,右下桌面。到了Windows 8再將四角手勢增強,左下角開始菜單,左上角上一個程序,左下往上或者左上往下是切換程序,右下往上或右上往下是設置和選項。

作為一個UX,Windows 7都沒用過,Windows 8的手勢都不清楚,要好好補習了。

回到問題,Chrome到底哪些地方的設計做到了Don"t make me think呢?
其實並不多,而且Chrome主要的設計理念是最大化Web空間和極簡化設計,所以很多看起來Don"t make me think的設計原意並非如此。

我隨便舉幾個:
1、Chrome最新版本工具按鈕只有一個,所有的功能都包含在內,這就免去了用戶思考我的功能在菜單還是工具欄,在工具還是在頁面的問題。
反例就是IE。

2、Chrome在新標籤打開鏈接時,新的標籤總是會在右邊出現,再在標籤欄最右側放上一個小小的平行四邊形小塊,即使沒有"+",用戶也意識到了這是新建標籤的按鈕。

3、Chrome所有標籤左側的小叉,告訴用戶點擊這裡刪除(關閉)這個標籤。

4、Chrome的標籤可以輕鬆的拖拽移動位置,也可以拖出來一個新窗口,或者拖進去與別的窗口合併。
反例是QQ,QQ多標籤聊天窗口,點著標題拖出來,點著頭像拖進去。

5、標題過長時,Chrome在標籤頁使用的是漸隱的效果,避免了...的設計導致用戶要去思考到底標題是xxxxxx...還是xxxxxxxxxxxxxxxxxxxxxxxxxxx
反例就是幾乎其他任何軟體。


在瀏覽器來說,Chrome 做了這些開創性的工作,都是做完之後,大家覺得「本應如此」,而且對於沒有做到這些的瀏覽器,都覺得差了一個檔次的。

  • 減掉窗口標題欄,大量砍掉界面元素,讓用戶集中注意力在內容里。
  • Omni Bar ,不用想是輸入網址還是搜索。
  • Webkit + V8 的高性能使得 Web App 真正成為可能。
  • 自動下載升級並安裝,保證用戶總在使用新版本。
  • 與Google賬號同步收藏,保存填寫的表單,同步 Tab 等

至於其它的細節,大家說了很多了。至於和暢銷書裡面的「原則」有哪些重合,就見人見智了。


我來說說個人看法。個人還是比較喜歡chrome的,但是有一些要說。就是chrome的很多功能都是藏在菜單里的,你點擊它還要細細的尋找才能找到,比較麻煩。而手機版的也如出一轍,簡單的有點可怕,我經常不知道到哪裡去保存書籤,不知道怎麼設置細節。當然chrome這種極簡主義的風格在國外更瘦歡迎,在國內很多人並不是特別習慣,想UC、海豚瀏覽器這種大而全的可能比chrome更有吸引力。


各種玲琅滿目的插件


  1. 速度快:還沒來得及走神,頁面就載入完了。
  2. 簡潔,界面元素少:即使最常用的刷新,停止按鈕,也被合併成一個。這跟iOS虛擬鍵盤的理念是一致的,在不同的狀態下,按鈕被賦予不同功能。

@周路燈 http://zhi.hu/DUtp

我覺得被濫用或誤用的原則:

三次點擊原則,原意是「如果用戶在3次點擊中無法找到信息和完成網站功能時,用戶就會停止使用這個網站」

在我的工作經歷中,產品經理會經常拿三次點擊當作擋箭牌,堅持把所有的功能入口放在同一個頁面,使產品的層次變得扁平,雖然用戶需要的點擊數少了(實際上只是經過培訓和學習的老用戶點擊數),但是頁面內容過多,沒有重點,新用戶依然會覺得無從下手,不知道從哪裡開始。

《Don"t Make Me Think 》這本書中提到了可用性的三條定律。其中第二條寫到:
要點擊多少次都沒關係,只要每次點擊都是無須思考,明確無誤的選擇。


「OSX系統里在屏幕的最左上角屏幕邊緣點擊蘋果圖標,試一試,理解一下它們分別的做法」
試了一下:osx

點擊熱區,包括左上角整個屏幕邊緣,左上角邊緣總是最容易移到的就算閉著眼睛,邊緣的菜單項點擊區域沒有中間菜單項(等間距)好判斷,合理利用邊緣,增大目標區域,減少了目標菜單項指向難度。點擊選中一項後,其他菜單項滑動即可選中,而不是點擊。


就沒有人吐槽下chrome添加收藏夾功能是多麼的讓人難受嗎?


Chrome 在頁面上雙擊任何文字(包括中文)都會選擇一個而不是單個
明顯是做了分詞的,這樣當你想選中一個詞的時候就根本不需要思考了。


Chrome技術團隊目前超過700人,是Google內部投入很大的項目,可能僅次於Google+的投入,其產品理念是三個S:speed, simple 和security, 快是第一要素,一方面其運行速度的確快,另一方面其開發速度也非常快,即使像360這種在瀏覽器開發上投入幾百人的公司,也很難跟上chrome的開發步伐;安全性則是能否將用戶從OS遷移到瀏覽器的關鍵,如果不安全就沒法貫徹Google關於「雲即未來」的戰略。


感受深刻的:
0.自動安裝過程和靜默升級too「Don"t make me think」

1.搜索框和地址欄合二為一 ,.消滅了菜單欄 ,tab直接置於頂端;重新聚焦了用戶注意力,直擊需求要害,加之簡潔快速,使用明了爽快;

2.複製一文本,右鍵點擊地址欄,彈出菜單,可直接「粘貼並搜索」

3.標籤左側的小叉,默默告訴用戶點擊這裡可以關閉標籤;

4.標籤可以輕鬆拖拽移動位置,也可以拖出來一個新窗口,或拖進去與其它窗口合併;

5.整個界面簡單實用而又不搶眼


有幾個印象比較深刻的:

1. 地址欄搜索:直接輸入關鍵字(標題,摘要等),會直接在下拉框彈出訪問過的相關網站;

2. 還是地址欄:如果我只記得部分的網址,輸入,下拉框提示訪問過的匹配網址,比如輸入maps,提示http://maps.google.com;

3. 還是地址欄:上面 薛天祿 同學提到的搜索框和地址欄合二為一,輸入時可能會出現上述1. 2.的下拉框提示,如果提示不能滿足用戶需求,按回車搜索;

4. 還是地址欄:搜索具體的網站,比如愛詞霸查英文,輸入ici按tab鍵,直接輸入單詞,同樣適用於知乎(輸入zhihu.然後tab)、baidu、zh.wiki等,嗯,首次發現的時候非常驚喜的一個搜索功能(有點像在知乎發現支持J、K鍵導航,支持ctrl+s保存、ctrl+b加粗字體等快捷鍵一樣);

5. 同步功能,在家裡和公司的上網體驗完全一致,書籤、歷史記錄、搜索結果個性化、連插件都給同步了…這個點應該沒有跑題吧?


嗯,暫時就記得這幾個。


剛開始用的時候,你會覺得這是什麼破瀏覽器,啥都沒有,用了1年之後就會覺得其他瀏覽器用起來麻煩的要死


滑鼠中鍵開啟鏈接新窗口的功能不錯~


大家都沒有注意到連續關閉標籤這個功能,chrome可以讓你滑鼠不動的情況下,連續關閉很多,當你滑鼠離開標籤欄後才自動調整位置;而ie10剛開始是沒有這個功能的,但是現在ie10也注意到了這個細節


用過ie5-7 用過opera6-7 自從裝了火狐基本沒換過(必須裝的擴展不能少),沒用怎麼過Chrome
我覺得don"t me think說的是產品或者網站要大概符合用戶的心理預期,讓他們使用的很smooth。


再也不用一個一個找聲音到底來自於哪一個標籤頁了


推薦閱讀:

PS如何做飛灰消散的效果?
單人做一個網站需要掌握哪些知識?

TAG:GoogleChrome | 設計 | 用戶界面設計 | 用戶體驗設計 |