別讓我思考web
——Krug可用性第必定律數據庫
點擊多少次都不要緊,只要每次點擊都是無需思考,明確無誤的選擇。——Krug可用性第二定律瀏覽器
去掉每一個頁面上通常的文字,網絡
而後把剩下的文字再去掉一半工具
——Krug可用性第三定律佈局
2.1 第一個事實, 咱們不是閱讀而是掃描測試
2.2 咱們不作最佳選擇 而是滿意便可字體
用戶會選擇第一個合理的選項,這就是滿意策略,一旦咱們發現一個連接,看起來彷佛能跳轉到咱們想去的地方,那就是咱們將會點擊它的大好機會。尋找最佳策略很難,須要的時間也很長,滿意策略效率更高。大數據
2.3 咱們不是追根究底,而是勉強應付動畫
3 廣告牌設計101法則,爲掃描設計,不爲閱讀設計
須要注意如下5個重要方面,來保證他們儘量的看到並理解了你的網站
3.1 在每一個頁面上創建清楚的視覺層次
3.2 儘可能利用習慣用法
3.3 把頁面劃分紅明肯定義的區域
3.4 明顯標識能夠點擊的地方
3.5 最大限度下降干擾,下降視覺噪聲
4 動物、植物、無機物 (爲何用戶喜歡無需思考的選擇)
三次無需思考、明確無誤的點擊至關於一次須要思考的點擊
5 省略沒必要要的文字
有力的文字都很簡練,句子裏不該該有多餘的文字,段落中不該該有多餘的句子。一樣,畫上不該該有多餘的線條,機器上不該該有多餘的零件。
多數頁面上的大部分文字都不過是在佔地方,由於沒有人打算閱讀他們。可是由於他們確實在那兒,因此這些多餘的文字都在暗示你可能真的須要閱讀它們來理解究竟是怎麼回事,這樣經常使得頁面看起來難度更高了。
去掉沒有人會用到的文字的幾個好處:
1 能夠下降頁面的噪聲;
2 讓有用的內容更加突出;
3 讓頁面更簡短,讓用戶在每一個頁面上一眼就能看見更多的內容,而沒必要滾動屏幕。
實際上我說的文字是兩種特別的文字:歡迎詞和指示說明
你能夠——並且應該——儘可能減小歡迎詞,能減多少就減多少。
若是指示說明很是冗長,用戶發現他們所需信息的機會也就會很小。
你的目標應該是經過讓每項內容不言而喻來徹底消除指示說明,或者儘量作到這一點,當指示文字變得徹底沒有必要時。則應把它們所有去掉。
必須正確處理的幾個方面
街頭指示牌和麪包屑 設計導航
若是在網站上找不到方向,人們不會使用你的網站。
對應於網站的搜索和導航
若是咱們想要再次訪問網站上的某個內容,不是依靠他在那裏的物理感受,而是記住他在概念層次上的位置,而後從新順着以往的鏈接過去,這就是書籤——存儲的我的捷徑——如此重要的緣由,也就是爲何後退按鈕的點擊率佔據網絡上全部的點擊率的30%-40%的緣由。
持久導航上只能放置4-5個實用工具——用戶用得最多的那幾個工具
持久導航中最重要的元素之一就是把咱們送回主頁的按鈕或連接,讓一個返回主頁(Home)的按鈕始終可見,它或者是一個按鈕或者是一個圖片
提供搜索,喜歡搜索的用戶比喜歡瀏覽的用戶更多,它應該是一個搜索框,大多數用戶登陸一個新站點後,第一件事就是掃描頁面,看有沒有搜索框,記住一個簡單的公式,一個輸入框,一個按鈕,還有‘Search’(搜索)兩個字,不要弄得太複雜——堅持這個公式,特別是要避免——花哨的用詞,只是說明,選項,若是你使用搜索做爲輸入框的名稱,那麼應該使用「Go」做爲按鈕名稱。
頁面名稱就是Web上的路牌,和路牌同樣,若是一切順利,我可能根本不會注意頁面名稱,但我以爲本身可能方向不對時,就須要絕不費勁的看到頁面名稱來肯定方向,因此1 每個頁面都須要有一個名稱,2而且頁面名稱要出如今合適的位置,3名稱要引人注目,4名稱要和點擊的連接一致;在web上突出個人當前位置;
麪包屑菜單(層級菜單)也告訴你你的當前位置——它們之因此被稱做‘麪包屑’是由於她們讓人想起Hansel扔在森林裏的麪包屑蹤影,由於這樣他和Cretel能找到回家的路。用於真正有龐大數據庫且具備複雜層次結構的網站。例如雅虎的網站目錄。
據我所知,About.com的麪包屑作的是最完美的,它體現了幾項最佳實踐
1把它們放在最頂端(頁面的最最頂端,不跟導航爭寵)
2使用'>'對層級進行分割。各類嘗試彷佛都已經確認,大於號是最好的分隔符
3使用小字體
4使用文字:你在這裏
5將最後一個元素加粗
6沒有把他們用做頁面的名稱
標籤是大型網站導航的上佳選擇,由於
1 它們不言而喻
2 它們很難被錯過( 我在進行‘用戶點擊測試’時很是吃驚地發現,大家想不到人們對網頁頂部的按鈕條視而不見的狀況有多嚴重,但標籤在視覺上是如此的不同凡響,他們很難被忽略。
3 它們很靈活(標籤樣式能夠變得很漂亮)
4它們暗示了一個物理的空間
標籤作得很好的是Amazon,它作到了一下3點:
1 正確繪製,選中的標籤應顯示在未選中的以前,不是標籤的不要用標籤的形狀
2 顏色編碼,使色盲也能看得懂(使用同一色系的深淺色)
3 當你進入網站時,一個標籤已經選中
後備箱測試
如今你已經對全部導航部分有所瞭解,能夠進行如下的網絡導航測試了,下面就是這個測試。想一想你被蒙上雙眼,鎖在車子的後備箱裏,車開動一下子之後,把你放在某個網站內容的某個網頁上。若是這個頁面設計良好,當你除去眼罩時,應該能絕不猶豫地回答出一下問題:
1 這是什麼網站?(站點ID)
2 我在那個網頁上?(網頁名稱)
3 這個網站的主要欄目有哪些?(欄目清單)
4 在這個層次上我有哪些選擇?(本頁導航)
5 我在導航系統的什麼位置?(‘你在這裏’的指示器)
6 我怎麼搜索?(搜索框)
主頁設計
首先要認可,主頁不禁你控制
主頁要完成的任務:
1 站點的標識和使命 (logo 和能在此網站上找到什麼)
2 站點層次——由持久導航來處理
3 搜索 大多數網站須要在主頁上設置一個突出顯示的搜索框
4 導讀。就像雜誌封面同樣,主頁要用一些‘裏面有精彩內容’的暗示來吸引我。
5 內容更新。若是網站的成功取決於我是否常常回來訪問,那麼主頁應該有一些常常更新的內容。——不該是一潭死水
6 友情連接 須要在主頁上預留空間用來放置廣告、交叉推廣、合做品牌的友情連接等。
7 快捷方式 最常訪問的內容片斷值得在主頁上放置連接,省得用戶四處尋找。
8 註冊,登陸。
9 讓我看到本身正在尋找的東西
10 …...還有我沒有尋找的。精彩的 也許我會感興趣的
11 告訴我從哪裏開始。一個新的網站裏,無從下手的感受糟透了。
12 創建可信度和信任感。對於一些訪問者來講,主頁將是你的網站留給他們好印象的惟一機會。
主頁應——傳達總體印象,越快越好,越清楚越好,在我第一次進入一個新網站時,主頁應回答我頭腦裏的四個問題:
這是什麼網站;我能在這裏作什麼;網站上有些什麼;爲何我應該在這裏,而不是在別的地方;
主頁上的每同樣東西都有助於咱們理解這個網站是作什麼的,可是在這個頁面有兩個重要的位置,咱們但願能從這兩個地方找到清楚的陳述。
1 口號,最有價值的位置之一是靠近站點ID的地方,當咱們看到一個和站點ID相關聯的短語時,就知道這是口號,而後咱們會把它當作整個網站的描述。
2 歡迎廣告,歡迎廣告是網站的簡要描述,在主頁的首要位置顯示,不須要滾動屏幕就能看到。
沒有什麼比得上一個好的口號,口號是一條精煉的短句,刻畫了整個企業,總結他是什麼。
好的口號要清楚、言之有物、長度適中,顯而易見
測試:你不能只依靠本身的判斷力,必須把這也拿給公司以外的人看,讓他們告訴你的設計是否達到了目標,由於只有「網站宗旨」的缺失是公司內部人員不會注意到的。
當進入一個新的網站,快速掃描主頁以後,我應該能明白無誤地知道:
若是我想搜索,能夠從這裏開始。
若是我想掃描,能夠從這裏開始。
若是我想掃描該網站最精彩的內容,能夠從這裏開始
在那些針對包含一系列步驟的過程所創建的網站上,過程的起點應該很顯眼,而在那些須要新用戶註冊、老用戶登陸的網站,應該突出顯示註冊和登陸的位置。
遺憾的是,推銷商品的須要有時會淹沒上面提到的這些地方。若是主頁上盡是大喊大叫的‘從這裏開始!’、‘不,先點擊我!’,就很難找到這些起點。
要避免這種狀況,最好的方法是讓搜索框看起來像搜索框,讓欄目列表看起來像欄目列表。此外,要清楚的給他們加上文字描述,例如‘搜索’,‘分類瀏覽’、‘登陸’、‘從這裏開始’(對於多步驟過程)。
主頁導航和持久導航能夠不一樣,但也不要相去甚遠,最重要的是讓欄目的名稱保持不變,一樣的文字和一樣的分組,儘量多地保持相同的視覺提示也頗有用:一樣的字體、顏色和大小寫。
一天10美分的可用性測試
讓測試簡單——這樣你能進行充分的測試
關於測試的幾個事實:
1、若是想創建一個優秀的網站,必定要測試
測試更像邀請外地的朋友來參觀,不可避免的,當你和他們一塊兒四處遊玩時,你會看到平時不會注意到的一些狀況,由於你對它們太熟悉了,同時你也意識到有不少你認爲想固然的事情,對別人來講卻並不是如此。
2、測試一個用戶比不作測試好一倍
3、在項目中,早點測試一位用戶好過最後測試50位用戶
一旦一個網站投入使用,要改變他就不那麼容易了,有些用戶拒絕作出任何變化,由於即便很小的變動也會給他們帶來深遠的影響,因此任何在開始時就有助於防止你犯錯誤的方法都很划算。
4、若是進行測試的用戶接近可能使用網站的用戶,那麼很好,但更重要的是儘早地和常常地進行測試。
5、測試的關鍵不是要證實什麼或者反駁什麼,而是瞭解你的判斷力。
6、測試是一個迭代的過程。
7、沒有什麼比現場用戶的反應更重要
跳樓大減價的可用性測試
在最開始的時候,可用性測試花費昂貴,你須要創建一個可用性實驗室,有一間位於單向玻璃後面的觀察室,至少要有兩部攝像機來錄製用戶的反映和正在使用的目標對象,此外,還須要招募大量的測試用戶,以獲得有統計意義的結果,這是科學研究,須要花費2到5萬美圓,所以不會常常進行。
跳樓大減價的可用性測試應該測試多少用戶?
不少狀況下,我認爲,每輪測試的理想用戶數量應該是三個,最可能是四個,前三個用戶極可能會遇到幾乎全部最明顯的問題,並且更重要的是多作幾輪測試,而不是寫下每輪測試裏面發現的全部問題。只測試三名用戶有助於保證你很快進行下一輪測試。
寬鬆招募,曲線上升
1、事實上,咱們都是初學者。
2、設計出的網站只有你的目標羣體能使用,這一般並非一個好主意。
3、提供合理的激勵(報酬)
4、測試前避免對網站(或網站背後的組織結構)進行預先討論。
如今能夠直接使用錄屏軟件。
以後的關鍵是讓他說話,並瞭解他是怎樣使用網絡的,大體劃分一下他屬於哪一種用戶,及時知道他在瀏覽網站時在想什麼。只要有可能,儘可能讓用戶在選擇任務的時候說點什麼。
再給他3-4個任務,這些任務加起來不要超過45分鐘。
馬上回顧測試結果
1 給問題分類——回顧你們看到的問題,決定哪些問題須要修正
2 解決問題——找出修正這些問題的方法
你從可用性測試中瞭解到的東西老是會頗有意義,並且每一個觀察了這個過程的人都能看出這些問題,
常見問題:
用戶不清楚概念
他們找不到本身要找的字眼
內容太多了
一些問題分類指南:
1 忽略'Kayak'(皮划艇)問題。在任何測試中,用戶暫時出現錯誤,而後又在不須要任何幫助的狀況下回到原來的軌道,這就像皮划艇時翻船同樣,沒有傷人不算犯規。只要1 出現問題的人立刻發現本身偏離了原來的主題 2 他們儘可能回到原來的方向而不須要幫助 3 這種狀況看起來並無擾亂他們的活動。你就能夠忽略這些,若是用戶關於在哪裏找到他們須要的內容的第二次猜想老是對的,就已經能夠了。
2 抵制添加的衝動。當在測試時清楚地看到人們沒有理解某些內容時,大部分人的第一反應是增長一些內容,例如一些註釋或一些指導說明。而正確的解決方案每每是去除某個(或一些)讓人混淆的內容,而不是增長另外一些干擾。
3 抓住夠得着的果子
*恍然大悟型
*便宜型
有時候,真正的挑戰不是修正你發現的問題,而是修正這些問題的同時不破壞已經正常運行的部分。
每月一個上午:咱們就要求這麼多
在理想狀況下,我認爲每一個Web開發團隊應該在每月畫一個上午的時間進行可用性測試。
一個上午,你能夠測試3-4位用戶,而後在午飯時間進行總結,就是這樣。
可用性是基本禮貌
爲何你的網站應該讓人尊敬
好感存儲器
下降好感的幾種方式:
*隱藏我想要的信息 ; 最多見的狀況是隱藏客戶服務的電話號碼、運費和價格。
*由於沒有按照大家的方式行事而懲罰我 ;不少網站執拗地堅持不在信用卡號碼中加入空格,但這些空格會有助於正確的寫出號碼,不要由於不想多寫一點代碼就讓我在鐵環中跳來跳去。
*敷衍我,欺騙我。咱們都會注意到虛僞的真誠,也討厭假意的關心,想一想每次你聽到‘您的電話對咱們來講很重要’的時候是什麼感受吧!
*給我設置障礙;不得不等待一個長長的flash介紹,或者瀏覽多達數個頁面的自我感受良好的市場圖片,這些都很清楚的代表,你並無理解或者關心——我很忙。
*你的網站看上去不專業;若是你的網站看起來很凌亂,組織的很差,不專業 ,在佈局上沒有下功夫,那麼用戶也會失去好感。
提升好感的幾種方式:
*知道人們在你網站上想作什麼,並讓它們明白簡易。
*告訴我我想知道的
*儘可能減小步驟
*花點心思
*知道我可能有哪些疑問,而且給予解答;保持更新;保持坦率。
*爲我提供協助,例如打印友好頁面;人們但願經過一次點擊就能打印出長達數頁的故事。
*容易從錯誤中恢復;請提供一種優雅的清除的方法讓我從錯誤中恢復。
*若有不肯定,記得道歉。若是你作不到,至少讓他們明白你知道你在給她們形成不便。
可訪問性 級聯樣式表和你
可訪問性是可用性的一部分
除非你要作一個整體決定,確認那些殘障人士都不是你的目標用戶,不然,若是你的網站可訪問性不足,就不能說它是有用的。
幾乎我訪問的每一個網站都沒有經過個人三秒鐘可訪問性測試—增大字體 用瀏覽器的text size命令
支持可訪問性纔是正確的作法
如今就能正確實施的五件事來提升可訪問性
*改正讓人感到混淆的可用性問題 讓網站對咱們其餘的人更好用,會讓殘障人士用的更好
屏幕閱讀器用戶用他們的耳朵掃描
*看一本web可訪問性的書
*開始使用級聯樣式表CSS
CSS的好處:對格式的控制沒有限制;靈活性;瀏覽器之間的一致性;序列化你的內容(你能夠用CSS將內容按順序放置在源文件裏(這就是屏幕閱讀器用戶將聽到的)還能把它們放在頁面上你但願的位置處);容許你從新定義文字大小。
*去摘可以得着的果子
要求太多數據的危險
詢問沒必要要的信息可能產生三個嚴重的後果:
*您經常沒法獲得真實的數據
*您獲得的完整表單更少。您要求的數據越少,獲得的提交就越多,人們在網絡上經常很匆忙,若是表單比他們想象的要長,不少人就會嫌麻煩而不填寫了。
*使您的網站形象降低。若是您只要求必須的數據,那麼您已經和他們創建了一種聯繫,並且在之後的交換中能夠獲得更多的信息。
記住如下三個原則:
*只讓我提供完成這次事務所需的信息。
*不要要求填寫過多可選信息,只是看到那麼多要填寫的字段已經讓人不快了,要求的可選信息較少會獲得更多的回覆。
*告訴我提供本身的信息將獲得的回報,明確告訴我註冊之後將獲得什麼,給我一份電子簡報的樣本,等等
爲您的網站增長「注意力吸引點」
在上網的絕大部分時間裏,人們並不但願被粘着,他們只想完成某些工做,試圖干涉他們如今的任務或者粘着他們只會讓他們以爲煩人,受到愚弄,這是一種最糟糕的強制推銷。試圖增長注意力吸引點也一般會給他們增長障礙。例如,大圖片,載入時間長,而且讓頁面可放置目標內容的空間變小;吸引注意力的音樂和動畫是不少人都受不了的。
固然也有例外,在一些網站上,這些花哨形式是有意義的,那些提供視聽享受的網站:娛樂網站(關於音樂電影等)、純品牌網站(例如一種早餐穀類產品)、Web開發人員的素材網站等。可是若是您的網站不在此列,那麼設置更多的吸引點只會拔苗助長。
世事無絕對
要知道老闆可能並無錯,在堅持一個糟糕設計想法的背後,幾乎老是有一個良好的(或者至少是不那麼糟糕的)意圖,試着去理解這種好的意圖經常能夠找到另外一種方法來達到目的。