一次優質的用戶體驗是將“偶然的瀏覽者”轉化為“實際購買人”的關鍵因素。
to B 的網站,用戶體驗仍然會帶來很大的差異。一個是“為企業創造價值的項目,另一個則是“變成資源消耗噩夢的項目”
任何在用戶體驗上所做的努力,都是為了提高效率。這基本上是以兩種主要形式體現出來的:“幫助人們工作的更快”和“減少他們犯錯的概率”
根據網站的性質,可以分為:
A功能型平臺類產品
關注任務—所有的操作都被納入一個過程,去思考人們如何完成這個過程。在這里,我們把網站看成用戶用于完成一個或多個任務的一個工具或一組工具。
B信息型媒介類產品
關注點是信息—網站應該提供哪些信息,這些信息對用戶的意義是什么。創建一個富信息的用戶體驗,就是給用戶提供一個可以尋找、理解且有意義的信息組合。
用戶體驗要素
戰略層:
我們要通過這個產品得到什么?-產品目標
我們自己對網站的期望目標-產品目標
我們的用戶要通過這個產品得到什么?-用戶需求
來自企業外部的-用戶需求;
產品目標
商業目標(business goal):不能太寬泛,也不能太具體???
品牌識別(brand identity):概念系統+情緒反應
成功標準(success metric):一些可追蹤的指標,在上線以后用來顯示它是否滿足了我們自己的目標和用戶的需求。
好的成功標準不僅影響項目各階段的決策,也為衡量用戶體驗工作的價值提供了具體依據。
有時成功標準與網站本身和用戶如何使用網站有關。
如果你想要鼓勵用戶隨意輕松地發掘網站提供的服務,那么你一定希望看到單次訪問的時間有所增加。相反,如果你想要提供快捷簡便的信息或功能服務,那么你或許希望單次訪問的時間減少。
用戶需求
拋棄自己立場的局限,真正從用戶的角度來重新審視網站。
用戶細分(user segmentation):具有某些共同關鍵特征的用戶組成
a人口統計學-性別、年齡、教育水平、婚姻狀況、收入等
b消費心態檔案-用戶對于這個世界,尤其是與產品有關的某個事物的觀點和看法的心理分析方法
c其他
-創建網站時,考慮用戶對技術和網頁本身的看法(上網時間?喜歡技術型產品嗎?升級?)
-用戶對于網站相關內容的知識掌握度(專業vs愛好者)
-用戶的社會角色或專業角色(學生vs家長)
-某些需求是矛盾的(炒股新手vs專家:分解步驟vs快速操作)
↓
創建細分用戶群
用戶研究(user research):收集必要的信息來達成共識
問卷調查、用戶訪談、焦點小組-手機用戶普遍觀點與感知
用戶測試、現場調查-理解具體的用戶行為以及用戶在和產品交互時的表現
a現場調查(contextual inquiry)(情境調查) 指一整套完整、有效且全面的方法,用于了解在日常生活情境中的用戶行為
現場調查也可以用一種更輕量級、更低成本的方式來實施。-任務分析(task analysis)
任務分析:仔細分解用戶完成任務的精確步驟,可以通過用戶訪談,用戶自己講故事,也可以通過現場調查來完成。
b用戶測試(user testing):測試產品
可用性測試的終極目標,是尋找另產品更加容易使用的途徑。
用戶測試的方法:
-測試一個清晰地概念,比如用戶如何成功的完成一項特定的任務
-測試原型,紙上原型、草圖、低保真、高保真等
-卡片排序法,用于探索用戶如何分類或組織各種信息元素
創建人物角色(用戶模型、用戶簡介):可以讓用戶更加真實
將用戶調查及細分過程中得到的分散資料重新關聯起來,確保在整個設計過程中把用戶始終放在心里。
戰略層產出:戰略文檔(strategy document)或愿景文檔(visin document)
由決策者、普通員工和用戶自己組成決策層
范圍層:
定義需求
將用戶需求和產品目標轉換成產品應該提供給用戶什么樣的內容和功能
功能型產品-創建功能規格-對產品的功能組合的詳細描述
信息型產品-以內容需求的形式出現-對各種內容元素的要求的詳細描述
為什么要用文檔來定義需求
1.這樣你才知道你正在建設什么
每個參與在項目里的人都會知道這個項目的目標是什么,什么時候將達到這樣的目標。
擁有明確的要求會讓你把責任分配的更清晰,提高協作效率。
2.這樣你才知道不需要建設什么
記錄所有功能的可能性,評估這些想法的架構,當前難以滿足的需求,可以成為啟動下一個版本的基礎,形成一個不斷循環開發的過程。
在范圍層,從“我們為什么要開發這個產品”轉換為“我們要開發的是什么”
功能型產品-功能規格(functional specification)-對產品的功能組合的詳細描述-哪些應當被當成產品的功能以及相應的組合
信息型產品-內容需求-對各種內容元素的要求的詳細描述-編輯和營銷推廣的領域
內容需求與功能需求互相穿插
定義需求
詳略程度取決于該項目的具體范圍
需求源泉是用戶本身,而不是利益相關同事,需求也來源于企業內部管理者。
在決定功能需求時,可以使用人物角色,把虛擬人物放到一個場景中,想象用戶會經歷什么樣的過程,找出幫助他順利完成這個過程的潛在需求。
也可以從競爭對手處得到啟示,在做同一件事的產品基本上是在試圖滿足用戶同樣的需求。
需求分類
用戶描述的想要的東西
用戶說的、期望的特性,并不是他們想要的
用戶不知道他們是否需要的
-尋找產品新方向:匯集企業各個部門成員進行頭腦風暴
功能規格說明書
不需要包含產品的每一個細節,只需要包含設計或開發過程中可能混淆的功能定義,只記錄在創建時已經確定的決議,不展望理想化狀態。
1.樂觀-描述系統將要去做什么事情去“防止”不好的情況發生,而不是描述這個系統“不應該”做什么不好的事情
× 這個系統不允許用戶購買沒有風箏線的風箏。
?? 如果用戶想購買一個沒有線的風箏,系統應該引導用戶到風箏線頁面。
2.具體-盡可能詳細的解釋清楚狀況,
× 最受歡迎的視頻要重點標注。
?? 上一周被播放最多的視頻要顯示在列表的最前端。
定義【最受歡迎】,描述【重點關注】的機制
3.避免主觀語氣-使需求保持明確和避免歧義。
× 這個網站的風格應該是時尚、閃耀的。
?? 網站的外觀應該符合企業的品牌指南文檔的要求。
內容需求文檔
定義出所有不同類型的內容,可以幫助你確定需要哪些資源來制作這些內容(或他們是否應該被提供)
1.不要混淆內容的格式和它的目的
FAQ vs 用戶普遍需要的常見信息
2.提供每一個特性規模的大致預估
文本的字數、圖片像素大小、下載的文件字節、PDF或音頻文件等相對獨立元素的大小
3.盡早的確定某個人來負責每一個內容元素
4.定義每一個內容特性的“更新頻率”
-來自產品的戰略目標(你希望用戶多長時間訪問一次?)
確定一個頻率,介于你的用戶期望值和有效資源之間的合理中間值。
5.明確有相異需求用戶的不同內容處理方式
6.整理網站現有內容的清單。(content inventory)
確定需求優先級
需求是否能滿足戰略目標(產品目標or用戶需求)
需求實現的可能性
不同需求之間的關聯性
范圍層產出:功能規格說明書,內容需求文檔
結構層
確定各個將要呈現給用戶的元素的模式(pattern)和順序(sequence)。
功能型產品-交互設計-定義系統如何響應用戶的請求-關注于將影響用戶執行和完成任務的元素
信息型產品-信息結構-合理安排內容元素以促進人類理解信息-關注如何將信息表達給用戶的元素
交互設計
關注可能的用戶行為,定義系統如何配合與響應
概念模型(淘寶vs1688?)
交互組件該怎樣工作
eg:“購物車”在電商概念模型中是一個容器,這個概念模型影響了它的視覺設計和在界面上使用的語言。它是一個容器,我們放東西到推車中,以及從里面拿出東西來,系統必須提供能完成這些任務的功能。
假設購物車的概念來自于訂貨單,系統應該使用編輯來代替購物車的添加與移除。
我們無需把明確的概念模型告訴用戶,會使用戶混淆。
概念模型用于在交互設計的開發過程中保持使用方式的一致性。
eg:航空公司訂票系統
錯誤處理
1.把系統設計成無法犯錯
自動檔汽車不掛在P上,無法啟動。
2.時錯誤難以發生,系統幫助用戶找出錯誤并改正它,甚至自動更正。
3.提供在錯誤中更正的方式
如果在用戶完成操作之后,才發現做錯了,系統無法糾正時,提供恢復方式。
eg:undo
4.對于無法恢復的錯誤,提供大量的警告
信息架構
呈現給用戶的信息是否合理并具有意義。
結構化內容
在以內容為主的網站上,信息架構主要的工作是設計組織分類和導航的結構,讓用戶可以高效率、有效地瀏覽網站的內容。
與信息檢索的概念密切相關:設計出讓用戶容易找出信息的系統
建立分類體系
從上到下(top-down approach)-戰略層驅動
根據產品目標和用戶需求直接進行結構設計
從最廣泛的、有可能滿足決策目標的內容與功能開始分類,然后再依據邏輯細分出次級分類。
可能會導致細節被忽略。
從下到上(bottom-up approach)-范圍層驅動
根據對內容和功能需求的分析而來,逐漸構建能反映產品目標和用戶需求的結構。
可能導致架構過于精確而無法靈活變動。
結構質量最重要的標準,不是整個過程一共需要多少步驟,而是用戶是否認為每一步都是合理的,當前步驟是否自然延續了上一個步驟中的任務。
高效結構的優點是具備【容納成長和適應變動】的能力。
節點的結構方法
節點是信息架構的基本單位(可以對應任意的信息片段或組合-價格or整個圖書館)
節點可以用不同的方式來安排:
a層級結構/樹狀/中心輻射-節點與其他節點之間存在父級/子級關系
b矩陣結構-允許用戶在節點與節點之間,沿2個或更多維度移動
能夠幫助“帶著不同需求而來”的用戶
c自然結構-沒有太強烈的分類概念
適用于探索一系列關系不明確或一直在演變的主題,鼓勵自由探險的感覺,如某些教育、娛樂網站
d線性結構-來自于線下媒體,書、文章
在互聯網中適用于小規模結構,如專題、教學資料等
節點的組織原則
決定哪些節點要編成一組,哪些要保持獨立。
不同的組織原則將被應用在不同的區域和網站的不同層面。
eg:
公司信息網站,樹狀結構中的最上層為:消費者、企業集團、投資者
那么組織原則為:不同內容所針對的觀眾。
旅行網站最上層的類別為:北美洲、歐洲、非洲
那么組織原則為:地區
產品在最高級使用的組織原則緊密的與“網站目標”和“用戶需求”(戰略層)相關,而在結構中較低的層級,內容與功能需求(范圍層)將對你所采取的組織原則產生重大影響。
語言與元數據
命名原則-描述、標簽,和網站使用的其他術語。
“使用用戶的語言”并且“保持一致性”是非常重要的。
【受控詞典】是網站使用的一套標準語言。用來強調一致性。
-與用戶訪談并了解他們的溝通方式,開發出一個讓用戶感到自然地命名原則系統
【類詞詞典】-控制詞匯的另一張較為精細的應用方法
與簡單列出所使用詞匯的清單不同,類詞詞典提供常用的,但未納入使用的標準用語詞匯以供選擇。
內部專用術語、速寫語、俚語、縮寫詞,詞匯之間的類型關系、更廣義或狹義的相關詞匯建議
使用受控詞典或類詞詞典對于建立包含元數據的系統特別有用。
↓
【元數據】-關于信息的信息,以一種結構化的方式來描述內容的信息。
掌握的信息越詳細,在建設信息架構時靈活性越高。
可使用受控詞典,使你的內容中,每一個獨特的概念都對應一個固定的詞,就可以依靠自動化來定義內容之間的聯系。
結構層產出是架構圖-視覺詞典
框架層:
結構層界定了產品將用什么方式來運作,框架層用于確定用什么樣的功能和形式來實現。
關注獨立的組件以及他們相互的關系上。
主要解決放置問題。
界面設計考慮可交互元素的布局
導航設計考慮產品中引導用戶移動的元素的安排
信息設計考慮傳達給用戶的信息要素的排布
功能型產品-界面設計-安排好能讓用戶與系統的功能產生互動的界面元素-確定框架(按鈕、輸入框、其他界面控件)
提供給用戶做某些事的能力,通過他,用戶能真正接觸到那些在結構層的交互設計中確定的具體功能。
信息型產品-導航設計-屏幕上的一些元素的組合,允許用戶在信息架構中穿行
提供給用戶群去某些地方的能力,信息架構把一個結構應用到我們設定好的“內容需求列表”之中,而導航設計則是一個用戶能看到那個結構的鏡頭,表示通過它可以再“結構中自由的穿行”。
二者都要做-信息設計-促進理解的信息表達方式-用于呈現有效的信息溝通
傳達想法給用戶
三者緊密結合
習慣和比喻
習慣和反射是我們與世界交互的基礎
當某種不同的方式有明顯的益處時,你反而應該試著去未被一些習慣。建立一個成功的用戶體驗,要求你在做每一個決定的時候都有充分的、明確的理由。
界面設計
選擇正確的界面元素,幫助用戶完成他們的任務,還要通過適當的方式讓它們容易被理解和使用。
要讓用戶一眼看到最重要的東西。
設計復雜系統的最大挑戰是弄清楚用戶不需要知道哪些。
組織好用戶最常采用的行為,讓界面元素用最容易的方式獲取和使用。
仔細考慮每一個選項的默認值(理解用戶任務和目標)
自動記住用戶最后一次的選擇狀態
一些標準界面元素
復選框 checkbox
允許用戶獨立的選擇各個選項
單選按鈕 radio button
允許用戶從一組互斥的選項中選擇一個
可顯示所有可選項,但需要更多的空間
文本框 text field
輸入文字
下拉列表 dropdown list
提供和單選按鈕相似的功能,但是它們在一個更緊湊的空間中完成這件事,允許更有效的呈現更多選項。
由于在視覺上隱藏了重要的選項,可能會妨礙用戶。
節省空間
列表框 list box
提供和復選框相似的功能,但他們在一個更緊湊的空間排列(有滾動條)
列表框更容易支持大量的選項
按鈕 action button
通常情況下,告訴系統接受用戶通過其他界面元素提交的所有信息,并用這些信息來做一些事情-采取動作
導航設計
用戶需要知道自己在哪兒?自己能去哪兒?
必須同時完成以下目標:
提供給用戶一種在網站間跳轉的方法
傳達出這些元素和它們所包含內容之間的關系
導航內容與用戶當前瀏覽頁之間的關系
全局導航(global navigation)-覆蓋整個網站的通路
局部導航(local navigation)-提供用戶在這個架構中到附近地點的通路
輔助導航-快速捷徑
上下文導航(文字超鏈接)-方便用戶獲取額外信息
友好導航-聯系信息、反饋表單、法律聲明
網站地圖-遠程導航的一種?
索引表?
信息設計
反映用戶的思路
支持他們的任務和目標
線框圖
捕獲所有在框架層做出的決定,作為視覺設計和網站實施的參考
通過安排和選擇界面元素來整合界面設計;
通過識別和定義核心導航系統來整合導航設計;
通過放置和排列信息組成部分的優先級來整合信息設計。
表現層:
為最終產品創建感知體驗
解決并彌補產品框架層的邏輯排布的感知呈現問題。
評估視覺設計方案
運作是否良好?
對于下層的設計目標是否給予良好的支持?
(產品外觀有沒有破壞結構?有沒有強化結構?使用戶可用選項清晰明了?)
是否強化品牌形象?
1.遵循視覺動線
用戶的實現移動并不是隨機的,是一種人類共有的、對于視覺刺激而產生的、一系列復雜的原始的本能反應。
-遵循一條流程的路徑
-不需要太多細節來分散用戶注意力
2.對比和一致性
使用對比,吸引用戶注意力到關鍵比分-差異需要足夠清晰
使用一致性,有效傳達清晰地信息(柵格系統)
3.內部和外部的一致性
建立在對網站框架的理解上-解決內部一致性
確定有可能在產品各種界面、導航、信息設計等不同環境中反復出現的元素,獨立出來,統一設計。試著在不同環境應用他們,進行調整。
4.配色方案和排版
5.設計和成品和風格指南(設計系統)
設計要素的應用
了解你正在試著去解決的問題
你已經知道在主頁的紫色大按鈕是個問題:
按鈕太大還是紫色不合適?-表現層
頁面放置地方不對?-框架層
按鈕功能與用戶期待不符?-結構層
了解這些解決辦法所造成的后果
考慮五個層面的聯動反應
用戶體驗最大的挑戰是比用戶自己更了解他們的需求