內(nèi)容簡介

本書是一部專注于細節(jié)的web用戶體驗設計實戰(zhàn)手冊。它將網(wǎng)站交互全流程分解為30多個瞬間，從指引用戶到離開。針對每一個瞬間，作者像講故事一樣給出了經(jīng)過業(yè)界干錘百煉積淀下來的實戰(zhàn)解決方案，闡述解決方案背后的方法和思路，將設計理念貫徹其中，并剖析了常見錯誤和陷阱。

作者簡介

Robert Hoekman，Jr． 著名的交互設計師。Miskeeto公司創(chuàng)始人，曾任職于Adobe、美聯(lián)航等知名公司。除本書外。他還著有Desiging the Obvious以及FlashUser ExperienceBest Practices等多部暢銷圖書，都在業(yè)界產(chǎn)生了較大影響。

序

這本書絕不是什么權(quán)威或官方的答案，因為本來就沒什么權(quán)威或者官方答案。當我想你具體推薦什么的時候，那只是基于我自身的經(jīng)驗、觀點和認識、它只是一個交流的開始，其目的是讓你思考。

在這個瞬間我們希望用戶做什么，界面應該如何鼓勵他們完成任務？用戶此刻的目標是什么？我們又如何實現(xiàn)他的目標？每一瞬間都有可能摧毀或加強用戶對產(chǎn)品的信心，因為每個人在每個時刻所要完成的任務，對于此刻的他而言，那就是最重要的任務。

第一部分指引用戶

第1章 令人心動的第一印象

發(fā)現(xiàn)頁面布局

布局是內(nèi)容組織的必然結(jié)果，它往往是自己逐漸形成的。一旦周全考慮了頁面的所有需求，并且確定了每一塊的內(nèi)容，你的工作就變成了看著所想要的布局自己展現(xiàn)在你眼前。/*發(fā)現(xiàn)布局是根據(jù)用戶需求設計的必然結(jié)果*/

在開始安排頁面內(nèi)容時，我會把所有欄目區(qū)域都扔到顯示屏上，然后移來移去不斷調(diào)整讓它們彼此協(xié)調(diào)。/*調(diào)整以網(wǎng)站要實現(xiàn)的目標為依據(jù)*/

引導用戶的視線

人們在瀏覽頁面或布局的時候，視線往往趨向于從左上角移動到右下角，都是從左向右，從上至下的閱讀。右上角和左下角是視覺盲點。因此，采用對角線平衡通常都是一個好設計所需要考慮的因素，運用視覺元素來創(chuàng)建一條虛擬的線，讓用戶的視線跟隨它從左上到右下成對角線似的移動，這條對角線就像箭頭一樣指向最終視覺落點。

使用顏色來吸引人的注意力，相對一致性來說，人對物體間的差異性更為敏感。在頁面中加入一些顏色可以非常有效的把瀏覽者的視線引導到我們希望他們看到的地方。

第2章 凸顯個性

統(tǒng)一設計風格，形成積極的印象

使用符號，它們只需要簡單的在網(wǎng)站中重復出現(xiàn)，以某種延續(xù)的趨勢來保持一致的主題風格。

第3章 導航之道

人們獲得導向的方法是：粗略掃視一遍頁面，看看自己有哪些選擇，并快速過濾掉哪些無關(guān)自己興趣的內(nèi)容。當某個符合我們需要的鏈接出現(xiàn)時，我們會更為仔細的查看與其毗鄰的文字，以確定其是否是我們需要的選項。如果是，我們就點擊。

告訴軟件該做什么

軟件不是為了我們能點擊那些按鈕而存在，它是為了我們完成任務而存在，這樣我們才能做事情。所以導航欄應該幫助我們感覺自己在做一些事情，讓我們找到當司機的感覺。人類不喜歡按軟件的要求去做事情。在決定采取某個行為的瞬間，我們希望由自己控制軟件，由自己告訴它應該做些什么。任何違反這一意愿的軟件都會讓人感到愚蠢而糟糕。/*不符合用戶心智模型要悲劇*/

避免Login綜合癥

Login不是一個動作，它是名字而非動詞。在產(chǎn)品登陸界面中使用它會顯得很不專業(yè)。用戶所需要的并不是去和界面里面的對象交互，而是去做自己所要做的事。他們并不是單擊它想看登陸面板，而只是想要登陸。因此你所需要的不是一個名字，而是一個命令/*sign in，可以試試多用動詞，引導用戶多使用動作來完成目標，同時可以讓用戶的控制欲得到滿足，因為所有動作指令都展現(xiàn)在眼前了，有種一切盡在掌控的感覺有木有*/

第4章 鏈接生來不平等

讓環(huán)境提示成為引導的線索

日本的城際鐵路線上，每一站臺都會在列車進站后播放自己獨特的音樂旋律，有效的引起乘客注意，從而提早準備下車，這種提示方式成為環(huán)境提示。作者受到啟發(fā)把公司新聞列表內(nèi)重要的新聞鏈接放大，凸顯其重要性。Google Reader的一個版本中使用了標簽云，標簽含有越多，該標簽字體就越大，項目點擊的次數(shù)越多，該標簽顏色就越深。/*作者受到啟發(fā)后，使新聞列表由上至下逐漸淡化，逐漸變小，突出了新聞的新舊交替。666*/不用強迫自己這么做，但請時刻留意去尋找機會和靈感，哪怕它們看上去和你所做的事情毫不相干。

第5章 標簽云里抬頭看路

標簽云是一種鏈接列表，顯示在一個區(qū)域內(nèi)，并且按照熱門程度或其它準則來加重顯示其中的某些標簽，最后的結(jié)果看上去就像一片鏈接的“云層”。

如果想要從標簽云中獲得方便，就需要了解為什么有些鏈接比其它的大或顏色比其它的深，但幾乎沒有多少人能真正明白標簽云的含義。設計師建議在標簽部分加上明確標題，如“最受歡迎的主題”或加上說明性文字。

但我覺得應該把整個標簽去掉，僅顯示一個短列表，按受歡迎程度排序即可。為什么呢？因為不存在任何理由強迫用戶思考，無論是一個頁面還是一個場景。我們沒有理由要求用戶學習了解為什么有些鏈接比其他的要大，用戶也沒有理由被迫花精力去學習標簽云，更不用說去探索它的重要性了。往好了說，它會迫使用戶在不必要的地方思考；往壞了說，用戶很可能因此而困惑，甚至煩惱。

第二部分學習

第6章 開門見山

為什么說歡迎辭沒有用

/*作者引用了Jakob（《Don’t Make Me Think》作者）的話：人們不讀網(wǎng)頁上的文字，只是掃描，blablabla*/短篇幅的文字才有可能吸引一部分注意力（如果有用），從而有助于用戶理解他們正在看什么。探索一個新的Web時，我們會尋找那些顯著的線索，目的是為了了解這個網(wǎng)站的用途。比起歡迎語，人們更感興趣的是要完成什么事情，而不是閱讀一段毫無目的、對達成目標毫無幫助的文字。

為掃描而設計

用戶并不關(guān)心自己受歡迎，他們關(guān)心的是自己的目的。所以首先讓用戶知道自己進入了正確的頁面，把標題改成用戶的目的，比如查找課程。/*標題多使用動賓詞組，比如查找課程就比課程查找動作感強，讓用戶有種掌控感，點擊就會馬上行動。重要的不是給用戶的信息量有多大，而是我們提供的信息是不是用戶真正需要的*/

第7章 為界面做標記

停止標記你的“假設

互聯(lián)網(wǎng)存在著無數(shù)缺少上下文語境的信息，它們要求用戶輸入、選擇，卻不解釋這些行為的含義?？偸窃诩僭O用戶知道一些只有我們才知道的事情。檢查應用程序中每一個控件的標記，問自己，一個從沒見過這個程序的人是否也能明白它的意思。/*設計應該基于用戶什么都不懂這種假設，而不是假設用戶什么都懂，具體看產(chǎn)品定位吧*/

第8章 生動傳神的視頻（略）

視頻演示勝過千言萬語

使用視頻來表述問題

使用視頻來表述想法

第三部分搜索

第9章 提出搜索詞建議

運用Poka.yoke機制，使用自動完成輸入框

Poka.yoke是一個日語詞匯，有防止錯誤的意思。自動完成的設計思路就是Poka.yoke預防機制的一個例子，自動完成指的是一種能夠嘗試猜測用戶輸入的文字并動態(tài)搜索出適配的結(jié)果的文本輸入框，還有些輸入框會顯示一個適配的列表，用戶可以在其中選擇。這兩種自動完成都能夠避免用戶打錯字，確保他們的搜索更有效率/*此案例為一個創(chuàng)建公司信息的網(wǎng)站，創(chuàng)建公司信息需要輸入公司名，為避免用戶輸入錯和方便使用，使用了這種設計。書中很多東西也許看起來有些過時，但我想強調(diào)的是這本書是09年的，所以在當時是很了不起的創(chuàng)新*/

局限性

自動完成這一功能并不適用所有情況，它更適用于用戶搜索小范圍數(shù)據(jù)。如使用Google搜索時，盯著鍵盤輸入的用戶不會注意到推薦列表，用戶往往會因為推薦而放棄自己先前的主張，但其實他們自己想輸入的文字可能比推薦的詞匯更準確。

在輸入的字符數(shù)足以讓推薦詞有意義之前，請不要顯示推薦詞。當然，從另一方面來說，目前也沒有一個魔法數(shù)字能確切的規(guī)定到底在什么時候顯示推薦詞，因此我們暫且把這個界限定為3~4個字符。

第10章 列出搜索結(jié)果

信賴那些行之有效的標準

/*列舉了Google的分頁標準，包含：上一頁、下一頁、頁碼、當前頁碼等信息。但用途不一樣的網(wǎng)頁分頁設計還是要不一樣，比如跳轉(zhuǎn)、隱藏頁碼，設置成上拉列表、總頁數(shù)、首尾頁按鈕、信息數(shù)量…… */

第11章 精煉你的搜索

高級搜索也簡潔

使用行內(nèi)擴展的方式，新的元素會憑空掉落在網(wǎng)頁中，然后把其它內(nèi)容網(wǎng)頁面下方推開。通過這種方式，用戶點擊Advanced鏈接后不需要等待載入新的網(wǎng)頁。

遞進顯示

沒有必要把高級搜索里的所有選項都列舉出來。遞進顯示能根據(jù)實際需要，即依靠用戶的輸入而逐步顯示控件，而不是默認把它們?nèi)谐鰜怼＿f進顯示是一個簡單的概念，它能以各種方式適用于絕大部分的Web應用，可以用來隱藏各種高級功能。

第四部分深入

第12章 視頻播放器的標準化

撥開VCR設計的迷霧

/*吐槽了YouTube播放器，點擊畫面中間的播放按鈕跳轉(zhuǎn)到播放頁面去而不是直接播放，不符合用戶預期；播放時間只顯示剩余時間，而不是整個時間，但我覺得沒必要知道整個時間，知道還有多久看完就夠了。總之作者覺得這種設計沒必要，各種夸獎TED的視頻播放器*/

第13章 鞏固你的表單布局

設計出行云流水般的表單

左對齊的表單，降低了用戶往下瀏覽的速度，如果是需要仔細閱讀的表單，這樣可能很好。但右對齊更易讀，標簽和輸入?yún)^(qū)域之間更近，但右對齊的標簽在頁面左側(cè)形成一條難看的鋸齒邊緣。所以我決定將布局變成一列來顯示，標簽放在每個輸入?yún)^(qū)域的上方，左對齊。

讓“確定／取消”更完美

單擊OK并不能使用戶建立一個清晰的期望，將其修改為動作（注冊、搶票、預定），使用戶明確期望。

首選處理方式和第二處理方式

對于在網(wǎng)站注冊填寫表單的用戶來說，他最有可能選擇點擊OK，它成為首選處理方式。取消整個注冊流程則是不太可能的選擇，稱為第二處理方式。如果兩個按鈕都被賦予了同等的視覺重要性，那么和用戶則必須閱讀按鈕上的標記，而且兩個按鈕都得閱讀以便決定應該點擊哪一個。

費茨法則（Fitts Law）:點擊某個目標所花時間與“鼠標與目標距離”和“目標尺寸”密切相關(guān)。所以，我們可以減弱第二處理方式的注意力（從按鈕變?yōu)殒溄樱?。引導用戶的視線到首選處理方式上去。

這很重要

最重要的不是在填表單的過程中摳出那珍貴的數(shù)秒鐘，而在于完成表單所帶來的價值是否超過填寫表單時帶來的麻煩和沉悶。

第14章 駕馭Wizard向?qū)?/b>

建立清晰的預期

填寫表單時點擊Next,會載入下一步驟頁面，但是用戶不知道還有多少步，以及當前處于哪一步。告訴用戶他們過去在哪，現(xiàn)在在哪，將來還要到哪里。將所有步驟和名稱都展現(xiàn)給用戶會更有幫助，用戶隨時可以瞥一眼自己正在哪個階段，然后決定是否繼續(xù)。

為了讓用戶對表單的長度能有一個清晰的預期，我需要體現(xiàn)出Wizard向?qū)Ю锏拿總€步驟真的都非常短，能實現(xiàn)這一點的方式就是為這個區(qū)域設定一個固定高度。換言之，我需要一個可折疊面板空間來取代現(xiàn)有的標簽頁。/*頁面上有步驟1，步驟2，步驟3，步驟列表，開始顯示步驟一的表單，其它步驟不可點擊，點擊Next后，折疊步驟1表單，打開步驟2表單*/通過顯示步驟數(shù)并幫助用戶推斷表單的長度，我們?yōu)橛脩艚⒘饲逦钠谕?/p>

第15章 最后的一英里：即時校驗

要糾錯，也要贊揚

絕大多數(shù)表單只有在出錯時才提醒你，而做對時什么也不說。我們希望只要用戶正確完成一個步驟就第一時間告訴他們，比如用戶正確填寫完某項信息，在該項旁邊顯示一個綠色對勾標示通過。而下一步，毫無疑問就是檢測錯誤，并友好的進行相關(guān)提醒以便用戶改正。關(guān)鍵在于我們應在用戶輸入之后再顯示錯誤提示，某網(wǎng)站的錯誤，輸入框剛獲得焦點時就會出現(xiàn)錯誤提示。

第16章 簡化長表單（略）

第17章 讓他們登錄

頁面自動記錄用戶名，找回密碼界面無需再輸入用戶名。IxDA嘗試了只輸入用戶名就能登錄的流程，但是換個IP就無法進行登錄了。

第18章 計算字符數(shù)

在輸入框旁邊顯示當前還可以輸入多少字符，不再迫使用戶自己逐字計算字符。

第五部分參與

第19章 創(chuàng)建個人資料（略）

第20章 編輯

在正確的時間顯示正確的工具

遞進顯示是關(guān)鍵：只顯示每項任務需要的工具和選項的關(guān)鍵。

第21章 開展社交活動

朋友與隨員

DTRT真正想要的并不是建立友誼，而是一種簡單又不張揚的功能，它能激發(fā)人們閱讀耕讀偶的文章、與網(wǎng)站發(fā)生更多的關(guān)系。Twitter提供了一種較為弱勢、被稱為Follow的交友方案，不用付出太多精力，而同樣能隨時掌握另一位成員的動向，這樣就夠了。

第22章 顯而易見的博客

通往更好的博客的三條路

博客應便于瀏覽者掃描頁面，以決定某篇日志是否值得閱讀；博客應當能更好的鼓勵交流；博客應能誘使人們閱讀更多日志。

第23章 邀請討論

讓你的顧客發(fā)表意見

不要控制留言、評論或其他香瓜您的東西，控制將會帶來負面效果。讓你的顧客自由發(fā)表意見以表示你信任他們的評論和他們自身的判斷能力。給用戶自己做判斷您的權(quán)利，他們自然會忽略那些無用的評論。

起用你的0taku

那些抱怨聲最大的、歡呼最熱烈的、有人需要解答問題盡最大努力幫助的人，這些人就是你的Otaku（發(fā)燒友），你可以讓他們幫助你。/*相當于小米的粉絲營銷*/

第24章 得到一個好的評分（略）

清晰勝于效率

第六部分管理信息

第25章 讓RSS更有意義

要想讓用戶戰(zhàn)勝新生技術(shù)的陌生感并加以運用，最困難的一點就是首先要意識到人們并不關(guān)心技術(shù)本身，而是關(guān)心自己能得到什么。我們推廣的并不是技術(shù)，而是技術(shù)帶來的好處。推廣某項新技術(shù)時，我們首要的目標應該是讓它通俗易懂。很少有人知道RSS是什么，直接在按鈕上標明Feed Reader，這樣人們都能輕易地訂閱。一個新想法是否容易理解是其成敗的關(guān)鍵。

第26章 自定義標簽

分類系統(tǒng)、分眾分類系統(tǒng)以及變異體

有兩種不同的方法可以組織網(wǎng)站內(nèi)容，一個是建立分類系統(tǒng)，也就是一旦你定義好類別，所有人都將遵循這個分類。另一個是分眾分類系統(tǒng)，用戶可以根據(jù)自己需要持續(xù)不斷地添加和改變分類。

如果你決定使用分眾分類系統(tǒng)、使用Tag標簽，那就要思考如何讓Tag模式顯得很友好，同時支持用戶的思考方式。我嘗試去掉專業(yè)詞匯Tag（自定義標簽），而使用Lable（標簽）。標簽根植于現(xiàn)實世界，因此大多數(shù)人很容易理解。就像RSS一樣，使用更加熟悉的詞語能夠降低對新事物的學習曲線。

提出建議

不同的人可能會不知不覺的為同一個Tag創(chuàng)建多個版本，所以我們需要某種方法來偵測那些想死的Tag，并且讓用戶能夠為想標記的內(nèi)容選擇那些已有的Tag。我認為網(wǎng)站應該像Google Suggest那樣提供自動完成功能，用戶輸入某個Tag時，系統(tǒng)自動搜索出近似的Tag，然后以列表形式呈現(xiàn)，供用戶選擇。還有一種方法是，用戶輸入了自己的Tag之后顯示一個推薦頁面，頁面實現(xiàn)近似的Tag，這個頁面可以用文字向用戶解釋他可以把自己的新Tag和其他人的Tag相匹配。這樣為相同Tag創(chuàng)建多個版本的幾率將降低，查找更方便了。

第27章 通過拖放來組織信息

交互的三種狀態(tài)

一個為有效的拖放交互需要提供完整的3種狀態(tài)：邀請，操作，實現(xiàn)。

“邀請”狀態(tài)包含頁面上任何邀請你采取行動的元素，它可以使觸發(fā)某個行為的按鈕或者是命令鏈接。

“操作”狀態(tài)包含用戶要完成一項任務所必須采取的所有行動。每一個步驟都必須盡可能清楚，讓用戶容易學習并理解這種交互行為。在操作同事，界面也根據(jù)需要進行更新，以確切的顯示出操作將對頁面產(chǎn)生的影響。

“實現(xiàn)”狀態(tài)就是讓用戶知道他的交互已經(jīng)實現(xiàn)了。“實現(xiàn)“有時候只需顯示一行文字，告訴用戶他的資料已保存，有時候意味著發(fā)一封確認郵件。

完成的感覺

不論復雜還是簡單的交互，我們都需要呈現(xiàn)著這三種狀態(tài)，才能讓用戶理解如何開始、如何完成，然后相信自己操作無誤。/*操作前、操作中、操作后都要給用戶信息反饋，讓用戶知道能做什么、怎么做、是否做成了*/

第28章 用系統(tǒng)通知來管理中斷

為改變而設計

提前告訴用戶你們正在做一些可能會影響他們的事情，比如更新、維護。好處：它會讓用戶產(chǎn)生期待；它會讓用戶有心理準備；它會為用戶制造新話題。

第七部分離開

第29章 退出

設計Sign-out流程時，LinkedIn退出后，你將會看到大段文字，讓人困惑不已，不知道自己是否已經(jīng)退出。大家都想鼓勵用戶再度光臨。G-mail在這點做得很棒：退出后，回到登錄頁面，頁面還顯示一些它希望你能深入了解的新功能。

第30章 抹去那些塵封的用戶

長時間未登錄的用戶，給他們發(fā)郵件吸引他們回訪，或者調(diào)查清楚用戶為什么長時間未登錄。

第31章 由他們?nèi)グ?/b>

讓用戶能為自己大點行李，這點非常重要。例如某個用于個人數(shù)據(jù)的應用程序，必須為日后可能的注銷行為提供一種可靠的保留信息的方式，否則客戶在一開始根本就不會感興趣。/*卸載軟件后都會詢問是否保留原來的設置或下載的文件，以及勸說不要卸載和反饋選項*/

優(yōu)秀設計的金鑰匙

只提供用戶所需。

讓初學者盡快轉(zhuǎn)變?yōu)橹屑売脩簟?/p>

盡可能的預防錯誤，如出錯也應友善處理。

精簡和優(yōu)化交互與任務流程，讓最復雜的軟件清晰易懂。

為支持特定行為而設計。

持續(xù)的改進和優(yōu)化我們的流程與程序。

忽略用戶的某些要求，堅信自己理想和洞察力。

最后的補充

省去一些東西，遠比把它們?nèi)M來容易。做好比作壞更加容易。想要取得成功，你只需要留意自己要傳達的訊息，并且充滿熱情的去傳達它們。結(jié)果其它所有一切會紛至沓來。通過留意所要傳達的信息，你的目標將變成想辦法如何花最少的努力去完成傳達。通常來說，你做的最少的那種方法其實就是最正確的解決方案。

跟隨你自己的福祉，找到你自己的禪，設計屬于你自己的瞬間。