用戶體驗要素

用戶體驗要素

第一章 用戶體驗為什麼如此重要

日常生活中的遭遇

• 舉例：由一個鬧鐘引發的一大串的倒霉事

什麼是用戶體驗

• 分析遇到的一大串倒霉事也許是可以避免的
• 產品如何工作是決定產品成敗的關鍵因素
• 用戶體驗是指人們如何」接觸「和」使用「這個產品，用戶的使用感受

從產品設計到用戶體驗設計

• 設計一個用戶體驗良好的產品意味著不僅僅是功能或外觀那麼簡單
• 正確的產品形態不是由」功能「所決定的，應該由」用戶自身的心理感受和行為「來決定
• 用戶體驗設計通常要解決的是應用環境的綜合問題，併兼顧視覺和功能兩方面的因素，同時解決產品所面臨的其他問題

為體驗而設計：使用第一

• 產品越複雜，確定如何向用戶提供良好的使用體驗就越困難。

用戶體驗和網站

• 網站包括了以內容為主的網站產品和以交互為主的網站應用
• 面對大量的選擇，用戶只能自己想辦法，去決定哪一個網站功能會符合他的需求
• 用戶體驗決定了客戶是否還會再次光顧

用戶體驗就是商機

• 用戶是沒有忠誠度的-如果你的用戶得到不好的體驗，他們將不會再回來
• 轉換率是一種常用的方式，來衡量用戶體驗的效果
• 提高效率-幫助人們工作的更快和減少他們犯錯的機率

在乎你的用戶

• 以用戶為中心的設計：在開發產品的每一個步驟中，都要把用戶列入考慮範圍
• 用戶體驗對你的用戶很重要

---

第二章 認識這些要素

五個層面

• 表現層—由圖片和文字組成
• 框架層—按鈕、控制項、照片和文本區域的位置
• 結構層—設計用戶如何到達某個頁面，做完去哪裡
• 範圍層—由功能和特性構成
• 戰略層—經營者想從網站得到什麼，用戶想從網站得到什麼

自下而上的建設

• 戰略、範圍、結構、框架和表現
• 每一個層面的決定都會影響到它之上層面的可用選項
• 連鎖效應—每個層面中可用的選擇都會受到其下層面的約束
• 每一個層面的工作在下一個層面結束之前完成

在設計流程中，不要把每個層面的工作在下一個層面【開始之前完成】。更好的方法是讓每一層面的工作在下一個層面【結束之前完成】。

基本的雙重性

• 功能型的平台類產品—關注點是任務：所有操作都被納入的一個過程，去思考人們如何完成這個過程
• 信息型的媒介類產品—關注點是信息：網站應該提供哪些信息，這些信息對用戶的意義是什麼

用戶體驗的要素

• 戰略層：1. 用戶需求

2. 產品目標

• 範圍層: 1. 功能型產品-功能規格（對產品」功能組合「的詳細描述）

2. 信息型產品-內容需求（對各種內容元素的詳細描述）

• 結構層: 1. 功能型產品-交互設計

2. 信息型產品-信息架構

• 框架層: 1. 信息設計

2. 功能型產品-界面設計

3. 信息型產品-導航設計

• 表現層: 創建感知體驗

應用這些要素

• 對用戶體驗產生影響

1. 內容: 在網頁里「內容至上」

2. 技術: 所能提供給用戶的體驗狀態主要是由技術來決定的

---

第三章 戰略層

戰略層的定義

• 「產品目標」和『用戶需求「組成戰略層，成為我們在設計用戶體驗過程中做出每一個決定的基礎
• 產品目標：我們要通過這個產品得到什麼
• 用戶需求：我們的用戶要通過這個產品得到什麼

產品目標

• 商業目標

1. 為避免太具體、太寬泛的目標，我們應該在充分了解問題之後在得出結論

2. 明確定義」成功的條件「，而不是定義」通向成功的路徑「

• 品牌識別

1. 品牌識別：除了商標、色調、字體，更重要的是概念系統、情緒反應（對用戶起著潛移默化的作用）

2. 你必須要決定品牌形象是無意之中形成的，還是經過產品設計者有意精心安排的結果

• 成功標準

1. 一些可追蹤的指標（轉化率、回訪數、印象數），在產品上線以後用來顯示它是否滿 足了我們自己的目標和用戶的需求。

2. 有時這些成功標準與網站本身和用戶如何使用該站有一定的關係

用戶需求

• 用戶細分

將具有某些共同關鍵特徵或者共同需求的用戶劃分成組

1. 人口統計學標準：性別、年齡、教育水平、婚姻狀況、收入等
2. 消費心態檔案：用戶對於這個世界，尤其是與你產品相關的某個事物的觀點和看法的心理分析方法
3. 使用者的社會或專業角色
4. 用戶對技術的熟悉程度和適應程度，以及對產品相關行業背景知識的熟悉程度（新手用戶、資深用戶）

不同用戶群的需求也有可能是彼此矛盾的，要麼做取捨，要麼為執行相同任務的不同用戶群選擇不同的操作方式

不同的用戶群有不同的需求，創建細分用戶群，只是一種用於」揭示用戶最終需求的手段「

• 可用性和用戶研究

1. 市場調研方法：問卷調查、焦點小組—是獲取用戶的基本信息的寶貴來源
2. 現場調查：用於了解在日常生活情境中的用戶行為
3. 任務分析：仔細地分解用戶完成任務的精確步驟
4. 用戶測試：請用戶來幫忙測試你的產品

可用性的最終目標：尋找令產品更容易使用的途徑

• 創建人物角色

在用戶體驗設計的過程中，人物角色是從用戶研究中提取出的、可成為樣例的虛擬人物

團隊角色和流程

• 產品目標和用戶需求經常被定義在一個正式的戰略文檔或願景文檔中

1. 它不僅是列出目標清單，還提供目標之間的關係分析，並且說明這些目標要如何融入更大的企業中去。目標以及目標分析來自於：決策者（企業管理層）、普通員工、用戶。
2. 要冗長，要簡潔明了切中要點。必須寫，而且要頻繁使用，要發給每個項目參與者（設計師、程序員、信息架構師、項目經理），幫助他們在工作中做出正確的決定。

---

第四章 範圍層

範圍層定義

• 產品應該提供給用戶什麼樣的內容和功能
• 過程： 確定現在能解決那些事情，而那些必須要再遲一點才能解決。
• 產品： 給團隊一個參考點、明確了這個項目中要完成的全部工作，也提供了一門用於討論這件事情的共同語言

文檔的重要性：用文檔來定義產品需求的原因

• 知道正在建設什麼

1. 知道項目的目標是什麼，什麼時候達到目標
2. 責任明晰
3. 能看清相互獨立也不顯著的要求間的內在聯繫

• 知道不需要建設什麼

1. 當關於功能的、各種各樣的可能和想法浮現，用文檔記錄，可以提供一個評估這些想法的架構
2. 當前難以滿足的需求，可以成為啟動下一個版本的基礎，這樣就能形成一個不斷循環的開發過程

功能和內容

• 範圍層確定的是全部的功能需求或功能規格
• 真正的內容常常是通過一個內容管理系統來進行管理的

定義需求

• 需求的詳略程度常常取決於該項目的具體範圍
• 最用之不竭的需求源泉總是來自用戶本身

功能規格說明

• 需要包含在設計或開發過程中出現有可能混淆的功能定義
• 需要記錄在創建這個產品時已經確定下來的決議
• 撰寫規則:

1. 樂觀：描述這個系統將要做什麼事情去」防止「不好的事情發生
2. 具體：儘可能詳細的解釋清楚狀況，這是我們能決定一個需求是否被實現的最佳途徑
3. 避免主觀的語氣：需求必須可驗證，找到某種方式來明確說出應該達到的標準。也可以用量化的術語來定義一些需求，通過這樣的手段來避免主觀性

內容需求

• 文本、圖像、音頻、視頻
• 不要混淆某段內容的格式和目的
• 提供每個特性規模的大致預估：文本的字數、圖片的像素大小、下載的文件位元組、PDF或音頻文件等相對獨立元素的大小等。（只收集最緊要的關鍵資料）
• 確定某個人負責某一內容元素和它的」更新頻率「

各種用戶，需求不同。哪些用戶想要什麼內容——如何呈現它們

確定需求優先順序

• 戰略目標和需求間往往不是一對一的關係
• 有時一個戰略目標將產生多個需求。另一方面，一個需求也可以實現多個戰略目標
• 優先順序別是決定是否採納人們所建議的相關特性的首要因素

---

第五章 結構層

定義

• 確定各個將要呈現給用戶的元素的「模式」和「順序」。

1. 交互設計關注於「可能的用戶行為」同時定義系統如何配合與響應
2. 信息架構關注於呈獻給用戶的信息是否合理並且具有意義

概念模型

• 定義：用戶對於「交互組件將怎樣工作」的觀點
• 把軟體某個特性設計處理成用戶所熟悉的某個概念
• 在交互設計的開發過程中保持使用方式的一致性

1. 軟體使用方式與現實經驗一致
2. 交互方式在整個系統中保持一致

• 使用人們熟悉的概念模型會使用戶更快速的適應一個不熟悉的網站
• 錯誤處理

1. 預防：第一同時也是防止錯誤的方法，是將系統設計成不可能犯錯那種
2. 改正：錯誤發生時，系統應該幫助用戶找出錯誤並改正他們
3. 恢復：給用戶提供可以從錯誤中恢復的方式（撤銷）

信息架構

• 結構化內容

1. 信息架構的主要工作就是設計組織分類和導航的結構，讓用戶可以更有效地找到和瀏覽網站的內容。
2. 自上而下的分類體系：根據產品目標和用戶需求直接進行結構設計。先從最廣泛的、有可能滿足決策目標的內容和功能開始分類，再依據邏輯細分出次級分類。
3. 自下而上的分類體系：從已有資料開始把這些資料放到最低級別的分類中，然後將它們分別歸屬到較高一級的分類
4. 結構質量最重要的標準，不是整個過程一共需要多少個步驟，而是「用戶是否認為每個步驟都是合理的」以及「當前步驟 是否自然地延續了上一個步驟中的任務」。

• 結構方法

1. 信息架構的基本單位是節點
2. 層級結構：節點與其它節點之間存在這父級/子級的關係。
3. 矩陣結構
4. 自然結構
5. 線性結構：經常被用於小規模的結構

一個延展性好的信息架構，能把新的內容作為現有結構的一部分容納進來，也可以把新內容當做一個完整的新部分加入

• 組織原則

1. 節點在信息架構中是依據組織原則來安置的。基本上，組織原則就是我們決定哪些節點要編成一組，而哪些節點要保持獨立標準。不同的組織原則將被應用在不同的區域和網站不同的層面。
2. 一般來說，在網站最高層級使用的組織原則應該緊密地與「網站目標」和「用戶需求」相關。而在結構中較低的層級，內容與功能需求的考慮將對你所採用的組織原則產生很大影響。

• 語言和元數據

遵循「使用用戶語言」並且「保持一致性」的命名原則。同時避免「語義歧義或者不解」

---

第六章 框架層

定義：在框架層主要解決放置的問題

• 界面設計考慮可交互元素的布局
• 導航設計考慮在產品中引導用戶移動的元素的布局
• 信息設計中考慮傳達給用戶的信息要素的排布

習慣和比喻

• 界面要與用戶早已養成的習慣保持一致，比之更重要的是界面要與自身保持一致。
• 網站特性的概念模型有助於保持網站內部的一致性。
• 有效地使用比喻，在於減少用戶在理解和使用產品時的猜測。

界面設計

• 界面設計要做的全部事情就是選擇正確的界面元素，幫助用戶完成他們的任務，還要通過適當的方式讓它們容易被理解和使用。
• 成功的界面設計，是能讓用戶一眼就能發現「最重要的東西」的界面設計，弄清楚用戶不需要哪些東西，並減少它的可發現性或者排除出去。
• 界面設計可以採取各種技巧，使用戶完成任務的過程變得容易。

導航設計

• 導航設計必須完成的三個目標：

1. 提供給用戶一種在網站間跳轉的方法
2. 傳達出這些元素和他們所包含的內容之間的關係。
3. 傳達出它傳達出的內容和用戶當前瀏覽的頁面是什麼關係

• 導航系統

1. 全局導航：提供了覆蓋整個網站的通路
2. 局部導航：提供給用戶在這個架構中到」附近地點「的通路
3. 輔助導航：針對內容、產品或者用戶屬性進行的分類導航
4. 上下文導航（內聯導航）:嵌入頁面自身內容的一種導航
5. 友好導航、網站地圖、索引表

信息設計

• 用一種能」反應用戶的思路「和」支持他們的任務和目標「的方式來分類和排列這些信息元素
• 指示標識

幫助用戶理解「他們在哪裡」以及「他們能去哪裡」「哪條路離目標更近」，可藉助圖標、標籤系統、排版、顏色等視覺指引

線框圖

• 頁面布局：將信息設計、界面設計和導航設計放置到一起，形成一個統一的，有內在凝聚力的構架。

線框圖整合框架層三種方法：

1. 通過安排和選擇界面元素來整合界面設計
2. 通過識別和定義核心導航系統來整合導航設計
3. 通過放置和排列信息組成部分的優先順序來整合信息設計

---

第七章 表現層

表現層定義

• 解決並彌補產品框架層的邏輯排布的感知呈現問題。

合理設計感知

• 五方面組成：視覺、聽覺、觸覺、嗅覺、味覺
• 聲音可以應用到很多不同種類的產品中；可用來通知用戶，還可以使產品變得更具個性
• 評估一個視覺設計方案，應該把注意力集中在它們的」運作是否良好「上

忠於眼睛

• 評估一個產品視覺設計的簡單方法之一是提出這樣的問題

1. 你的視線首先落在什麼地方？
2. 哪個設計要素在第一時間吸引了用戶的注意力？
3. 它們是對於戰略目標來講很重要的東西嗎？

• 如果設計成功，眼睛移動軌跡的模式有兩個特點

1. 遵循的是一條流暢的路徑
2. 為用戶提供有效選擇的、某種可能的」引導「，而非分散注意力

對比和一致性

• 通過對比把用戶的注意力吸引到重要的部分
• 過度設計也會導致視覺的混亂，差異要足夠清晰，讓用戶能分辨出某個設計選擇是特意要傳達的
• 一致性能避免用戶的困惑和焦慮，可基於柵格線來保持平面布局的一致性

配色方案和排版

• 色彩
• 排版

1. 不要使用非常相似但又不完全一樣的風格
2. 只有在你需要傳達不同的信息時才使用不同的風格
3. 風格之間要有足夠的」對比「，但是不要使用過於廣泛和多樣的風格

設計合成品和風格指南

• 就是從已選定的組件中建立起來的、一個最終的可視化產品
• 擁有一套唯一且高效的方法，讓你的產品看起來像是一個協調一致的整體，而不是亂七八糟的碎片。

---

第八章 要素的應用

• 創建良好的用戶體驗最重要的工作內容是大量收集亟待解決的非常細微的問題。
• 必須要同時考慮五個層面的全部因素

1. 了解你正在試著去解決的問題
2. 了解這些解決辦法所造成的後果

• 在上一層級的錯誤有可能會削弱更低層面的正確決策，如果在低一級層面做出了錯誤決策，再上一層級做的努力也會顯得沒有意義
• 用戶體驗開發過程是一場」馬拉松「，而不是」短跑「要提前關注戰略、範圍和結構。

推薦閱讀：