這是一本講互聯網產品可用性的書!
本書分為13個章節,為了便于記憶,我將其總結為3大塊:
一.指導原則
二.設計與方法
三.爭取他人重視可用性
一。指導原則
三大可用性定律:
1.別讓我思考
2.確保每次點擊無需思考,選擇明確無誤
3.去掉頁面上一半的文字
1.別讓我思考
標準:不言而喻,一目了然>自我解釋
不言而喻:當人看見一個網頁的時候,就能知道這是_,那是_,我要找的東西在這里。
注意點:
1.使用用戶語言:避免使用專業的名稱
2.符合用戶心理模型:有明顯的視覺線索(是什么就是什么),合理的操作流程
原因:符合用戶的的行為習慣—三個用戶事實
1.我們不是閱讀而是掃描:只看與任務相關的,個人興趣,根深蒂固的詞—免費,大減價,美女等
2.我們不做最佳選擇,而是滿意即可:我們很忙碌,猜錯了也不會有嚴重后果,猜測更有意思
3.我們不是追根問底,而是勉強應付:理解原因不重要,發現某個能用的東西會一直用它(除非偶然發現另一個)
設計:未掃描而設計,不為閱讀而設計
1.盡量使用習慣用法:遵循用戶習慣和設計標準(一致性:簡潔>一致性),除非你的創新同樣不言而喻,或者有很大的價值
2.建立有效的視覺層次:越重要的部分越突出,邏輯上相關的部分視覺上也相關,邏輯上相關的部分視覺上嵌套
3.把頁面劃分成明確定義的區域:接近原則
4.明顯標識可以點擊的地方:視覺線索(顏色,下劃線,指示器等)
5.降低視覺噪:眼花繚亂(信息沒有區分),組織不當(信息的排序),太過密集(信息過于密集)—可以先假定所有信息都是噪音并去除沒用的信息。
6.為文本設置格式,便于掃描:使用標題,保持段落簡短,使用符號列表(注意段落間距),突出關鍵詞(加粗,顏色)
2.確保每次點擊無需思考,選擇明確無誤
普遍觀點:到達網站的任何頁面不應該超過(3次,4次或者5次)。
現實:三次無需思考、明確無誤的點擊相當于一次需要思考的點擊。
注意:選擇意思應該明確(非此即彼),選項的狀態應該明顯(可點擊不可點擊,已選未選)
必要的幫助和支持(困難選擇):簡短(最少的信息),及時(在需要的時候出現在合適的地方),不會錯過(合適的格式,確保能引起注意)
3.?去掉頁面一半文字
好處:減低噪音,突出重要信息,頁面更加簡短(減少了滾動)
行為:歡迎詞必須消滅(一些廢話,沒有實質的幫助,描述我們有多么的好,而不是什么東西讓我們更好),指示文字必須消滅(盡量簡短,只留下有用的信息)
二。設計與方法
設計與方法,總共分為四部分:
1.導航與面包屑
2.主頁
3.移動設計
4.可用性測試與影響因素
1.導航與面包屑
網絡導航和你逛商場是一樣的,主要的行為有兩種:瀏覽和詢問(搜索—互聯網)。
網絡導航特點:
1.沒有方向
2.感覺不到大小
3.感覺不到位置
結果就導致了,書簽和后退按鈕的頻繁使用。當然,沒有物理的空間感,容易讓人迷失,同時也容易忘記時間的流逝。
網絡導航要做的兩件事:
1.告訴我我在哪(這里有什么)
2.告訴我去往那里的路怎么走(怎么使用)
網站導航結構:
使用標準的網站導航結構,可以減輕用戶的認識負擔。比如:
網站導航:
1.持久導航(全局導航):包括站點ID,主導航,實用工具,搜索
2.標識(表明我在哪里):頁面名稱,視覺線索,面包屑
1.持久導航
讓導航在每一頁以相同的位置出現,表明你還在這個網站。(除表單外)
站點ID:一般出現在頁面的左上角,點擊可以回到主頁
主導航(欄目):有時欄目下會有次級欄目,標簽的形式是一種不錯的選擇(不言而喻,很難錯過,很靈活)
實用工具(不屬于內容層次的重要元素鏈接):注冊,登錄,幫助,站點地圖,購物車,我的賬戶,幫助,論壇等
搜索:避免使用花哨的詞(使用‘搜索’即可),指示說明(只在必要的時候加入—輸入訂單號),選項(謹慎使用,縮小搜索范圍—商家or商品)
2.標識
頁面名稱:每個頁面需要一個名稱,名稱出現在合適的位置,名稱要引人注目,名稱要盡量與點擊的鏈接一樣。
視覺線索:在點擊過后,點擊處應該和別的地方有區分—指示器,顏色,粗細,反向
面包屑:把它們放在最頂層(內容上,主導航下),使用>進行間隔,加粗最后一個元素
3.測試
讓用戶處于一個隨機頁面,讓他們回答:
這是什么網站(ID)
我在哪個頁面(頁面名稱)
這個網站的主欄目是什么?(欄目清單)
在這個頁面我可以去往哪里?(導航)
我在網站的什么位置?(標識)
我怎么搜索?
2.主頁
主頁要完成的任務:
站點標識和使命:告訴我們他是什么網站,能干什么,最好能告訴我,為什么我在這里不是在別的網站(口號)
站點層次:給出網站的概貌—包括內容,功能,以及組織方式
搜索:大多數網站在主頁有一個明顯的搜索框
導讀:主頁應該項雜志一樣,有精彩的額內容吸引我
內容推介:突出最好的,最人們的內容
功能推介:探索網站更多的欄目或者試用一些個性化功能
適時更新內容:告訴用戶這不是一個沒人管的網站
交換鏈接:主頁的預留空間—廣告,交叉推廣,合作品牌
快捷方式:最常訪問的內容片斷
注冊:表明用戶的登錄狀態,以及提供登錄入口
讓我看到自己正在尋找的東西:智能推薦(大數據思維)
還有我沒有尋找的:潛在的需求(大數據分析)
告訴我從哪里開始:有明顯的的推薦入口?
建立可信度和信任感:主頁(pv最多的頁面)的好壞直接影響用戶的去留
兵家必爭之地
主頁使用戶訪問最多的頁面,一般也是用戶對網站的第一印象,它占據了網站最多的流量,誰都想要分一杯羹。滿足所有人的需要時不切實際的,在這種情況下我們要保證網站的整體形象。
緩解方法:
從其他熱門頁面進行推介
輪流使用主頁的同一空間
整體形象測試方式:
在進入網站的一瞬間(50ms),回答一下問題:
這是什么網站
我能在這里干什么
網站上有什么
為什么我應該在這里而不是在別的網站
或者
它看起來怎么樣
內容多嗎
頁面分區明確嗎
哪些部分對我有吸引力
如何傳達網站信息
主頁上每個東西都有助于理解網站是做什么的,但是有兩個重要的位置更能幫助我們:
口號:它是什么,什么讓它卓越。6-8個詞,代表網站的特點和顯而易見的好處(對用戶),個性生動俏皮。
歡迎廣告:對網站簡要的描述,一般位于頁面上端的左邊或者中間
了解更多:別使用長段文字,用戶沒有耐心看下去,可以使用短視頻。
指導原則(傳達信息)
需要多大空間就使用多大空間
但是不要使用過多的空間:精簡文字
不要把使命陳述當做歡迎廣告:歡迎廣告應該是傳達公司是做什么的。
最重要的是進行測試
從哪里開始—布局
我想要搜索,可以從這里開始
我想要瀏覽,可以從這里開始
我想要看他們最精彩的內容,可以從這里開始
3.移動設計
在小屏幕上,人們移動的更快了,閱讀量變小了。
設計的本質:處理約束(必須遵循和不能做的地方)和妥協(服從約束而不得已做的事情)。
確定約束有助于設計,而嚴重的可用性一般出現在對某個妥協的糟糕決定。
小空間的約束:可以先設計移動端(考慮最核心的功能和內容),然后將次要的內容和功能添加進去。
對于設計,我們應該進行優先級排序,最重要的和需要馬上做的應該有最少的點擊和最明顯的視覺線索。次要的信息可以輕點幾下,或者顯示相對明顯的線索到達。
可伸縮設計(響應式,動態布局,流式設計,自適應設計):允許縮放,不要讓我站在門口(直接帶用戶去目的地,而不是首頁),記得提供一個到“全內容”網站的鏈接。
在小屏幕上,不要隱藏提示。但是提示只要足夠引起用戶注意就可以了(但是不要把所有的提示都堆在頁面上,這會很嘈雜)。
手機屏幕,沒有光標,沒有懸停,沒有線索。操作的方式變了。
移動應用的可用性屬性:
讓一個有著平均能力或者經驗(或者稍低于平均水平)的人能夠明白如何使用(可學習)去完成某個任務(有效),而不會遇到不必要的麻煩(高效)。
應用需要可以學習:學會如何使用(提示,操作試驗)
應用需要可以記憶:再次使用時是否需要可以再次學習
4.可用性測試與影響因素
焦點小組不是可用性測試。
焦點小組(用于產品設計初期):一組人(5-10)一起侃侃而談,彈對產品的看法,產品的過往使用經驗,對新概念的反應。
可用性測試(全過程—產品的運行情況和改進):一次一個用戶觀察他們的使用情況,并對于他們的行為作出分析和修改。
幾個事實
如果想建立一個優秀的網站,一定要測試:不是每個人想的都和你一樣的
測試一個用戶比不測試好一倍
早一點測試用戶好過最后測試50位用戶
簡易可用性測試
測試什么,什么時候測試
在設計網站之前就應該開始測試,測試競爭對手,測試應該貫徹整個項目,從草圖,到線框圖,頁面排版,界面原型,到最后的實際網頁。
測試什么取決于你現在需要測試什么,在測試前,應該進行任務描述(包含他們需要但是不具備的信息—用戶名,密碼等)。
在測試中允許用戶自己決定一部分細節,比如“找一件你喜歡的衣服”而不是“找一件100元以下的衣服”。
測試流程
歡迎部分(4分鐘):介紹如何進行,讓用戶有心理準備
提問部分(2分鐘):可以問參與者幾個和他們相關的問題,可以幫助他們放松
主頁觀光(3分鐘):參考主頁測試
任務測試(35分鐘):不要提示用戶,在用戶迷惑想你詢問時,你可以重復他們的話或者問他們你在想什么,做什么等
問題探查(5分鐘):可以想參與者提問
結束部分(5分鐘):感謝用戶
典型問題
用戶不明白概念:不知道頁面在說什么
他們找不到自己要找的字眼:1.詞匯理解不一致 ?2.預測錯誤
內容太多:看不到要找的內容,減少干擾,突出內容。
總結會
收集一份問題列表:讓大家說出最嚴重的3個問題,把問題列出來
選擇最嚴重的10個問題:對列出的問題可以進行非正式投票
問題評級:最嚴重的問題置頂
建立排序列表:從最上面的問題開始,對每個問題在下個月該怎么修復寫下一些粗略的想法(誰負責,需要什么資源)。
對于容易修復的問題,建立另一份清單:一個人可以在一個小時完成的
抵制添加的沖動:
不要太看重人們對于新功能的要求
忽略皮劃艇問題:用戶遇到問題,但是很快就解決了
其他測試方式
遠程測試,無人主持的遠程測試
移動設備的可用性測試
與pc端應用或者網頁的可用性測試不同,移動端的場景更加的復雜(操作方式,環境等)。
因為測試最好盡可能的基于用戶的真實的場景進行,所以移動端會有以下一些問題:
1.用戶是自然的拿著設備還是設備固定在桌面上?
2.觀察者需要看到什么?(是設備的屏幕,還是同時看到屏幕和用戶的手和表情)
3.怎么錄像?
krug的推薦:
1.使用指向屏幕的攝像頭而不是鏡像技術(類似屏幕共享技術),同時看到屏幕和用戶的操作更有利于分析用戶的行為意圖
2.把攝像頭連接到移動設備上,讓用戶能自然的拿著它。
3.不要用攝像頭指向測試參與者。
解決方案:
一個輕量級攝像頭,一條固定可彎曲的線,一個夾板(感覺固定在手機殼后面也是不錯的選擇),一條連接電腦的usb連接線。
1.用USB將攝像頭連接到電腦上
2.在電腦上觀看畫面,并通過屏幕錄制工具分享給觀察者看。
影響因素
最后,主要講一下影響可用性的外界因素和產品的可訪問性對可用性的影響。
外界因素
krug在書中引入了好感儲存器這一概念。簡單的講就是我對于產品(網頁,應用)的印象。
好感儲存器受很多因素的影響,不僅受產品影響,同時也受用戶的情況而定。
1.受個人的特質的影響。有些人的好感值很高,有些人的好感值很低。
2.受用戶使用時的外部情況而定。情景時急迫的還是輕松的等等。
3.好感值是可以重新填滿的。比如更好的用戶體驗等。
4.有時候一個簡單的錯誤就能清空它。
降低好感度的幾種方式:
1.隱藏我想要的信息(服務電話,運費,價格),欺騙敷衍。暢途購票隱藏保險費用,不明確標注服務費用,最后的車費總是讓我很費解。
2.強制用戶按照他們的方式行事。最常見的就是一些信息的輸入格式問題。
3.向我詢問不必要的信息。私密的個人信息在不觸及產品的使用時最好別問用戶索要。
4.設置障礙以及網站看上去不專業。廣告是用戶最大的敵人。
提升好感度的幾種方式:
1.知道用戶在你的網站上想做什么,并讓它明白簡易
2.告訴我我想知道的(和我利益相關的)。運費,咨詢等。
3.減少步驟,優化流程,優化操作方式(點擊代替輸入等),優化信息呈現方式等。
4.知道我的疑問,并能在我需要的時候給予解答。(在合適的時候,合適的地方,呈現合適的信息)FAQ.
5.為我提供協助(人性化),友好的打印頁面(去廣告)。
6.容易從錯誤中恢復。
7.如果不確定,記得道歉。技術或者設計上做不到用戶想要的,至少讓他們明白你知道你給他們造成了不便。
可訪問性
可訪問性是web內容對殘障人士的可閱讀和可理解性。65%的人口是殘障人士。
簡單的3秒可訪問性測試,增大網頁字體。(wcag準則可供了解)
幾個簡單的容易實現的方案:
為每張照片增加合適的alt文本;使用合適的標題;表單配合屏幕閱讀器;在每一頁的最前面增加一個跳轉到主要內容的鏈接;讓所有的內容就可以通過鍵盤訪問;在文本和他們的背景之間設置明顯的對比;采用一份可訪問性良好的模板。
三。爭取他人重視可用性
如何說服管理層為可用性工作提供支持
1.演示ROI(比較困難)。
2.用他們的語言說話。不在討論用戶,了解公司內部難題,陳述我們的方法可以有力的解決這些問題。
3.讓你的老板來觀看可用性測試
4.在個人時間進行第一次測試。
5.對競爭對手進行測試
6.弄清楚自己在公司大局中的位置。
最后,進行一些小總結。
不要使用小而對比度不強的字體。
不要把標簽放到表單字段里。除非表單超級簡單,標簽隨著文本的輸入上浮到輸入框上方。
保留訪問過的和未訪問過的鏈接之間的區別。
不要讓段落漂浮在段落之間。標題和相關段落有更小的距離。