《don't make me think》

——不知道什么是有用的,看到的都記下,只為自己在轉(zhuǎn)型的路上越走越好。

關(guān)于《don't make me think》

關(guān)于web可用性設(shè)計(jì)的工具書,在用戶心理、使用行為模式、導(dǎo)航/主頁設(shè)計(jì)、可用性測(cè)試等方面提出了許多觀點(diǎn)和建議。但基于現(xiàn)有環(huán)境氛圍,本書的部分觀點(diǎn)已不再適用,案例比較陳舊,但仍不失為一本好書,特別是其可用性三大定律,很有學(xué)習(xí)的意義。

一、關(guān)于可用性三大定律

1、可用性第一定律:別讓我思考

? ?·讓每個(gè)頁面不言而喻,普通用戶看一眼就明白是什么內(nèi)容,如何使用它;

? ?·如果不能做到讓每個(gè)頁面不言而喻,至少讓它自我解釋,減少訪問者的挫敗感。

2、可用性第二定律:點(diǎn)擊多少次都沒關(guān)系,只要每次點(diǎn)擊都是無需思考,并且是明確無誤的選擇

? ?·經(jīng)驗(yàn)準(zhǔn)則:三次無須思考、明確無誤的點(diǎn)擊,相當(dāng)于一次需要思考的點(diǎn)擊

3、可用性第三定律去掉每個(gè)頁面上一半的文字,然后把剩下的文字再去掉一半

? ?·有力的文字都很簡(jiǎn)練,如同畫上不應(yīng)該有多余的線條,機(jī)器上不應(yīng)該有多余的零件;

? ?·降低頁面噪聲,突出有用內(nèi)容;

? ?·讓頁面更簡(jiǎn)短,每個(gè)頁面可看見更多內(nèi)容而不必滾動(dòng)屏幕;

? ?·歡迎詞&指示說明必須消滅(用戶更喜歡直接了當(dāng),減少不必要的時(shí)間)。


二、用戶是如何使用web?

1、快速掃描頁面內(nèi)容,選擇性閱讀

? ?Why?

? ?人們總是處于忙碌之中;在絕大多數(shù)頁面上,通常只對(duì)一小部分內(nèi)容感興趣,只關(guān)心我們感興趣的內(nèi)容;我們善于掃面,正如掃描報(bào)紙、雜志一般。

2、搜索頁面時(shí),不做最佳選擇,滿意即可

? ?Why?

? ?如《source of power:how people make decisions》中指出:尋找最佳策略略艱難,需要的時(shí)間也更長(zhǎng),相較而言,滿意策略效率更高效;如果猜錯(cuò)了,也不會(huì)產(chǎn)生什么嚴(yán)重的后果(如后退按鈕);對(duì)于設(shè)計(jì)不佳的網(wǎng)站,選擇/進(jìn)行權(quán)衡并沒有改善我們的機(jī)會(huì);通常猜測(cè)更有意思,沒有仔細(xì)權(quán)衡辣么累。

3、不追究到底,而是勉強(qiáng)應(yīng)付

? ?Why?

? ?對(duì)大多數(shù)人來說,對(duì)于是否明白背后的工作機(jī)制并不重要,只要夠用就好;如果發(fā)現(xiàn)以某個(gè)東西能用,我們會(huì)一直用它,除非偶然發(fā)現(xiàn)更好的。


三、實(shí)踐中需要注意的幾個(gè)方面

用戶瀏覽習(xí)慣:

1、為掃描設(shè)計(jì),而不是為閱讀設(shè)計(jì)

? ?·建立清楚的視覺層次

? ?·越重要部分越突出

? ?·邏輯上相關(guān)的東西在視覺上也相關(guān),邏輯上相關(guān)的部分在視覺上進(jìn)行嵌套

? ?·盡量利用習(xí)慣用法

2、符合用戶習(xí)慣認(rèn)知的設(shè)計(jì)

? ?·把頁面劃分成明確定義區(qū)域

? ?·明顯標(biāo)識(shí)可以點(diǎn)擊的地方

? ?·最大限度降低干擾

? ?·降低視覺噪聲(眼花繚亂、背景噪聲)

3、導(dǎo)航設(shè)計(jì)

·導(dǎo)航作用:

? ?l給我們一些固定的感覺

? ?l告訴我們當(dāng)前位置

? ?l告訴我們?nèi)绾问褂镁W(wǎng)站:從哪兒開始,能進(jìn)行哪些選擇

·無法承受的瀏覽

? ?|感覺不到大小、感覺不到方向、感覺不到位置

·搜索框

? ?|避免花俏用詞、提供指示說明(例如搜索框內(nèi)的說明,告知用戶以何種方式搜索)&選項(xiàng)(當(dāng)存在混淆時(shí),如下截圖)

·頁面名稱

? ?|每個(gè)頁面都需要一個(gè)引人注目的名稱,并放置在合適的位置,名稱要與點(diǎn)擊的鏈接一致

突出用戶當(dāng)前所在位置

·面包屑(層級(jí)菜單)

? ? |告知用戶從主頁到當(dāng)前頁面的路徑

? ?案例:http://fatherhood.about.com/od/workingfathers/ss/Top-Apps-and-Tech-Tools-for-Better-Work-Life-Balance.htm#step2(about.com)

·標(biāo)簽

? ?|自我解釋、靈活、突出

? ?|激活的標(biāo)簽必須有一種不同的顏色,并與它下面的空間在物理上連接起來

? ?|對(duì)欄目進(jìn)行顏色編碼

? ?|當(dāng)進(jìn)入網(wǎng)站時(shí),有一個(gè)標(biāo)簽已經(jīng)選中(否則幾秒之內(nèi)用戶注意不到標(biāo)簽的存在)

? ?案例:800.com、亞馬遜

亞馬遜

4、測(cè)試是否成功

? ?如果頁面設(shè)計(jì)良好,應(yīng)使能毫不猶豫回答出以下問題:

? ?l這是什么網(wǎng)站?---站點(diǎn)ID

? ?l我在那個(gè)頁面上?---網(wǎng)頁名稱

? ?l網(wǎng)站的主要欄目有哪些?---欄目清單

? ?l在這個(gè)層次上我有哪些選擇?---本頁導(dǎo)航

? ?l我在什么位置?---顏色編碼/位置指示器

? ?l我怎么搜索?

5、主頁

·包含內(nèi)容:

? ?|站點(diǎn)標(biāo)識(shí)&使命:解釋網(wǎng)站是做什么的

? ?|站點(diǎn)層次:我能在這兒找到什么?有哪些功能?能做什么?

? ?|搜索

? ?|導(dǎo)讀:功能/內(nèi)容推介

? ?|內(nèi)容更新

? ?|友情鏈接

? ?|快捷方式:降低用戶查找成本

? ?|注冊(cè)

? ?|告知用戶從哪兒開始

? ?|讓用戶看到正在尋找(想要的東西顯而易見)/沒有尋找的東西(用戶也許會(huì)感興趣的內(nèi)容)

? ?|建立可信度&信任感

? ?|當(dāng)進(jìn)入新的網(wǎng)站是,掃描主頁后,應(yīng)該讓用戶明白:如果想要搜索,可以從哪兒開始;如果想要閱讀頁面信息,可以從哪兒開始;如果想要查看網(wǎng)站最精彩的內(nèi)容,可以從哪兒開始。

·關(guān)于主頁導(dǎo)航下拉框表現(xiàn)出的問題:

? ? |必須鼠標(biāo)滑過/點(diǎn)擊才能看到下拉裂變。列表頁上的項(xiàng)目在用戶掃描頁面時(shí)看不到;

? ? |當(dāng)列表很長(zhǎng)時(shí),效率低。


三、關(guān)于測(cè)試哪些事

·可用性:

? ?誤區(qū):認(rèn)為絕大多數(shù)用戶喜歡我們所喜歡的

? ?考慮:某個(gè)模塊某種設(shè)計(jì)是否會(huì)為用戶帶去良好的體驗(yàn),而不僅是用戶喜不喜歡。

? ?測(cè)試:什么有效、什么無效,發(fā)現(xiàn)用戶動(dòng)機(jī)、理解、反應(yīng)。

·測(cè)試中常見的問題:

? ?l用戶不清楚網(wǎng)站說的是什么

? ?l用戶找不到自己要的字眼---組織內(nèi)容不符合用戶習(xí)慣,或分類符合但名稱不符合

? ?l內(nèi)容太多,以致于看不到想要的內(nèi)容---減少頁面干擾,或突出重要內(nèi)容

·提高好感的幾種方式:

? ?讓用戶明白網(wǎng)站可以做什么

? ?告訴用戶想知道的

? ?盡量減少步驟

? ?細(xì)致:盡量準(zhǔn)確、 清晰的幫助用戶找到所需要的信息

? ?知道用戶可能有哪兒疑問,基于解答(FQA)

? ?為用戶提供協(xié)助,如打印頁面

? ?容易從錯(cuò)誤中恢復(fù),但出現(xiàn)不可避免的錯(cuò)誤時(shí),提供另一種優(yōu)雅、清楚的方法讓用戶從錯(cuò)誤中恢復(fù)

? ?如有不確定,記得道歉


四、實(shí)例對(duì)比:

鏈家VS房天下

·鏈家主頁


鏈家

包含logo(網(wǎng)站ID)、主導(dǎo)航、網(wǎng)站口號(hào)、搜索框

? ?特點(diǎn):1、鏈家背景圖片是以家做為背景,頁面不言而喻(讓用戶瞬間就明白該網(wǎng)站的主題是什么)

? ?2、搜索框:兩件搜索框旁邊按鈕”開始找房”,相比icon圖標(biāo)按鈕,更簡(jiǎn)單易懂

? ? 缺點(diǎn):沒有根據(jù)用戶訪問IP自動(dòng)為用戶定位網(wǎng)站位置,默認(rèn)均是武漢,需要用戶手動(dòng)切換地點(diǎn)。對(duì)于某些用戶來說,可能會(huì)認(rèn)為該網(wǎng)站不能查看其它城市。建議在城市部分做倒三角圖標(biāo),或提示切換城市的標(biāo)語,減少用戶思考。

·房天下主頁

房天下

? ?缺點(diǎn):logo放置在中央,從視覺習(xí)慣上來看,并不容易被用戶察覺,且容易被背景同化(當(dāng)背景色為黑色等)

? ?特點(diǎn):導(dǎo)航條以紅色作為背景橫跨頁面頂端,顯眼。在導(dǎo)航左邊“城市”模塊,附有倒三角圖標(biāo),以及中央“切換城市”,用戶很容易知道該網(wǎng)站包含多個(gè)城市頁面。

·鏈家內(nèi)頁


鏈家


鏈家

? ?特點(diǎn):logo旁邊附有“新房”“二手房”“在售”“樓盤”等字樣,告知用戶當(dāng)前所在類目。二手房的面包屑層次描述很詳細(xì),明確告知用戶當(dāng)前所在位置和所處的層級(jí)。

? ?缺點(diǎn):1、二手房搜索框下拉菜單含有成交項(xiàng),搜索框內(nèi)描述的是“輸入關(guān)鍵詞”,會(huì)讓用戶思考關(guān)于成交,我應(yīng)該輸入什么來進(jìn)行搜索。而當(dāng)輸入樓盤/區(qū)縣名稱時(shí),跳轉(zhuǎn)頁面至在售房源列表頁,而這似乎與用戶想要了解成交并沒有關(guān)系。

? ? 2、新房頁面,導(dǎo)航?jīng)]有為用戶所在位置做標(biāo)識(shí),頁面出現(xiàn)兩個(gè)“首頁”描述詞,會(huì)讓用戶思考如果我想要進(jìn)入網(wǎng)站主頁的時(shí)候該點(diǎn)哪一個(gè)“首頁”才能正確跳轉(zhuǎn)。

·房天下內(nèi)頁


房天下


房天下


房天下

? ?缺點(diǎn):1、第一張圖,區(qū)縣等篩選區(qū)域采用下拉框的設(shè)計(jì)樣式,雖然這樣設(shè)計(jì)節(jié)約頁面空間,但是對(duì)于商圈較多的城市來說,下拉框的內(nèi)容會(huì)顯得臃腫繁冗,體驗(yàn)并沒有很好。在淺灰色背景區(qū)域,同時(shí)會(huì)顯得內(nèi)容太多,排版混亂。

? ?2、視覺噪聲太多,眼花繚亂。

? ?優(yōu)點(diǎn):1、網(wǎng)站采用全局導(dǎo)航,每個(gè)頁面導(dǎo)航顯示樣式保持一致,再配合面包屑,能讓用戶清晰知道用戶所處位置,所處層級(jí)。

? ?2、第二張圖(紅色框標(biāo)出的“樓盤首頁”部分),采用標(biāo)簽樣式,且激活的標(biāo)簽有不同的顏色,并與它下面的空間在物理上連接了起來。

? ? 相同部分,每個(gè)頁面都配有導(dǎo)航+搜索,便于滿足不同用戶的瀏覽操作習(xí)慣。但整體設(shè)計(jì)而言,鏈家干擾項(xiàng)較少,頁面整潔,某些細(xì)節(jié)部分好于房天下。


-----------------是在是太懶了,懶得再分析多一點(diǎn)啊啊啊啊-----------------------

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第1章 別讓我思考 要使網(wǎng)站看上去一目了然,或者需要自我解釋。讓用戶在第一眼就理解網(wǎng)站上各個(gè)元素的作用,并且盡可能...
    怪蜀黍機(jī)器人閱讀 598評(píng)論 0 0
  • 內(nèi)容簡(jiǎn)介 可用性設(shè)計(jì)是Web設(shè)計(jì)中最重要也是難度最大的一項(xiàng)任務(wù)。本書作者根據(jù)多年從業(yè)的經(jīng)驗(yàn),剖析用戶的心理,在用戶...
    少穻閱讀 1,212評(píng)論 1 5
  • 如果某個(gè)東西很難用,我就不會(huì)經(jīng)常用它?!猄teve Krug妻子 引用本書作者Steve Kru在書中提到的妻子...
    九O九閱讀 2,132評(píng)論 1 4
  • 一、我們實(shí)際上如何使用Web 1、我們不是閱讀,而是掃描 2、我們不做最佳選擇,而是滿意即可 l我們總是處于忙碌之...
    筆艾特紙閱讀 484評(píng)論 0 0
  • 每天費(fèi)盡心機(jī)看試色看教程,精心挑選最適合自膚色的顯白唇膏,然而涂得口紅再美,一口大黃牙張開嘴就瞬間幻滅,還怎么做安...
    Joannababy閱讀 765評(píng)論 0 1

友情鏈接更多精彩內(nèi)容