UX 設計方法並何時使用它們

在不同的研究和設計階段，各有很多不同流行的界面設計方法來改善用戶體驗 (User Experience 或 UX)。以下是一些比較常見的設計方法。

需求分析

誰是我們的用戶和客戶？

• 調查 (Survey)：這是最便宜的方式來查出你的用戶是誰、他們想要什麼、他們想做什麼、他們想買什麼、他們去哪裡購物和他們已經擁有了什麼東西。利用你的內部和外部的聯繫人，你可以減少你對你用戶的偏見觀點。有很多調查軟件是免費的，所以你無理由不利用它。

• 人物角色 (Persona) / 市場分割 (Market Segmentation)：將調查資料分組成有意義的用戶資料。了解每組的人需要什麼的功能，和他們購物時會最關心的東西。你不要只是考慮到用他們的性別、收入和年齡來分組，你應該還要以任務 (Task) 和領域經驗 (Domain Experience) 作為最主要的區別。

• 競爭分析 (Competitive Analysis)：目前現有的產品或網站很少會做一些其他人還沒做的東西。你需要了解現時的市場、尋找在你的市場裡其他類似的公司會做的東西、並注意類似行業。你需要知道哪些功能是常見的？什麼功能是深受用戶喜愛？利用如淨推薦分數 (Net Promoter Score) 那種的行業標準 (Industry Benchmarks) 來測量客戶的口碑，並利用系統可用性量表 (System Usability Scale) 來測量你的系統可用性。

• 情境調查 (Contextual Inquiry)：用戶無法時時表達到他們需要或想要什麼。在他們的工作環境或家居裡觀察他們嘗試解決他們的問題和完成他們的目標，尋找他們還未滿足到的需求，並了解他們正在執行的任務。

• 利益相關者訪談 (Stakeholder Interviews)：顧客公司的不同部門裡已經有數量驚人的資料。不要只用最高薪酬人士的意見 (HiPPO 或 Highest Paid Person’s Opinion)，你需要有組織地訪問顧客支援部門、品質保證部門、開發部門、營銷部門和銷售部門，問他們你應該建什麼、修理什麼、還有削減什麼。

• 品質機能展開 (Quality Function Deployment)：整理你從內部利益相關者得到的用戶和客戶資料，利用它來了解哪些功能會滿足到內部和外部需求 (Internal and External Requirement) 。納入你從對手得到的情報到你的設計概念裡，利用它來深深打動你的同事，並來作出更明智的決策。

利用空白空間（或負空間）在你的設計裡

空白空間 (White Space) 是設計的基本原理之一，它亦是最被人低估的原理。如果能夠掌握如何控制空白空間，我們就可以控制到設計裡最細微又最有決定性的元素，並能夠好好利用它。

概括地說，空白空間是不同設計元素之間的空隙，它可以是設計裡各元素之間的空隙，或是字和字之間的空隙。在大多數情況下，我們用空白空間（又稱為負空間 (Negative Space)）來把內容分開，令用戶 (User) 能夠更加容易和更快地瀏覽到資料。

現在，我們將會介紹如何使用負空間在你的設計裡，並且研究它是如何讓設計給人一個乾淨和整潔的感覺。

什麼是空白空間？

正如我剛才解釋，空白空間（或負空間）是不同元素之間的空隙。為了便於比較，所有被使用的空間就是「正空間」 (Positive Space)。事實上，負空間可以塑造出積空間，看看下面的錯視圖像。

你看到什麼？花瓶還是兩副面孔？如果你看到的面孔，這是因為在這個特殊的設計裡，白色的部分成為了負空間，而兩側黑色的部分就是正空間。如果我們逆轉來看，我們就會得到一個完全不同的觀點，因為兩側一起塑造了一個形狀出來。

這個例子顯示出負空間的重要性，它可以定義出哪些內容是在正空間裡，哪些在負空間裡。你千萬不要當空白空間為內容剩餘下來的空間，你應該把它看作為你設計裡最重要的元素。

空白空間是有兩種級別的，就是宏觀 (Macro) 和微觀 (Micro) 的空白空間，它們分別是核心元素之間的空隙和較小元素之間的空隙。

為什麼畫線框圖前應該先畫草圖？

你曾經有一個網頁或應用程序設計概念嗎？構想新的設計概念是很容易的，不過最困難的部分就是知道如何把這個概念製作出來，這就是草圖 (Sketching) 派上用場的時候。有很多創意和建築行業都會涉及草圖，就連達芬奇 (Leonardo Da Vinci) 都會先用草圖畫出他的發明，然後才開始建造它們。無論你是多麼聰明，你沒有可能將在你腦袋裡的設計概念，沒有搞清楚細節，就能夠把它立即製作出來。首先你需要搞清楚你的概念才製作它，這就是所有設計師必要做的事。

每一個概念都需要用戶界面翻譯

用戶界面 (User Interface 或 UI) 設計是一個過程，一切都是由一個概念開始的，不過這個概念需要用戶界面翻譯。僅僅說「我要一個應用程序能夠做到X、Y、Z。」是不夠的，你還需要知道用戶做X、Y、Z的時候，他們在應用程序每一個屏幕上會看到什麼，使用草圖就可以幫助你考慮那些界面的用戶體驗 (User Experience)。雖然你已經知道你想你的應用程序能夠做什麼東西，但草圖可以幫助到你決定你的應用程序會如何帶領用戶到他們想要的結果。草圖亦可以協助你想像到用戶使用時的畫面流程 (Flow)，令你虛構出來的概念能夠清晰地呈現出來。

草圖不是線框圖

有很多設計師誤以為草圖是線框圖 (Wireframe)，儘管他們很相似，它們是不同的東西。兩者都是用來表達界面的概念給其他人，但線框圖和草圖卻各用在不同的媒介中，而且它們在設計過程裡各有不同的用途。

當你畫草圖時，你其實是在試圖明白你的界面會如何運作。去實現一個界面的概念其實有很多方法的，不過，你目前是在試圖找出哪種方法以及哪種方式是最適合你。 通常快而粗糙的概念是用紙和筆畫出來的，在使用這個方法時，用戶界面的具體細節是並不重要，最重要的是搞清楚如何讓用戶在每個屏幕上看到的能夠帶領他們到他們想要的結果。

當你畫線框圖時，你其實是在試圖進一步改進你的應用程序的概念，利用像素化的灰度 (Grayscale) 界面工具集 (Widgets)。這種媒介迫你關注更高層的細節，所有元素的大小、位置和順序需要全部考慮清楚，這樣你就可以更精確地設計用戶界面的運作方式。當你畫 完線框圖後，你的界面概念應該會變得更清晰和詳細。

畫線框圖前應該先畫草圖

大多數的設計師已經有他們自己的設計步驟，有些可能不畫草圖就直接開始畫線框圖，有些可能不畫線框圖就直接開始做視覺稿 (Mockup)。不過請記住，當你忽略了設計過程中任何一個步驟，你就會失去了很多概念裡的細節，原因是你的界面太早進入了下一個階段，因此一些關鍵要素被忽略或沒有做到足夠改進。

直接操作 (Direct Manipulation)

直接地修改資料（例如按它 (Clicking)、拖動它 (Dragging)、調整它的大小 (Resizing) 或覆寫它(Overwriting)）而不是間接地操作 (Indirect Operation) （例如輸入命令在命令列 (Command Line) 中，或使用選單 (Menu) 和對話框 (Dialog Box)）。

親和圖法 (Affinity Diagram)

是一個簡單的方法來組織概念：設計師把一個複雜問題裡的不同意見、構想、資料寫在卡片上，然後把密切相關的概念放在一起 （例如把卡片排列在桌子上或釘在牆壁上）。它是用來發現問題裡的結構和關係。親和圖通常是腦力激盪會議 (Brainstorming Session) 的下一步。

腦力寫作 (Brainwriting)

它是一種方法來快速產生新的想法。要求參與者把自己的想法寫在紙上（或在網上），而不像傳統的集體腦力激盪 (Group Brainstorming) 那樣宣布他們的想法。腦力寫作具有平行性的優點來產生新的想法。在傳統集體腦力激盪，每次只可以發表一個想法（連續的過程）。而在腦力寫作中，你可以讓全組人的同時寫下自己的想法。

分散注意力 (Distraction)

任何分散用戶的注意力從他們目前注意的位置或想注意的位置。通常是聲音或會動的視覺顯示（例如，閃爍的文字、自動卷動的文字、動畫）。

極少的情況下，分散注意力可以用來移動用戶注意力到重要的信號，例如警告或錯誤信息。不過，它們通常被視為錯誤的設計因為它們把用戶的注意力移到不重要的事物上或太過強那個事物。它們也可能因為爭奪用戶的注意力而造成衝突，例如很分散注意力的廣告。

用戶界面流程圖（故事板）

用戶界面原型 (User Interface Prototype) 是一個很好的方法來探索你的用戶界面 (User Interface or UI)，但不幸的是，你會很容易被用戶界面的細節迷住，而忽略了大局。因此，你往往看不到系統 UI 裡高層次的關係和相互作用。用戶界面流程圖 (User Interface Flow Diagram) – 又稱為故事板 (Storyboard) 、界面流程圖 (Interface Flow Diagram) 、視窗導覽圖 (Window Navigation Diagram) 、和内容導覽圖 (Context Navigation Map) – 讓你能夠模擬主要用戶界面元素之間的高層次關係，因此能夠問到基本的可用性問題。

在圖一裡，你會看到為一個大學系統的用戶界面流程圖的開始部分，在 RUP 裡是稱為導航圖。每個框代表主要用戶界面元素，正如你模擬實例 (Instance) / 對象 (Object) 一樣。箭嘴代表它們之間可能的流動，正如你模擬在活動圖 (Activity Diagram) 裡的轉換一樣。例如，當你在桌面的畫面裡，你可以利用學生圖指示帶你到搜索學生的畫面。當你在那裡，你可以回到桌面的畫面或到學生檔案的畫面。

圖一. UI 流程圖

對情境敏感式幫助 (Context-Sensitive Help)

是在用戶任務裡提供與現時活動相關的有用資料。

寬容性 UI 設計

不論你的用戶界面 (User Interface) 設計多麼好，用戶 (User) 始終都會犯錯誤的。不過，你不是無能為力的，你可以想辦法允許用戶從錯誤中恢復起來 (Error Recovery) ，或者甚至更好的就是防止用戶出錯 (Error Prevention) 。其中一個方法就是寬容性 (Forgiveness) 設計 。讓我們更詳細地解釋，而且看一些鼓舞人心的例子。

反饋和錯誤校正

寬容性設計其中最重要的方面就是良好的反饋 (Feedback) 。用戶應該得到通知有什麼（潛在的）錯誤，以及那些錯誤會怎樣影響他們的工作。良好的反饋不單只很好地解釋錯誤的詳情，它還包括了一些用戶能夠執行的行動，以便從錯誤中恢復起來。

但是，不是所有錯誤用戶都能夠撤消到 (Undo) ，有些錯誤是完全不可能逆轉的。這種情況會令用戶變得沮喪，所以提供一些解決方法是非常重要的，以助糾正問題。

防止出錯

反饋是必要的，不單只在發生錯誤之後，它而且是防止用戶出錯重要的角色。用戶應該被警告他們的行動可能會產生的後果。一個很好的例子是，當用戶要離開一個修改過的網頁表單而沒有存儲，一個確認對話框 (Confirmation Dialog) 就能防止資料丟失。

在用戶界面上減少限制條件 (Constraint) 也可以防止用戶出錯。例如，讓一個輸入字段 (Input Field) 能夠接受到各種不同輸入格式，然後讓系統處理它。

有幾個很好的例子

你不必搜索太多就能夠找到一些很好的例子，因為你每一天都使用他們。Google 真的充分利用了寬容性。讓我們來看看他們是怎樣做到這一點。