《點石成金——訪客至上的網頁設計秘籍》筆記

點石成金——訪客至上的網頁設計秘籍

Ch1 · 別讓我思考——Krug可用性第一定律

這是作者的可用性第一定律。它意味著,設計者應該盡量做到,當訪問者看一個頁面時,它應該是不言而喻、一目了然、自我解釋的。

訪問者應該能明白它——它是什么,怎樣使用它——而不需要花費精力進行思考。

有時候,如果在進行一些嶄新的、開拓性的或非常復雜的頁面設計時,也許只能做到“自我解釋”,在一個自我解釋的頁面中,用戶需要花一點點時間去理解——但只需要一點點時間。

如果要讓網頁有效,就必須在用戶第一眼看到它們時將自己展示出來。做到這一點最好的方法就是創建不言而喻的網頁,或者至少也要做到自我解釋。

Ch2 · 我們實際上是如何使用Web的——掃描,滿意即可,勉強應付

第一個事實:我們不是閱讀,而是掃描

人們會花極少的時間來閱讀大部分的頁面,其實,只是掃描一下(或匆匆掠過)網頁,尋找能吸引我們注意力的文字或詞語。

我們為什么掃描?

  • 我們總是處于忙碌之中。大部分情況下,我們使用Web就是想節約時間,我們沒有時間來閱讀那些不必要的內容。
  • 我們知道自己不必閱讀所有內容。在絕大多數頁面上,我們實際上只對其中的一小部分內容感興趣,剩下的內容我們并不關心。
  • 我們善于掃描。在日常生活中,我們一直在掃描報紙、雜志、書籍,來找到我們感興趣的部分,我們知道這樣做沒有問題。

第二個事實:我們不作最佳選擇,而是滿意即可

設計頁面時,我們通常假設用戶只是掃過整個頁面,考慮所有可能的選項,然后選擇一個最好的。

事實上,大多數時間里我們不會選擇最佳選項,而是選擇第一個合理的選項,這就是滿意策略。一旦我們發現一個鏈接,看起來似乎能跳轉到我們想去的地方,那就是一個我們將會點擊它的大好機會。

為什么Web用戶不尋找最佳選擇呢?

  • 我們總是處于忙碌之中。尋找最佳策略很難,需要的時間也很長,滿意策略效率更高。
  • 如果猜錯了,也不會產生什么嚴重的后果。在網站上做了一次錯誤選擇的后果通常只是點擊幾次后退按鈕,這樣也使得滿意策略成為一項有效的策略。
  • 對選擇進行權衡并不會改善我們的機會。在設計不佳的網站中,花費精力去做最佳選擇并沒有用,還不如查看猜到的第一個頁面,不行的話再退回來。
  • 猜測更有意思。猜測不會像仔細衡量那么累,如果猜對了,速度會更快。它還帶來了一個機會因素——有可能無意中看到某個令人意外但還不錯的內容,這種可能性讓人開心。

當然,這并不是說用戶在點擊之前從不進行衡量,這要取決于他們頭腦中的打算,時間上有多緊迫,還有,他們對這個網站的信心。

第三個事實:我們不是追根究底,而是勉強應付

只要做一些可用性測試,就會發現,很大程度上人們一直在使用這些東西,但并不理解它們的運作原理,甚至對它們的工作原理有完全錯誤的誤解。還有很多人完全不是以設計師設想的方式使用網絡和軟件,但他們用得很好。

為什么會這樣?

  • 這對我們來說并不重要。對于我們中的大多數人來說,是否明白事物背后的工作機制并不重要,只要我們能正常使用它們即可。
  • 如果發現某個事物能用,我們會一直用它。如果偶然發現一種更好的方法,我們會換用這種更好的方法,但很少會主動尋找更好的方法。

Ch3 · 廣告牌設計101法則——為掃描設計,不為閱讀設計

如果用戶們都是疾馳而過,那么,我們需要注意一下5個重要方面,來保證用戶盡可能看到了——并理解了我們的網站:

  • 在每個頁面上建立清楚的視覺層次。
  • 盡量利用習慣用法。
  • 把頁面劃分成明確定義的區域。
  • 明顯標識可以點擊的地方。
  • 最大限度降低干擾。

建立清楚的視覺層次

讓頁面在瞬間明白易懂的好方法是確保頁面上所有內容的外觀、可視線索都清楚,而且能準確地表述頁面上內容之間的關系:哪些內容相關,哪些內容是其他內容的組成部分。即:每個頁面都應該有清楚的視覺層次。

一個視覺層次清楚的頁面有三個特點:

  • 越重要的部分越突出。例如,最重要的標題要么字體更大、更粗、顏色更特別,旁邊留有更多空白,要么更接近頁面的頂部——或者,以上幾點的綜合。
越重要的部分越突出
  • 邏輯上相關的部分在視覺上也相關。例如,可以把相近的內容分成一組,放在同一個標題之下,采用類似的顯示樣式,或者把它們全部放在一個定義明確的區域之內。
越邏輯上相關的部分在視覺上也相關
  • 邏輯上包含的部分在視覺上進行嵌套。例如,一個分類的標題(“Computer Books”)出現在某本具體書籍書名的上面,在視覺上包括書籍區域,因為該書籍屬于這個標題,而且書籍的標題也要橫向覆蓋描述這本書的元素。
邏輯上包含的部分在視覺上進行嵌套

我們每天都會對視覺層次進行分解——不管是在網絡上還是在報紙上。但是這種分解發生得太快了,因此我們經常只有在不能這么做的時候才能模模糊糊地感覺到它——即這些可視信息線索迫使我們思考的時候。

好的視覺層次通過預先處理頁面,用一種我們能快速理解的方式對頁面的內容進行組織并區分優先級,從而減少了我們的工作。否則,我們會降低頁面掃描速度,尋找關鍵字和短語,然后拼湊出我們感覺重要的內容和內容的組織方式,這樣就增加了很多工作。

視覺層次

習慣用法是你的好幫手

我們知道,了解報紙版面的布局和格式的不同習慣用法能讓我們更快、更容易地掃描報紙。Web上已經有很多習慣用法,大部分是從報紙和雜志上延續過來的,而新的習慣用法也在不斷涌現。

所有的習慣用法都是從某個人靈光一現的想法開始的,如果這個想法相當不錯,其他站點就會效仿,最終,會有足夠多的人在足夠多的地方見到它,讓它變得不言而喻。比如“購物車”圖標。

關于Web上的習慣用法,有兩點非常重要:

  • 它們非常有用。通常,習慣用法因為有用才會成為習慣用法。適當的習慣用法會使用戶在網站之間的訪問更容易,不需要花費額外的學習成本。這樣還保證了一種熟悉感,哪怕這種熟悉感也會讓用戶感覺到某種似曾相識的單調乏味。
  • 設計師通常不愿意利用它們。他們在很大程度上覺得網站是請他們來做一些嶄新的、與眾不同的設計,而不是使用那些原有的東西。

我們應該在清楚自己有一個更好的想法時進行創新,否則就盡量利用習慣用法。

把頁面劃分成明確定義的區域

這可以讓用戶很快決定關注頁面的哪些區域,或者放心地跳過哪些區域。對網頁掃描所進行的幾項初始眼動研究表名,用戶很快就會確定頁面哪些部分包含有用信息,然后對其他部分看都不看——就像他們根本不曾來過一樣。

明顯標識可以點擊的地方

因為人們在網絡上所做的大多數事情就是找到下一個地方點擊,那么明確地標識哪些地方可以點擊,哪些地方不能點擊,這很重要。

雖然用戶確定哪里可以點擊并不會花很長時間,但如果我們迫使用戶去思考某些通過下意識就可以知道的東西,那么我們完全是在浪費每個用戶對新站點有限的耐心和好感。

降低視覺噪聲

讓頁面不易理解的一個最大原因是視覺噪聲,實際上有兩類視覺噪聲

  • 眼花繚亂。如果頁面上所有的內容都在嚷嚷著希望得到用戶的注意,那么結果可能適得其反。
  • 背景噪聲。有些頁面就像在開雞尾酒會一樣,雖然沒有一個地方會造成過分的干擾,但是這些很小的噪聲太多也會讓人覺得厭煩。
把這些線變成灰色會讓菜單更容易掃描

不同用戶對復雜性和干擾的容忍度不一樣,一些人不在乎眼花繚亂的界面和背景噪聲,但很多人在乎。我們設計頁面時,不妨先假定所有內容都是視覺噪聲,除非得到證明他們不是。

Ch4 · 動物、植物、無機物——為什么用戶喜歡無需思考的選擇

點擊多少次都沒關系,
只要每次點擊都是無需思考、明確無誤的選擇。
    ——Krug可用性第二定律

Ch5 · 省略不必要的文字——不要在Web上寫作的藝術

去掉每個頁面上一半的文字,
然后把剩下的文字再去掉一半。
    ——Krug可用性第三定律

有力的文字都很簡練。去掉沒有人看的文字有幾個好處:

  • 可以降低頁面的噪聲
  • 讓有用的內容更加突出
  • 讓頁面更簡短,讓用戶在每個頁面上一眼就能看見更多的內容,而不必滾動屏幕

這里的“文字”是指兩種特別的文字——歡迎詞和指示說明。

歡迎詞必須消滅

很多歡迎詞就像小冊子里的蹩腳的促銷文字一樣,根本沒有包括有用的信息,只是在一個勁說自己有多好,而不是描述什么東西能讓我們感覺更好。

指示說明必須消滅

沒有人會細讀它們,至少在多次“勉強應付”失敗之前不會。

我們的目標應該是通過讓每項內容不言而喻來完全消除指示說明,或者是至少做到,當指示文字變得完全沒有必要時,應把它們全部去掉。

Ch6 · 街頭指示牌和面包屑——設計導航

網絡導航101法則

  • 你通常是為了尋找某個目標
  • 你會決定先詢問還是先瀏覽。一些人(搜索框用戶)總是一到某個網站就開始尋找搜索框(就像一到商場就開始向服務員詢問的人)。另一些人(鏈接狂用戶)通常會先瀏覽,只有在他們久尋不到的情況下才開始搜索。
  • 如果選擇瀏覽,你將通過標志的引導在層次結構中穿行
  • 最后,如果找不到想要的東西,你會離開

無法承受的瀏覽之輕

在Web上的體驗卻少了許多我們在生活中用來同空間相處的感覺,想想下面這些Web空間的奇怪之處:

  • 感覺不到大小
  • 感覺不到方向
  • 感覺不到位置

這解釋了書簽——存儲的個人捷徑——如此重要的原因,也是為什么后退按鈕的點擊率占據網絡上所有點擊率的30%~40%的原因。

它也解釋了為什么主頁的概念這么重要。相對來說,主頁就是固定的空間。它就像北極星,點擊“主頁”給了我們一個重新開始的機會。

缺乏物理感覺好在這種無重狀態讓人愉快,也部分解釋了為什么在Web上容易忘記時間。不好在Web導航通過具體化網站的層次結構補償了這種缺失的空間感,營造出某種位置的感覺,說明要把Web導航做好。

被忽視了的導航用途

導航的用處:

  • 它給了我們一些固定的感覺。
  • 他告訴我們當前的位置。
  • 它告訴我們如何使用網站。
  • 它給了我們對網站建造者的信心。規劃得當的導航是網站給人留下好印象的最好機會。

Web導航習慣用法

Ch7 · 首先要承認,主頁不由你控制——設計主頁

主頁要完成的任務:

  • 站點的標識和使命

  • 站點層次

  • 搜索

  • 導讀

  • 內容更新

  • 友情鏈接

  • 快捷方式

  • 注冊

  • 讓我看到自己正在尋找的東西

  • ……還有我沒有尋找的 (也許會感興趣但沒有尋找的內容)

  • 告訴我從哪里開始

  • 建立可信度和信任感

沒有什么比得上一個好口號

口號是一條精煉的短句,刻畫了整個企業,總結它是什么,什么讓它如此卓越。

口號是非常有效的信息傳達方式,因為它們是用戶最希望能找到關于網站目標具體描述的地方。在選擇口號時,有幾點要考慮:

  • 好的口號要清楚、言之有物
  • 不好的口號含混不清
  • 好的口號長度適中,6-8個單詞足以表達思想,而且容易讓人領會。
  • 好的口號能表述出網站的特點和顯而易見的好處。
  • 不好的口號聽起來太籠統。不要把口號和宗旨混淆起來。
  • 好的口號應該有個性、生動,有時候還很俏皮。俏皮很好,但應該有助于傳達,而非混淆好處。

Ch8 · 農場主和牧牛人應該是朋友——為什么Web設計團隊討論可用性是在浪費時間,如何避免這種情況

Ch9 · 一天10美分的可用性測試——讓測試簡單,這樣你能進行充分的測試

焦點小組不是可用性測試

焦點小組和可用性測試的區別如下:

  • 在一次焦點小組研究中,以小組人(通常是5~8人)圍坐在桌子旁邊,對展示給他們的想法和設計做出反應。這是一個小組過程,主要價值來自參與人員彼此的反應。焦點小組是快速得到用戶的意見和感覺的一種不錯的方法。
  • 在一次可用性測試中,一次一個用戶展示一些內容(不管是網站,還是網站原型,或是一些單個頁面的草圖),并且要求用戶說出:①這是什么;②試著用它來完成一項典型的任務。

從焦點小組了解到的是在設計網站之前就應該了解的,但不能告訴我們人們是否確實能使用我們的網站。

關于測試的幾個事實

  • 如果想建立一個優秀的網站,一定要測試
  • 測試一個用戶比不做測試好一倍
  • 在項目中,早點測試一位用戶好過最后測試50位用戶。
  • 人們對招募用戶代表的重要性估計過高。(重要的是盡早和經常進行測試)
  • 測試的關鍵不是要證明什么或者反駁什么,而是了解我們的判斷力。
  • 測試是一個迭代的過程。
  • 沒什么比現場用戶的反應更重要。

“跳樓大減價”的可用性測試

簡易可用性測試

應該測試多少用戶

很多情況下,每輪測試的理想用戶數量應該是三個,最多四個。

這樣不僅有助于保證我們很快進入下一輪測試,發現新的問題,也便于在同一天完成測試和總結,這樣我們就能馬上利用剛剛得到的這些結果。如果一次測試更多用戶,我們會得到更多的筆記,沒有時間處理,而且這些筆記中有很多都是一些瑣碎的內容,這會讓人更容易只見樹木,不見森林。

對于大多數Web團隊來說,他們發現問題的能力很強,但是手上往往沒有足夠的資源來修正這些問題,因此重要的是重點關注最嚴重的問題。

作者幾乎完全不再為參與的專家評審和可用性測試給出文字報告,而是用每次持續1~2個小時的電話會議向整個開發團隊匯報他的發現,在電話會議結束時,他們已經對哪些是最嚴重的問題,以及如何修正它們達成了一致。

寬松招募,曲線上升

關于可用性測試最大的秘密就是,測試對象是誰并不重要。

對大部分網站來說,我么只需要懂得基本上網知識的用戶就可以了。

如果沒有能力請人來招募測試對象,可以利用我們能夠尋找到的任何人(滿足最低要求),然后曲線上升。

換句話說,要尋找能反映我們目標群體的測試用戶,但別因此裹足不前。我們的測試用戶和目標群體之間可以存在差別,理由如下:

  • 實際上,我們都是初學者。
  • 設計出的網站只有我們的目標群體能使用,這通常并不是一個好主意。
  • 專家通常不會介意對初學者來說很清楚的界面。(每個人都喜歡簡潔)

但也有一些例外:

  • 如果你的網站幾乎只由某一類用戶使用,而且招募這一類測試用戶并不困難,那么就去招募。(如:如果目標用戶是女性,那么務必只測試女性用戶就好了)
  • 如果使用我們的網站需要專門的領域知識,那么至少要在一個回合的測試中招募具有該領域知識的用戶。

在進行招募時,應該注意幾個問題:

  • 提供合理的激勵
  • 邀請要簡單
  • 避免對網站(或網站背后的組織結構)進行預先討論。我們希望從他們的第一眼看出他們是否能從一次標準的開始得出網站的宗旨。
  • 別不好意思請朋友和鄰居幫忙。他們也很喜歡這種體驗。

Ch10 · 可用性是基本禮貌——為什么你的網站應該讓人尊敬

不要降低用戶的好感,以用戶不期望的方式工作。

Ch11 · 可訪問性、級聯樣式表和你——正當你已經完成了的時候,一只貓掉了下來,背上捆著涂了奶油的面包

可訪問性(面向殘障人士的良好設計)是非常正確而且必要的。

Ch12 · 救命!老板想要我…… ——當好人遇到不好的設計決策

那就用理由說服他們(作者提供了兩封電子郵件模板)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容