用實際的工作流程告訴你,UX設計師到底在設計什麼?

December 3, 2020
UX Design

儘管UX設計師這個職位已經存在很久了,但很多人還是不了解這個職業在做什麼。

我嘗試在Google 搜尋「UX設計師是什麼」,所得到的答案幾乎都很抽象,甚至有的敘述與我目前的工作經驗相差甚遠。

例如出現頻率很高的這張番茄醬圖就大錯特錯的傳達了UI 與 UX相互對立的概念。真實的情況是我們各司其職,一起把產品做得更好。

Image for post

因此,我希望可以透過一個假設性的案例,向讀者說明UX設計師的真實的工作內容,以及我們為軟體設計提供了什麼價值。

那麼,我們就開始吧。

註:本篇文章會以產品經理、UX設計師、UI設計師共同合作的前提做討論。至於這些角色分別在軟體的設計上擔任什麼角色,將來會再撰文說明。

1. 了解需求

UX設計師的工作通常都是由與產品經理發起的。產品經理會先與需求方溝通後生成產品描述,並與我們進行初步討論。

在這個階段,我們需要暸解以下四點:

  1. 客戶:也就是需求方,可能是老闆、其他部門或甲方
  2. 用戶: 產品的終端使用者
  3. 目標:本次需求的問題。例如加入XX功能、提升XX%的購買量都是可能的目標
  4. 限制:時間、成本、或設計限制

在本次的案例中,我們假設需求極為單純:

Image for post

在清晰需求的基本資料之後,我們就可以進入下一個步驟了。

2. 設計用戶流程與信息架構

第二步是設計用戶流程與信息架構。以本次的需求為例,使用者最少必須經歷選擇披薩、查看披薩詳細資訊、確認選購、填寫運送資訊、完成付款幾個步驟。

接下來我們將可能的頁面以及各個頁面上所需要的元素列出來。這時候,UX設計師需要與產品經理保持頻繁的溝通,以確保所有客戶要求展示的訊息都在介面上體現。

所有訊息都確認之後,我們就對產品的雛形有了初步的想像如以下。

Image for post

在這個階段中,我們也會進行不同方案的探索。例如將元素移動到不同頁面、增加或刪除流程等等,去想出一個最適合的解決方案。

Card Sorting

為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息,我們會對頁面上的訊息進行分組歸類。這個時候我們會運用到一個叫做Card Sorting的技巧。

Card Sorting非常簡單。我們會把每個頁面上的元素一字排開,然後把相似的元素群集在一起並打上標籤。以下以商品詳情頁的元素為例,左右分別為Card Sorting 前與後的差異。

Image for post

註1:此處為了便於解說,我們的流程十分簡單。在實際的工作中,用戶流程可能受到技術限制、業務限制,也可能因為需求的本質而變得十分複雜

註2:如果資源足夠,Card Sorting的動作會交由目標使用者來做。畢竟使用者的想法才是真的能夠帶來影響的。除此之外,Card Sorting也可以分為開放式與封閉式的,將來會再撰文說明。

註3:Card Sorting時,我常會用到的工具是Whimsical,更多資訊請見下

3. 設計產品原型

在結束用戶流與信息架構設計之後,我們就可以開始著手設計產品原型了。

產品原型是像是一個產品的藍圖,粗略的勾勒出頁面上的有哪些元素以及每個元素如何分佈。UX設計師通常會以簡易的線稿呈現,但不同的設計師有不同的作法。我自己便會將設計出更逼真的產品原型,如此可以更容易想像產品完成後的樣子。

以商品詳情頁為例,可能的設計如下所示。

Image for post

在設計產品原型時,我們會注意三個重點:

按元素優先級進行設計

這是對介面設計造成最大影響的因素。優先級較高的元素需要賦予更高的視覺重量、放在更加醒目或是更易於操作的地方

優先級的決定方式有很多。如果是現存的頁面,我們會透過資料分析去解讀用戶的行為,了解各元素的對用戶的價值高低。我們也可以諮詢需求方,請益他們的經驗什麼,或瞭解他們希望用戶優先看到哪些元素。最後,我們也可以去觀摩我們的競爭者是如何設計的。

貼合信息架構

相同層級的資訊應以以進行類似的佈局、使用相同的介面組件。在信息之間有隸屬關係的時候,我們也會藉由使用不同層級的組件來創造視覺的階層。這樣做的目的是為了以最簡單、符合邏輯、並且符合用戶心理模型的方式呈現頁面上的訊息。

使用既有組件

組件是介面上的最小單位,小至按鈕大至整個商品區塊都可以視為介面組件。在設計的時候,除非必要,否則我們會盡量避免創造新的組件。這樣一方面可以減少UI設計師的工作量,一方面也可以讓介面變得更加的一致。

4. 撰寫交互文檔

完成產品原型的設計之後我們會與產品經理、UI設計師進行討論,確認產品原型設計過關之後,UI設計師就會開始進行介面的最終設計。

於此同時,我們UX設計師就會開始撰寫交互文檔。一份交互文檔應該包含頁面流、重要的標注、跳轉邏輯等等。

交互文檔的主要讀者是工程師,方便他們理解我們所設計的用戶流程、界面跳轉等等。撰寫交互文檔除了讓工程師們可以更易於理解我們的設計,也可以讓我們有機會重新審視自己的設計。

交互文檔的的形式如下。在比較複雜的需求中,會加上更多的邏輯判斷,也有可能附上更細的各個組件的說明圖等等。

Image for post

然後就可以把設計交到工程師那邊了! 太好了!🎉

總結

以上就是我們在進行UX設計時會經歷的工作流程與使用的技巧。

但設計產品原型並不是UX設計師工作的全部內容。

我們需要定期或不定期的進行用戶行為的數據分析,幫助我們了解用戶,也幫助我們審視自己的作品是否有確實達到當初設定的目標

我們需要參與非常多的會議,與產品經理、需求方、工程師等等進行項目前中後的各種溝通。

我們也需要花時間去制定與更新公司內部的設計規範,以確保每個UX設計師所產出的設計都能夠達到相同的品質水準。

關於UX設計師的各種方方面面,將來我都會再繼續撰文說明,如果有任何問題都歡迎留言給我,我都十分樂意解答。