【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏文老師

Minimum cost, Maximum ROI, Digital Consulting & Solutions

UI/UX
Ken Tsai

時間：2014/01/16 講者：Ken


關於Ken這個人…
1999年開始玩自己的第一個Homepage
Frontpage  Dreamweaver  Sublime text
從單純的網頁設計師逐漸走向使用者介面研究
曾經做過 • 女性服裝品牌視覺企劃
• 職棒球隊行銷活動企劃
• KEN studio 網站專案規劃
• 癌邦網介面設計師
（2012年台北市創業新點子競賽第三名)

現在是 • MMdc關鍵數位行銷品牌經理
• WordPress小小聚FB社團發起人
個人FB粉絲專頁請搜尋 KEN studio - 設計的目的是為了解決問題！
時間：2014/01/16 講者：Ken


課程大綱
• UI/UX在數位環境中做些甚麼。
• 以使用者為主的UI/UX設計。
• 從「核心資訊與路徑」出發進行UI/UX設計。
• 經驗分享：如何與UI/UX設計師溝通。
• 實戰練習。
• Q&A
時間：2014/01/16 講者：Ken


UI

=User Interface

是系統和使用者之間進行資訊交換與互動的介面。

時間：2014/01/16 講者：Ken


UX

=User experience

使用者透過操作介面的互動流程，所產生的各種體驗。

時間：2014/01/16 講者：Ken


在數位環境中，
所有的UI/UX都有一個共通點，
就是進行資訊的傳遞與應用。

時間：2014/01/16 講者：Ken


載具與技術的進步，改變了資訊的呈現方式。

時間：2014/01/16 講者：Ken


雖然傳遞資訊的介面與結構會改變，
但是資訊內容與達成目的是不變的。

使用者最重視的，
還是資訊。
時間：2014/01/16 講者：Ken


以使用者的需求進行UI/UX設計
英國數位服務設計準則 UK Government Digital Service Design Principles(2012)
• Start with needs* （從需求出發）
• Do less （簡單化）
• Design with data （針對資料/資訊做設計）
• Do the hard work to make it simple （花點心思讓它變簡單）
• Iterate. Then iterate again. （檢視再檢視）
• Build for inclusion （為使用者設計）
• Understand context （了解設計目標的本質）
• Build digital services, not websites （做數位化服務,而不只是個網站）

• Be consistent, not uniform （一致，但非古板）
• Make things open: it makes things better （讓所做的事開放，會讓所有事更好）
https://www.gov.uk/design-principles

時間：2014/01/16 講者：Ken


以使用者的需求進行UI/UX設計
• Design with data （針對資料/資訊做設計）
• Understand context （了解設計目標的本質）
• Build for inclusion （為使用者設計）
• Start with needs* （從需求出發）
• Do less （簡單化）
• Be consistent, not uniform （一致，但非古板）
• Do the hard work to make it simple （花點心思讓它變簡單）
• Iterate. Then iterate again. （檢視再檢視）
• Build digital services, not websites （做數位化服務,而不只是個網站）

• Make things open: it makes things better （讓所做的事開放，會讓所有事更好）

時間：2014/01/16 講者：Ken


實踐專注在資料/資訊上的UI/UX設計
- 從「核心資訊與路徑」開始規劃

時間：2014/01/16 講者：Ken


「核心資訊與路徑」為主的UI/UX開發
過去，我們常這樣開發網站的UI/UX…

首頁與
主視覺

內容頁面

分類頁面或
其他相關頁面

但是，很可能因為遺漏掉了重要的資訊而必須回頭修改首頁主視覺…

時間：2014/01/16 講者：Ken



交通需求線
時間：2014/01/16 講者：Ken


Are Halland： Core and Paths: Designing Findability from the Inside and Out (2007)

使用者通常是透過向內連結(搜尋、推薦、社群或廣告等)進入他們想要看的內容。
這些內容我們可以稱之為「核心資訊」。
Homepage

搜尋引擎

部落格推薦

RSS或廣告

Landing page

Landing page

時間：2014/01/16 講者：Ken


時間：2014/01/16 講者：Ken


依照「核心資訊與路徑」為主規劃使用者介面、體驗模型的優勢：

• 專注於使用者對於資訊的聚焦。
• 快速對焦服務提供者與使用者的供需認知。
• 目標導向。
• 不浪費時間在多餘的美化與設計。

• 創造使用者與核心資訊的最短距離連結。
時間：2014/01/16 講者：Ken


對內路徑
搜尋引擎
部落格推薦
社群推薦
RSS
網路廣告
…
曝光的可能性

對外路徑

核心資訊

放入購物車
分享資訊給朋友
閱讀其他資訊
…

創造服務價值
服務的投資回報

時間：2014/01/16 講者：Ken


流程：

• 定義核心資訊。
• 列出向內路徑。

• 列出向外路徑。
• 依照模型整合頁面全貌。

時間：2014/01/16 講者：Ken


STEP-1
定義核心資訊

時間：2014/01/16 講者：Ken


STEP-1:定義核心資訊
2

3

買台單車

銷售單車

得到單車的資訊

得到使用者的資訊

進行比價

推廣品牌

1

商品 - 登山車。
24段變速。

TIPS :
運用模型進行開發規劃時，開發
團隊請務必要對核心資訊先進行
檢視與驗證。

4

TIPS :
為分辨在核心資訊內的資訊輕
重先後，建議同時為核心資訊
進行重要性排序。

規格、簡介。

5

6
價格、品名、商品分類、

放入購物車、

其他參考圖片、

加入喜好清單、

品牌識別與網站主視覺。

分享到社群。

時間：2014/01/16 講者：Ken


依核心資訊進行各種載具介面
的草圖設計。

時間：2014/01/16 講者：Ken


核心內容：

舒棉連帽外套-男(紅色)

使用者目的：
購買、比價。

網站業主目的：

銷售商品、留下會員資訊、品牌。

輔助資訊：

商品說明、規格、試穿照、尺寸表、
付款方式、建議售價。

核心元素：

品名、價格、數量、產品分類、
產品照、主視覺、網站品牌識別。

預期動作：

加入購物車、會員登入、訂閱電子報。

時間：2014/01/16 講者：Ken


核心內容：

2013頂級登山摺疊車…

使用者目的：
購買、比價。

銷售商品。

輔助資訊：

商品說明、規格(下拉選單)、
付款方式、分期方式、建議售價。

核心元素：

品名、價格、數量、產品分類、

預期動作：

加入購物車、加入追蹤清單、
買貴通報、故障通報。

時間：2014/01/16 講者：Ken


核心內容：

2013頂級登山摺疊車…

使用者目的：
購買、比價。

銷售商品。

輔助資訊：

規格(下拉選單)、付款方式、分期方式、建議售價。

核心元素：

品名、價格、數量、產品分類、產品照、主視覺、品牌識別。

預期動作：
加入購物車。

時間：2014/01/16 講者：Ken


核心內容：
影片。

使用者目的：

透過影片獲取資訊。


提高瀏覽量與黏著度、增加廣告收益。

核心元素：

影片名稱、上傳者資訊、主視覺、
網站品牌識別。

預期動作：

播放、訂閱、評價、加入喜好清單…

輔助資訊：

發佈時間、影片說明、瀏覽量…

時間：2014/01/16 講者：Ken


核心內容：

SONY 42型聯網LED液晶電視

使用者目的：
比價。


銷售商品(到店面購買)。

核心元素：

品名、價格、型號、產品分類、

預期動作：

讚、分享、到店面購買(不明確)。

輔助資訊：
商品規格。

時間：2014/01/16 講者：Ken


STEP-1-tip:那些按鈕教我的事

放入購物車

時間：2014/01/16 講者：Ken


STEP-1-tip:那些註冊程序教我的事

時間：2014/01/16 講者：Ken


STEP-2
列出向內路徑

時間：2014/01/16 講者：Ken


STEP-2:列出向內路徑
買台單車

單車名、變速、登山車、


進行比價

GOOGLE
YAHOO
BLOG
社群網站
網路媒體
外部網站
其他…

銷售單車
推廣品牌

24段變速。

規格、簡介。
預先規劃向內路徑的連結內容與關鍵字，提
升搜尋分享的資訊連結。幫助使用者快速找
到此頁面。
放入購物車、

品牌名、爬山、休閒、



變速…


分享到社群。

時間：2014/01/16 講者：Ken


STEP-2:列出向內路徑

時間：2014/01/16 講者：Ken


STEP-3
列出向外路徑

時間：2014/01/16 講者：Ken


STEP-3:列出向外路徑
買台單車

銷售單車



進行比價

推廣品牌

GOOGLE
YAHOO
BLOG
24段變速。
社群網站
網路媒體
外部網站
建立完整的向外路徑，提高使用者停留在網站內進
其他…
規格、簡介。
行活動的時間，有助於提高網站經營者的設定目標
(購買、獲得使用者資訊等)。

購物車
結帳頁面
會員頁面
喜好清單
分享
列印
相關商品
相關分類
其他…

單車名、變速、登山車、


放入購物車、

品牌名、爬山、休閒、



變速…


分享到社群。

時間：2014/01/16 講者：Ken


STEP-3:列出向外路徑

時間：2014/01/16 講者：Ken


STEP-4
依照模型整合介面全貌

時間：2014/01/16 講者：Ken


STEP-4:依照模型整合介面全貌
目的：確保使用者可以最快到達核心內容頁面，並持續停留在介面上使用。
Homepage

搜尋引擎

部落格推薦

RSS或廣告

Category

Landing page

Landing page

時間：2014/01/16 講者：Ken


目的：確保使用者可以最快到達核心內容頁面，並持續停留在介面上使用。

時間：2014/01/16 講者：Ken



http://www.lativ.com.tw/Detail/10020032
時間：2014/01/16 講者：Ken



http://www.youtube.com/watch?v=Qo6QNU8kHxI&hd=1
時間：2014/01/16 講者：Ken


補充
運用「核心資訊與路徑」做
UI/UX開發時該注意的事
時間：2014/01/16 講者：Ken


運用「核心資訊與路徑」開發該注意的事
• 如果你的服務/產品有多個面向，請為每個面向的核心資

訊都建立一個模型，再針對每個核心資訊重要性進行排序
與整合。

• 請記得在模型建立初期，透過使用者訪談與洞察，確認核
心資訊，以免產生認知差距。

時間：2014/01/16 講者：Ken


分享
如何跟你的UI/UX設計師溝通

時間：2014/01/16 講者：Ken


如何跟你的UI/UX設計師溝通
• 避免雞同鴨講。
• 不要太快進入設計細節。
• 同理心。
• 針對資訊與功能做設計，而不是為了美觀。
• 認同並學習跨界的工作經驗。

時間：2014/01/16 講者：Ken


聽了這麼多的概念，

最後，我們來個練習吧。

時間：2014/01/16 講者：Ken


實戰練習：用「核心資訊與路徑」模型敘述你目
前公司所提供的主要產品。
時間：10分鐘。

時間：2014/01/16 講者：Ken


謝謝各位 :-D
歡迎各位提問
蔡柏文 Ken Tsai
ken@minmaxdc.com

時間：2014/01/16 講者：Ken

【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏文老師

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (12)

Similar to 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏文老師

Similar to 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏文老師 (20)

More from 關鍵數位行銷股份有限公司 Minmax Digital Consulting

More from 關鍵數位行銷股份有限公司 Minmax Digital Consulting (14)

【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏文老師