Google UX Design 筆記與課外連結整理 Course 3
第三堂課主要是創建故事板和用戶流程圖、講解網站電腦版及手機版的信息架構、如何在紙上繪製線框圖、再用Figma做低保真度的Wireframe & prototypes、學習格式塔原則，再帶入UX 設計中的偏見及包容性及以公平為中心設計、如何避面欺騙模式及道德設計。以下為連結整理：
Build Wireframes and Low-Fidelity Prototypes
- Week 1: Storyboarding and wireframing.
- Week 2: Creating paper and digital wireframes.
- Week 3: Building low-fidelity prototypes.
第 1 週：故事板和線框圖。學習如何在設計過程中使用研究結果為構思提供信息。創建兩種類型的故事板：大圖和特寫。繪製您的第一個線框圖，並探索線框圖的好處。在設計過程中對滿足實際用戶需求會有很多想法。線框圖可以幫助完善這些想法。
第 2 週：創建紙質和數字線框。為 App 繪製線框。先在紙上繪製大量線框。之後在設計工具 Figma 中描繪成數位線框。或直接從 Figma 學習如何更好地使用他們的工具。最後，您會將格式塔原則（例如相似性、接近性和共同區域）應用於您的線框。
第 3 週：構建低保真原型。目前已經歷了設計過程的前三個階段：同理心、定義和構思。將進入設計過程的第四階段：原型。首先，您將創建 App 的紙質原型。在描繪到在 Figma 中創建低保真原型。探索識別設計中潛在偏見的方法，並學習如何避免欺騙性模式。
回顧問題陳述
清晰描述需要解決的用戶需求，一個穩固的問題陳述將為整個產品設計過程提供信息，一開始就做好問題陳述很重要。
問題陳述包括虛構用戶的姓名、特徵、需求及從您的研究中獲得的關鍵見解。
目標陳述 goal statements
1. 重新審視你的問題陳述。
2. 從識別問題到定義目標。
一個強有力的目標聲明：
- 描述用戶可以採取的特定行動或產品將執行的操作。
- 定義行動將影響誰。
- 說明行動的正面影響或產品解決用戶需求的原因。
- 以可衡量的方式概述成功。
簡述用戶流程 user flow
設計高效的產品需要充分了解用戶及其需求、甚至預測用戶需求。
繪製用戶流程
- Action 行動：用戶瀏覽產品設計時採取的行動用圓圈表示。圓圈顯示從開始到結束完成任務需採取的步驟。如：打開 App、點擊瀏覽資料。
- Screen 螢幕：用戶完成任務時體驗到的產品畫面以矩形表示。如：主頁或預訂確認頁面。
- Decision 決策：菱形代表用戶流程中用戶必須提出問題並做出選擇的點。用戶做出的決定可能使他們在流程中前進，或者回到流程的較早部分。
- User flow direction 用戶流程方向：有箭頭的線條將所有內容聯繫在一起並顯示流程方向。虛線表示反向或返回前一頁。
用戶流程範例
設計師需考慮用戶從產品中所需的整個旅程。當您創建自己的用戶流程時，請參考已建立的問題陳述，確保設計真正滿足用戶需求。
用戶流程可能會根據用戶的需求及其情況而改變。若問題陳述發生變化，則用戶流程可能也需要更改。
創建故事板
故事板是一系列面板或框架，直觀地描述和探索用戶對產品的體驗。
通過視覺來講述故事通常比使用文字更有效。
- Character 角色：說明情節中的用戶。
- Scene 場景：給設計師想像用戶環境的方法。
- Plot 情節：描述設計提供的解決方案或好處。
- Narrative 敘述：描述用戶面臨的問題和設計將如何解決這個問題。
常見兩種故事板
- Big picture storyboards 大圖故事板 ：關注用戶的需求、他們的背景以及產品對用戶有用的原因。設計初期使用。
- Close-up storyboards 特寫故事板：專注於產品及其如何運作。設計過程的中後期使用。
創建大圖故事板
- 從問題陳述開始：有助於建立角色並為故事板設置場景。
- 創建目標陳述：目標陳述可以幫助確定故事板的情節（設計的好處或解決方案）。
- 準備故事板：可以使用課程故事模板，或在紙上繪製類似的框架。
- 添加故事板場景。在模板的開頭描寫一句故事敘述。
5. 每個面板畫一個想法：第一個面板用於設置故事的場景。然後對於每個附加面板，考慮推動故事向前發展的動作以及用戶在每個面板中的感受。
專業提示：大圖故事板側重於用戶體驗。故事板展示人們如何使用產品及為什麼產品會對他們有所幫助。大圖故事板是關於用戶，重要的是通過使用悲傷或快樂的臉來表示情感。
6. 為用戶暴露旅途中的痛點：用戶遇到的糟糕的經歷。
7. 在最終面板中包含用戶目標或結論：確保包含一種情感，以展示用戶在您的產品體驗結束時的感受。
創建特寫故事板
步驟 1–4 與大圖故事板過程相同：
- 從問題陳述開始。
- 創建目標陳述。
- 設置故事板。
- 添加故事板場景。
- 每個面板畫一個想法：而特寫故事板關注產品。引起注意的產品細節以及原因。演示產品中的用戶流程以及產品中的每個操作將如何導致下一個屏幕。
設計 App 的信息架構 information architecture
- Organization 組織：產品中不同信息的連接方式。
- Hierarchy 層次結構：層次結構通常為“樹狀圖”，較大的類別位於頂部，與整體類別相關的特定類別位於下方。對等信息並排放置（或彼此位於同一級別）。
- Sequence 序列： 使用戶能夠通過特定的順序或步驟在應用程序中移動。
八項基本原則
EightShapes 的創始人 Dan Brown 創建的原則。
- 對象原則：將內容視為“活的”，並且隨著時間的推移而變化和增長。
- 選擇原則：人們認為他們想要有很多選擇，但實際上他們需要的選擇更少，而且組織良好。
- 披露原則：信息不應意外或不必要。
- 示例原則：人類將事物分類並將不同的概念組合在一起。
- 前門原則：人們通常會從另一個網站到達主頁。
- 多重分類原則：人們搜索信息的方式不同。
- 聚焦導航原則：導航菜單的設計方式背後需有策略和邏輯。
- 增長原則：設計中的內容量會隨著時間而增長。
詳細文章：article on the eight principles of IA.
構建出色網站地圖的信息架構原則
Web 網站地圖
- 主頁、主屏幕或起點：主頁通常是用戶的第一個入口點。
- 其他相關屏幕：其他相關頁面將包括應用程序中的所有其他父/子關係。
App 網站地圖（ 結構App類似 ）
- 主頁、產品功能、用戶設置、定價、聯繫我們和幫助。
參考：如何構建 Web 應用站點地圖 - 在這些高一級類別之下是子連接。例如，姓名、電子郵件地址和付款詳細信息將包含在用戶配置文件下。
建立在你的知識基礎上
- 在 App 中常用於思考信息架構的六種關鍵模式。
- 可訪問性的文章：信息架構、用戶體驗設計和視覺設計指南
- 信息架構中的可訪問性：2019 年世界 IA 日 — 信息架構師的可訪問性提示
- 組織信息架構：心理學原理
其他資源
- 信息架構： UX Planet 的設計師基礎知識
- Adobe 的 UX 信息架構初學者指南
- Career Foundry 的優秀信息架構初學者指南
- Justinmind.com 為用戶體驗設計師提供的信息架構
- Adobe 的 5 個有效信息架構示例
創建紙質線框圖 paper wireframes
線框：是數位體驗的低保真輪廓，例如 App 或網站。
線框的目的：
- 建立頁面的基本結構
- 突出產品的預期功能
- 節省時間和資源
線框的元素：線條、形狀和文字。
線框的業界標準：
- 文字由水平線表示。
- 圖片、圖標由正方形或矩形以及與正方形或矩形重疊的 X 表示。
- 按紐通常由矩形或圓形表示。
線框的好處：
- 確定要包含在產品中的內容
- 儘早發現問題
- 讓利益相關者關注結構
- 節省時間和精力
- 快速迭代
格式塔原則 Gestalt Principles
（線框中的格式塔原則）
人腦通過構建邏輯、模式和結構來理解周圍的世界。格式塔原則描述了人類在感知物體時如何對相似元素進行分組、識別模式和簡化複雜圖像。
- Similarity 相似性：看起來相似的元素（例如形狀、大小或顏色）被認為具有相同的功能。
- Proximity 接近性：靠近的元素看起來比相距較遠的事物更相關。
- Common region 公共區域：位於同一封閉區域內的元素被認為是一組的。
相似性是關鍵。幫助用戶快速瀏覽產品，類似資訊長得一樣以保持一致性。
接近性：有相關的資訊互相 接近， 幫助用戶了解其相關性
公共區域：導航欄通常是不同的顏色或帶有邊框的組合
了解關於格式塔原則：
- 用戶測試的這篇文章，描述了其他格式塔原則，
- UX Collective的這篇文章，包含線框圖中的格式塔原則示例。
製作紙質原型 paper prototypes
影印模板
- 線框和原型的手機輪廓
- 線框和原型的矩形輪廓（標準手機屏幕尺寸）
- 線框和原型的矩形輪廓（用於滾動的長屏幕）
Google UX 設計師Kaiwei使用影印模板為其應用設計創建線框。
索引卡
畫在一堆不同的索引卡上。每個索引卡可以代表一個手機屏幕。使用膠帶或圖釘將索引卡粘在白板或牆上，或將索引卡按順序排列在桌子上。
這是 Google UX 設計師Dane和他的隊友 使用的索引卡上的線框示例。
便利貼
探索創建紙質線框和原型的另一種方式。嘗試使用不同大小和顏色的便籤來代表您設計理念的不同部分。或使用彩色便籤來標註線框和原型的重要部分，像Dane和他的團隊。
模板
預製模板（購買）在紙質線框和原型製作過程中非常有用，模板可以幫助您的繪圖看起來更整潔、更逼真。
漫威的紙上原型製作工具：Marvel 的紙上原型 (POP) 是一種用於數字化繪圖的工具。在他們的網站上了解更多並免費註冊。
Figma 的低保真原型設計 lo-fi prototyping
準備創建您的原型
- 產品的常見用戶流程是什麼？
- 用戶將與哪些按鈕進行交互？按什麼順序執行這些操作？
- 用戶點擊按鈕或提交表單後會發生什麼？
可以使用適用於iOS或Android的 Figma Mirror App 上輕鬆查看 Figma 中的設計。了解更多信息，Figma 的 App 查看原型的幫助文章。
UX 設計中的偏見
UX 設計師應避免工作中的偏見並使設計對所有用戶都具有包容性。
- 性別陰影， Joy Buolamwini。喬伊在讀博士時是麻省理工學院媒體實驗室的學生，她發現面部識別算法很少在黑人女性身上進行測試。她讓人們意識到需要更具包容性的技術。
- 公平不是默認設置：為什麼包容性技術不僅僅需要良好的意願，作者 Josh Lovejoy。關於谷歌設計的文章探討了默認設計的問題，並討論了使公平成為機器學習過程的核心組成部分的策略。
- 設計歧視：設計決策不公平對待人的多種方式，作者：Lena V. Groeger。ProPublica 上的這篇文章討論了設計中的歧視，並揭示了對所有用戶的公正、多樣化和可訪問設計的需求。
避免欺騙性模式
欺騙性模式於 2010 年由 UX 設計師 Harry Brignull 首次曝光。
強制連續性 Forced Continuity：
在沒有警告或提醒的情況下向用戶收取會員費用的做法。
- 在免費試用期結束和收費前通知用戶。
- 讓用戶輕鬆取消會員資格。不要讓用戶搜索取消的步驟。
- 提供鏈接以引導用戶完成取消流程。
- 確保設計中的視覺元素（如按鈕）標記清楚。
潛入購物籃 Sneak in to basket
如果用戶不想購買，則必須從購物車中移除商品，這是一個很容易錯過的額外步驟。
隱藏費用 Hidden costs
用戶購物車中的隱藏或意外費用，直到結帳流程結束才會顯示。
隱性成本欺騙模式的一個例子是，當用戶認為他們為產品或服務支付了特定金額，但在結帳結束時，他們發現有額外費用。
確認羞辱 Confirmshaming
當用戶在選擇退出某事時感到內疚時。
確認羞辱的一個例子是當用戶試圖做出選擇時，按鈕內的副本試圖讓他們對自己的選擇感到內疚。
緊迫性 Urgency
試圖說服用戶在他們用完時間並錯過今天的“驚人”價格之前購買商品。
稀缺性 Scarcity
當網站讓用戶非常清楚庫存商品數量有限時。
你能做些什麼來避免欺騙性的模式？
欺騙性模式是不道德的，應該避免。對用戶保持清晰和誠實將加強他們對品牌和產品的信任。
注意力經濟 attention economy
- 注意力經濟一詞起源於心理學家和諾貝爾獎獲得者赫伯特·A·西蒙：大量的信息造成注意力的匱乏。
技術應該幫助用戶，而不是分散他們的注意力。分心越多，完成任務的可能性就越小。 - 注意力經濟的概念也解釋了與技術的交互如何可能導致某些人抑鬱或焦慮。（也稱為 FOMO）
- 幫助用戶遠離注意力經濟的陷阱： Google的Digital Wellbeing 工具包可幫助用戶更好地管理他們使用手機的方式以及在手機上花費的時間。
考慮注意力經濟：
- 避免欺騙性模式。對用戶誠實。設計目的以價值觀如何與設計保持一致。
- 考慮目標和指標。了解公司的業務目標和關鍵績效指標。注意這些業務目標可能如何與用戶的目標相矛盾或一致。
- 與您一起工作的人分享良好的設計實踐。了解您作為 UX 設計師的權力地位。您有能力永久影響決策過程，並確保做出正確的設計選擇。
關注意力經濟：尼爾森諾曼集團的這篇文章或伯克利經濟評論的這篇文章。
UX 設計師的影響
道德設計是關於了解您的設計工作如何影響世界
主導文化的影響力如果太強，設計過程中可能不會考慮許多文化觀點一些用戶可能會被排除在外。
UX 設計師應該考慮所有不同類型的人的需求，無論特權或權力如何。
作為設計師，創建產品時始終將用戶需求放在首位，需了解產品的所有潛在用戶。與不同的人群進行徹底的研究是確保您的工作滿足所有用戶需求的好方法。
在您設計產品時，請考慮邊緣化和代表性不足的人群可能會對您的設計做出何種反應。
邊緣化人群是指人們由於被錯誤地視為低劣的特定特徵或生活經歷而遭受主流社會的歧視或排斥。
- 殘疾人
- 接觸技術有限的人
- 說不同語言的人
設計具有包容性且易於所有用戶訪問的產品非常重要。
代表性不足的人群是在一個由主流文化和他們的觀點塑造的社會中，他們的價值觀和經驗沒有得到足夠多的代表的人群。包括特定性別或性取向的人、有色人種和少數民族等。
邊緣化和代表性不足的人群都不是主流文化的一部分，因此除非設計師有意識地決定將他們包括在內，否則他們通常不會在設計過程中得到認可。
邊緣案例是用戶體驗設計師沒有準備好的產品的情況。出現的情況或障礙是用戶無法控制的。正如您之前在證書計劃中所了解的，良好的 UX 可以預測邊緣情況，並在事情沒有按計劃進行時將用戶重新路由到快樂的道路上。
邊緣情況可能會助長偏見。預測所有不同類型的用戶可能會出現的潛在問題非常重要。在整個過程中保持靈活並準備好調整您的設計，以解決最初可能沒有考慮到的用戶組中的這些類型的意外問題。
包容性設計意味著在設計選擇時考慮到個人身份，如能力、種族、經濟狀況、語言、年齡和性別。擁有一支多元化的研究人員和設計師團隊，包括那些來自傳統上被排斥的人群，是包容性設計的關鍵。這種做法確保在設計過程的所有階段都存在各種獨特的觀點。
UX 設計師的目標是構建具有最廣泛能力的用戶可以訪問的體驗。，任何人都不應該因為設計師在構建產品時沒有考慮到他們的需求而被排除在使用產品之外。在包容性設計中，沒有通常、也沒有“平均”的人可以設計。
有關真實世界的示例，請查看本集的InVision 播客“DesignBetter” Airbnb 包容性設計主管 Benjamin Evans。
幫助確保產品設計對所有用戶都具有包容性的一種方法是讓 與您一起工作的人和您為之設計產品的用戶負責。徵求與您不同的用戶、同事和利益相關者的意見。當您更多地了解他們的觀點、方法以及情況如何影響他們時，您可以將他們的見解融入您的設計中。
以下是一些將道德設計付諸實踐的想法：
創建包容性角色
在創建角色時考慮邊緣化或代表性不足的用戶，以避免只為您認為“典型” 或普遍的用戶提供服務。在創建角色時有意識和包容性會阻止您的產品推進關於哪些文化受到或不被重視的相同想法。
作為 UX 設計師，您仍應使用實際的人口統計因素，例如年齡、性別和創建角色的能力，但您需要靈活並隨時準備好在發現其局限性時進行更改。
擴大對“利益相關者”的定義
傳統上，您可能將利益相關者視為項目負責人、經理、投資者以及擔任高級決策角色的人。但是，如果您擴大該術語的定義，則利益相關者是項目可以影響的任何人或地方。通過擴大您設計的利益相關者的定義，您可以在設計時考慮到更廣泛的受眾。
加強協作
您與受產品影響的許多不同類型的人合作得越多，您從他們的參與中獲得的洞察力就越多。雖然這通常有利於社會的更大利益，但通常也有利於您的產品設計！
- 考慮“多元”設計解決方案。Multiversal（或，Pluriversal）是指一種設計適用於不同人的多種方式，而通用意味著一種設計方法適用於許多用戶。多元設計原則意味著確保設計具有不止一個入口點或不止一種方式來有意義地體驗它。
要確保用戶體驗設計師融入更多道德和包容性實踐，還有很多工作要做，但是通過現在學習這些概念，您在推動行業向前發展方面發揮著重要作用。您有機會為自己、其他設計師和您產品的用戶在設計世界中有所作為。保持負責，包容，不要忘記你的工作可以對世界產生的影響。
當談到以平等為中心的設計的重要性時，平等而設計的旅程永遠不會真正結束。為了為各種用戶設計有意義的體驗，需要不斷的學習和成長。
- 本傑明·埃文斯：包容性設計的力量 — — InVision 的 Design Better 播客的一集
- 如何設計和管理以公平為重點的評估 — 聯合國兒童基金會，重點關注“什麼是公平以及為什麼重要？”部分 位於 PDF 的第 18–24 頁（或文檔左下角的第 2–8 頁）
道德設計的更多信息
作UX 設計師有責任以合乎道德的方式開展工作，並牢記用戶的最大利益。您設計的產品將成為用戶生活的一部分，但不應該：
- 消費或控制用戶。
- 促進成癮行為。
- 促進用戶與設備或應用程序之間的不健康關係。
- 充分利用用戶。
相反，設計產品應該讓用戶選擇他們在使用產品時想要採取的行動。請記住，App 應該吸引用戶，但應用程序也應該誠實地表達他們的意圖和目標。了解有關道德設計資源：
- 來自可用性極客的用戶體驗設計倫理
- 來自用戶體驗雜誌 的用戶體驗設計的好、壞和醜
- 來自 UX Collective的道德 UX 設計的 10 條原則
