Alpha Camp 了解產品設計思考與使用者體驗(上)

前言

從工程師角度了解產品設計思考,寫程式碼在產品開發中屬於後期階段,在這之前須要整理出一些資訊

  • 產品規格 product specification
  • 目標受眾 target audience
  • 使用者故事 user stories

再依據收集到的材料,進行思考將問題拆解並實作。

  • 想法到產品規格的流程及考量
  • 產品設計中使用到的框架及工具
  • 了解產品設計師的工作內容與目標
  • 成功產品的關鍵因素有那些

使用者體驗(user experience - UX)

在產品設計之前,必須先了解使用者體驗的概念,通常是指使用者對於產品及服務進行互動的過程、感覺。

每一種產品都會有自己的使用者體驗,對於網路開發而言,網頁的呈現都會隱約地透露出一些訊息,其重點就是, 不違反一般人的使用習慣(直覺反應)適當的給予小提示

在使用產品過程中,體驗上的情感反應會影響使用者的下一步動作,當有負面情感時,在嚴重的情境下便會刪除軟件也是有可能的。

思考設計(design thinking)

思考設計是以人為本的設計精神與方法,考慮人的需求與行為亦考慮科技、商業的可行性。與是屬於較為感性分析的方法。而設計思考不是一個直線性、不回頭的過程,在這之中可能會需要反覆推導、測試,通常不會順暢的找到正確答案。

  • Empathize 同理心
  • Define 定義問題
  • Ideate 創意
  • Prototype 製作原型
  • Test 測試

我們可以透過 2W1H 去一步步實現這個工具的流程。

  1. WHY 該步驟的目標?
  2. HOW 該步驟的具體作法?
  3. WHAT 完成步驟會得到甚麼結果?
  4. Key success factor 成功關鍵是甚麼?

Empathize

WHY?

思考設計建立在兩個假設上

  • 產品為使用者打造
  • 打造產品的人,其實不知道使用者真正需求

HOW?

基於假設,我們要以同理心了解使用者動機、以及要解決的問題、需要達到的目的、以及使用感受。所以可以透過各種方法去達成,互動訪談、焦點團體(focus group)訪談、問卷調查、實際使用場景觀察。

WHAT?

完成這幾個步驟,就可以為目標使用者建立同理心地圖(empathy map),透過地圖描述使用者思想、言行、感覺。 讓我們可以方便進行下個步驟 Define

KEY

  • 開發團隊必須保持開方的學習心態。用心傾聽、忠實紀錄,不以預設立場過度解讀。

Define

WHY

透過定義讓開發團隊可以了解手上的資料,聚焦在解決使用者的問題。

HOW

在這個步驟是總結使用者需求的問題描述(problem statment),將收集到的資料,進行研究、討論、整理、收斂,換句話說是 架構、刪去、挖深、組合。

WHAT?

可以使用簡短的句子表達清楚的問題描述,一個清楚的問題描述包含: 使用者、需求、動機。

舉例:

  • 倉儲人員需要好用的工具提升理貨速度,因為想提早下班
  • 上班族需要有地方能代收網購商品,因為上班地方不方便收貨

KEY

  • 團隊每人都能清楚掌握使用者需求的定義和重點。
  • 不追求標準答案,不思考結論是否正確,這個階段不需要驗證。

Ideate

WHY?

透過定義,了解當前需要解決的問題後,就可以開始思考解決方案了

HOW?

創意發想方法很多種,例如:腦力激盪、專家訪談、六項思考帽

其中腦力激盪適當人數為 5~6 人,每人針對問題、需求、提出 2~3 個相對應解決想法。

tip: 脫口而出的是「創意」、想太多就會容易變成「規格」。在這一步,我們需要的是創意。

WHAT?

完成後可以得到初步的概念或答案:
產品 是能讓 某些族群某種場合 做/得/達到 某種任務/目標/利益 ,與市場上的其他產品不同的地方在於 產品差異化/競爭優勢

KEY

創意發想的過程有三不五要原則

  • 不批評
  • 不打斷
  • 不離題
  • 要延續他人想法: 也就是鼓勵創意延伸,互相激發創意。
  • 要畫圖: 將想到的點子寫下來、畫下來,多使用形容詞進行描述發想,少使用名詞。
  • 要瘋狂、要數量: 對於點子越多越好,先不用擔心可行性
  • 要下標題

Prototype

WHY?

製作產品原型可以使開發更有效率, 產品原型包含設計與開發。

HOW?

在製作的過程中會使用到 wireframe、mock-up 等工具。這是一個動手思考過程。

WHAT?

藉由簡略的草圖,作為不斷修整從而達到想要的效果,在這個階段的產品會將重要的功能/ user stories 全部展現出來、或是能夠操作。

KEY

不尋求完美,能夠快速製作出原型,藉由不斷修正達到完整效果,以相對較低的成本去探究實作可能的風險,從而考慮相對應的解決方案。

Test

WHY?

利用原型進行實際測試,透過原型與使用者進行互動、溝通。 讓我們更了解使用者、產品。

HOW?

通常會透過情境模擬,讓同一個使用者在此情境中完成多個任務,讓團隊可以從旁觀察使用者反映、了解使用狀況及回應。

WHAT?

最後根據觀察使用者的反應,重新定義(Define)需求或是改進,讓我們可以達到目的地,了解使用者,並開發出符合需求的產品。

KEY

開發團隊在測試階段與同理心階段相似,忠實紀錄,不為使用者遇到問題找理由。

精神

以 史丹佛大學(Standford University) D-School 設計思考訓練,提出的精神為

  • 以人為本: 以人為設計的出發點,以使用者觀點體驗。
  • 及早失敗: 寧可在早期成本與時間投入相對較少的情況下,早點知道失敗並對其做相對應修正。
  • 跨域團隊合作: 不同背景的成員具有不同專長、不同觀點。透過不同觀點容易激發出更多的創新。
  • 做中學習: 實地動手做出原型。從實做的過程中,進一步的學習。
  • 同理心: 如同使用者一樣的角度,理解他人,感同身受的體驗。
  • 快速原型製作: 從簡易粗糙的模型開始,快速完成,以方便快速反應修正。

從購物體驗了解設計思考

問題一:請在「不使用搜尋功能」的情況下,計時看看你分別花了多少時間在這兩個購物網站看到第一個適合放在陽台的曬衣架?

不使用搜尋功能的條件下,我針對三個不同的日常用品進行搜尋,分別是曬衣架、果汁機、手機保護貼。
其中秒數分別為
PChome: 20秒、25秒、13秒 平均19秒
蝦皮: 25秒、120秒、15秒 平均53秒

在不使用搜尋的方式下,蝦皮的尋找的時間較長,是因為對於分類較為不熟悉所導致。

問題二:現在觀察 PChome 與蝦皮的首頁。請描述這兩個電商平台把產品分類的方法。

PChome:
導覽列:

  • 針對不同管理部門,給予不同的連結,線上購物、24h購物、購物中心、書店等等
  • 在產品主分類大致為電器類、非電器類。第二層分類依照使用面向進行分類(電器類:通訊、數位、家電,非電器:日常、生活、食品、美妝),在分類之下依照常用工具大分類。

    頁面呈現

  • 導覽列占總畫面多數,畫面以上方及左側皆使用分類導覽。
  • 除導覽列之外,先讓各大項分類有進行各種促銷活動的商品進行呈現,在促銷商品之下,呈現使用者曾經搜尋過可能會需要的商品,最後呈現熱銷商品、非主要促銷的新降價產品。

    蝦皮:

  • 首頁主要先以促銷、活動擺在最上面,依序呈現產品分類、小活動、商城促銷、熱銷商品、最後才是隨機商品。
  • 產品分類上電器用品(通訊與周邊、3C、家電),非電器則將主要男女用品進行細分、及非電器的食衣住行用品。
  • 在分類之下則是以商城擁有的大品牌為主要進行銷售,最後才會呈現個人賣家商品。

問題三:針對都有在 PChome 與蝦皮上販售的同一樣產品,請問在哪個平台頁面中呈現給你的訊息較能幫助你進行決定?為什麼?

依照同一商品來看
PChome:

  • 價格
  • 多種的付款管道、方式。
  • 詳細的官方商品說明。
  • 較固定的配送時間及運費。
  • 退貨方式明確

    蝦皮:

  • 價格。
  • 買家對於賣家及商品評價。
  • 運費、出貨時間。
  • 能與賣家溝通。

    在都找的到同一產品情況下, PChome 對我而言會是比較容易去購買的管道,主因說明上較為清楚,運送時間較容易掌控,退貨機制明確方便。