與使用者接觸-探討使用者經驗(UX)下

文/ LHH ( TEC Intern )

2016/10/05

在深入瞭解與研究使用者後,想出許多不同的方案或是新想法,接下來就是檢驗想法是否可行的時候了。從前幾篇談到設計思考的核心價值,也就是以人為本的概念,需要多次的測試,才可知道是否真的符合使用者需求。本篇就為大家介紹使用者經驗測試(User Experience test)與原型製作(Prototype)的流程與方法!

食用本篇前,建議先閱讀:[ 設計二三事 - 3 ] 與使用者接觸-探討使用者經驗(UX)上

 

使用者經驗測試(User Experience test)

什麼是使用者經驗測試?中文聽起來很長,但其實就是「將你所構想方案,實體化後變成 Prototype 給使用者使用,觀察且記錄使用者所使用情形與感受。」然而,到底怎樣才是一個好的(或者該說,有效的)測試呢?這裡有以下幾個重點,在進行測試時大家可以多多注意。

➤ 設定真實情境模擬

建議不要直接一股腦地把 Prototype 直接丟給使用者,而應在事前先花點功夫、盡量設定出貼近真實的情境,讓使用者情境下進行操作。User Experience Test 的目標,除了在於測試產品本身好不好用、更要同時瞭解到使用者操作時的真實情況,包含流程是否順暢、資訊的理解是否正確完整,才能確認這個產品是否真的能夠滿足假設的使用者需求,甚至可以進一步觀察出更多未發現的契機。( 放聲思考法* )

舉例而言,如果我們想要建立了一個生鮮食材線上購物平台,並邀請使用者測試,這時除了給予平台的 prototype 讓使用者試用,也應予以訪談,尋求更多資訊。像是詢問使用者在什麼情形下會想使用這個平台,為什麼不是直接去買菜呢?是因為住得離市場太遠?或只是不想出門?什麼時候特別不想出門?運送貨品的時間快慢會影響使用此網站的契機嗎?

➤ 利用 5W1H 方法問答

不要給予限制性或引導式的問題。例如:你會去超市還是菜市場買菜?你覺得超市是不是比較乾淨整齊?建議參考 5W1H 問答方式,分別是 Why、What、Where、When、Who、How,例如:你哪裡買菜?你覺得逛超市的感受如何?同時給予使用者開放不受限的回答空間。

➤ 追問就對了!詢問背後的原因

當探討使用者測驗的行為時,應該要深入瞭解背後原因,才可了解如何將產品改善得更好。
例如:只要再購買一件商品就可以免運費,那為何使用者不加購呢?如果是因為可加購的最低價商品,實際上比運費還要高,所以使用者不願意選購,那會不會是因為這些商品不夠吸引人呢?那麼,我們就該繼續思考,哪些周邊商品才是生鮮購物平台的目標使用者真正需要的......?

➤ 使用者測試  可能會讓你改變原本的計畫

要記得,我們不是為了做測試而做測試,而是真的要利用此方式,來找出有待改善的問題點。所以在測試過後,有可能只需要微調一些操作順序,也有可能要大改方向、砍掉重練。但先前的努力並不會因此浪費掉的——越挫越勇,經驗會更豐富!相信你的測試,並且勇於根據測試結果做出改變、並繼續下一輪的測試吧!

 

原型製作 (Prototype)

創業團隊的最終產出,可以簡單分為兩種類別,一類是服務類型,偏向介面操作,常見的可能是 App 或是網站服務;另一種是則是實體產品。如前段所說,在這些服務或產品實際啟用之前,我們都建議在不同的開發階段裡導入使用者測試;但是在開始進行測試前,又該如何製作出「原型」(Prototype),提供測試使用呢?

1. App/網站的原型製作              

如果是自己創立一個 App / 網站開發團隊,開發成員最基本應為身兼產品經理(PM, Product Manager )的共同創辦人、開發者/工程師(Developer)、與設計師 ( UX designer & UI desirner )。

簡單解釋一下團隊的運作模式:通常會是由產品經理與設計師密切合作,產出介面 ; 而設計師再與工程師溝通討論,Coding 出成品。而我們正在討論的介面原型的製作,通常是由設計師來負責。

以下淺談開發介面的流程,若讀者想深入瞭解,建議可以閱讀:[ 嫁給 RD 的 UI Designer ] 讀者來信:UI 設計流程

一個app/網站的介面產生流程為:

  1. User Story
  2. Functional Map
  3. Flow Chart
  4. UI Flow
  5. Wireframe
  6. Mockup
  7. Prototype

User Story 與 Functional Map 步驟,為使用者研究的重點,接著討論 Flow Chart 與 UI Flow 則屬於 UX/UI 的設計流程。完成後會開始準備 wireframe (線框稿),以排定整個 app 介面的框線、排版 ,供設計師與工程師討論時使用。Mockup(視覺稿),是由 Photoshop 等繪圖軟體製作出視覺圖,接下來會交給工程師串聯後台資料。幾經修正後,團隊就會完成一版外觀已與實際產品無異、可以實際操作但還未上線公開的Prototype(原型),並以此作為進行使用者測試的基礎。

隨著 Prototype 與使用者測試的觀念越來越普及,現在就算你不會 Coding 也不用擔心無法製作出 Prototype。網路上有許多協助做 Prototype 的資源,例如 ProttHype 等等,有興趣的人都可以嘗試看看呦!

 

2. 產品原型製作

隨著產品類型的不同,在每個階段,都有不同的建議方式來製作原型。以下幾個步驟為常見的流程:

先透過實驗,確認「可行性」!

如果你的產品是需要使用電路板、機械構造或是要需要其他新材料,建議你先針對這塊技術可行性進行最簡單的實驗,確認實際操作後的結果真的符合假設,再往下一步走。先確定最有風險的部分,而不要一股腦地直接開始外型設計,否則最後可能倒頭來可能會因為機構的需求限制,導致原本的外型設計完全無法應用於產品上。如果你是這些專業技術方面的專才,趕快動手實驗吧!如果不是,建議可以找個專業領域的朋友一同協助。

草模製作,讓概念從紙上轉為實體。

確認好局部技術可行性後,接下來我們需要讓整個產品的設計構想化為真實,以方便團隊溝通與測試。我們可以將每個列入考慮的可能方案,從圖紙上轉化為實體,做成一比一的初期原型。製作原型,除了自己可以馬上操作看看到底是否好用,也是溝通的工具,方便與之後設計造型和組件的設計師討論。依據所要做的東西不同,所適合使用的材料也不一樣。可以使用保麗龍,或是瓦楞紙或是木棍......不要害羞,就像國中國小時美術課一樣,發揮想像力來使用周邊材料製作與實體相等的大小原型。記住,原型很重要,但也可以很簡單,不要害怕動手製作原型!開始就對了!

國外部落客為了製作寵物餵食器所錊的草模

此為國外部落客為了製作寵物餵食機所實驗的草模,大家可以點進去看看。有詳細的製作流程、測試運作的影片還有表現數據的紀錄,從這篇文章,可以幫助大家更了解草模的製作與實驗該如何進行。

確定設計概念與外型後,開始打樣。

經歷反覆的草模製作後,團隊會逐漸聚焦至一個共同的設計方案,再一步一步的精細化所製作的草模,讓大家對於產品的外觀造型有更高的共識,在個階段,往往會需要與負責外觀造型的設計師反覆確認、看稿、看草模,等到都確定之後,就會往下一階段前進,開始打樣。

打樣所需要的關鍵素材包含「圖檔」以及「樣品」。

➤ 圖檔:這邊的重要關鍵,就是尺寸的確定,能讓後續的機器根據這些尺寸數據繼續使用。依據不同類型產品,產品設計師或是機構工程師用 3D 建模軟體建好 3D 圖檔,又或是像製作包包衣服這類產品,會先畫好紙板版型等等,總之就是,透過圖檔來確定每個細節的尺寸。

➤ 樣品:當作參考資料,輔助解說實體產品。你可以拿著你想要的材質物件來詢問廠商「如何製作出像這個材質的○○○」、「有材質可以做出比這個還輕的○○○嗎」(以下開放自行造句)。

打樣的方式有很多種,像是成本較低廉的RP(Rapid Prototype,快速原型樣品打樣),較不精準,但是在前期討論造型方便,甚至利用簡單的 3D 列印就可以完成,或是成本高但製作品質也更精準的 CNC 銑床模具加工等等。打樣的樣品,未必會和最後決定生產的最終產品相同,它的目的是讓你獲得「最接近產品實體的」非最終產品,用它來測試功能性與外觀、獲得更精準而真實的反饋,很有可能會需要經過多次打樣試驗,才能決定最後產品定案。打樣的成本的確較高,因此才會有前面建議的技術可行實驗、草模等等建議流程,讓產品的設計與測試流程,有機會降低金錢與時間成本。

 

聽聽車庫團隊怎麼說!

延續上一篇的訪談,我們繼續來訪問車庫團隊 Oyster X 共同創辦人,丁丁。OysterX 的產品是一款個人化旅行紀錄 APP,透過遊戲化的設計,能結合朋友、所在位置等資訊,進而將每個人的抽象的世界觀具象為獨一無二的小星球。

問答摘錄

問 : 這次專欄想聊一下關於 app 開發的過程,與後續使用者測試的部分。想先請問 Oyster X 的團隊分工大致如何?

丁 : 我們的團隊基本上有五個人:兩位 Designer ,兩位PM也同時是工程師,還有一位行銷負責人。Designer 的部分,有一位幾乎全包所有的操作流程、icon 等等,都是由他設計 ; 而另一位比較多是設計內容的部分,例如畫內容的 3D 物件。不過基本上他們是相輔相成的。

而 PM 是 Vincent 和我,我們其實是互相 Cover,但他的工作內容比較多是主導架構與開發。新創團隊裡的每個人都有一些 PM 的成分,像是行銷的工作雖然是觀察市場,研究競爭對手,但同時從競爭對手那邊會獲得使用者 feedback ,整理出哪些是使用者感興趣、想要的 feature 。

問 : 那你們是怎麼測試你們的產品呢?大概從哪個階段就開始執行?

丁 : 一開始我們 Designer 是繪出 wireframe 鉛筆稿和 PM 討論,這時負責開發的人也會一同參與。之後工程師會先稍微 coding 一個版本,交給 Designer 討論,看看是不是所想像的效果。因為實際上會發現存在一些限制,有的效果未必真的可以做出來。而真正準備開始進行測試,差不多就是現在這個階段,目前我們的 App 已經到了 Prototype Alpha(預覽版本),就是大家可以安裝在手機上、進行使用。

問 : 有計劃用什麼方式或按照什麼順序,對外進行測試嗎?

丁 : 目前主要都還在內部測試的階段,也就是我們團隊內、熟悉的人來安裝試用,但是團隊的人都已經很清楚怎麼使用了,測試只是在看有沒有Bug,跟所謂的使用者經驗較沒有關係。對外測試的話,有一次我們將手機拿去櫃檯前給你們玩玩看,就算是最快速簡單的對外測試了,但當然還不是正式的。
之後在Beta階段(測試版本)我們會邀請車庫裡的工作人員、其他團隊一起安裝並試用。接著在正式上線之前,我們計畫會再對外做一次測試,預計會找一些早期的使用者,也就是對這個 App 完全陌生的人、完全沒有參與開發、也不認識我們的人,看看這些早期使用者的反應是否如我們所預期。

問 : 你說的拿來櫃檯給我們試用那次,我有印象。那以那一次短短的試用而言,你有得到有用的 feedback 嗎?這樣測試就能夠發現問題?

丁 : 當然有,嗯,例如你們在點到照片時,會希望照片可以放大。這是大家的直覺反應,但在設計時我們並沒有把這 idea 放進去,但你們在用的時候就會卡住。這個功能我們一開始雖然有考慮到,不過在討論開發優先順序時,大家認為是很之後的事,還不在現在的流程階段;但是經過你們實際試用後,我們會把這個照片放大的功能優先度提到前面一點。像這樣的試用跟觀察,就能讓我們發現一些值得討論的問題。

 

結語

從 idea 發想到研究階段,再到 Prototype 階段,是一個漫長的路程,將會投下許多時間與金錢。而使用者測試是一道重要關卡,測試後產品有可能許多細節需重新修改,也可能完全被翻盤。但若跳過這道程序,便無法預知產品未來在市場上能否長存一段時間。因此,希望透過以上的簡介與實際團隊訪談,讓大家對於「進行測試」的重要度以及方法稍微有些頭緒,如果有想要補充的資訊或建議,也歡迎寫信到 ntutec@ntu.edu.tw 告訴我們呦! 

感謝大家看完落落長的文章! 我們下次見囉!

 

【備註】放聲思考法:根據英文Wiki百科的解釋:進行放聲思考法,受測者需要操作指定任務同時將心中的想法講出,講出他們看到了什麼、想到了什麼、感覺如何。研究者則可以由受測者的這段認知過程中蒐集到各種洞見與資訊。更多閱讀請點此。