Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,548 views

Published on

【UI/UX 】留住人流、創造金流!高吸睛度的網站介面優化與配置

課程內容:
怎樣的網站介面能創造良好的使用者體驗?本堂課將以實務案例帶出正確的網頁結構與在行動介面瀏覽的影響。並從圖文比例與網頁元素色彩配置,告訴你以使用者角度為出發點的網站設計原則。適合需和工程師溝通的行銷、產品企劃人員,建立你的網站溝通概念,創造內部溝通效率。

Published in: Design, Technology, Business

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

  1. 1. Minimum cost, Maximum ROI, Digital Consulting & Solutions UI/UX Ken Tsai 時間:2014/01/16 講者:Ken
  2. 2. Minimum cost, Maximum ROI, Digital Consulting & Solutions 關於Ken這個人… 1999年開始玩自己的第一個Homepage Frontpage  Dreamweaver  Sublime text 從單純的網頁設計師逐漸走向使用者介面研究 曾經做過 • 女性服裝品牌 視覺企劃 • 職棒球隊 行銷活動企劃 • KEN studio 網站專案規劃 • 癌邦網 介面設計師 (2012年台北市創業新點子競賽 第三名) 現在是 • MMdc關鍵數位行銷 品牌經理 • WordPress小小聚FB社團 發起人 個人FB粉絲專頁請搜尋 KEN studio - 設計的目的是為了解決問題! 時間:2014/01/16 講者:Ken
  3. 3. Minimum cost, Maximum ROI, Digital Consulting & Solutions 課程大綱 • UI/UX在數位環境中做些甚麼。 • 以使用者為主的UI/UX設計。 • 從「核心資訊與路徑」出發進行UI/UX設計。 • 經驗分享:如何與UI/UX設計師溝通。 • 實戰練習。 • Q&A 時間:2014/01/16 講者:Ken
  4. 4. Minimum cost, Maximum ROI, Digital Consulting & Solutions UI =User Interface 是系統和使用者之間進行資訊交換與互動的介面。 時間:2014/01/16 講者:Ken
  5. 5. Minimum cost, Maximum ROI, Digital Consulting & Solutions UX =User experience 使用者透過操作介面的互動流程,所產生的各種體驗。 時間:2014/01/16 講者:Ken
  6. 6. Minimum cost, Maximum ROI, Digital Consulting & Solutions 在數位環境中, 所有的UI/UX都有一個共通點, 就是進行資訊的傳遞與應用。 時間:2014/01/16 講者:Ken
  7. 7. Minimum cost, Maximum ROI, Digital Consulting & Solutions 載具與技術的進步,改變了資訊的呈現方式。 時間:2014/01/16 講者:Ken
  8. 8. Minimum cost, Maximum ROI, Digital Consulting & Solutions 雖然傳遞資訊的介面與結構會改變, 但是資訊內容與達成目的是不變的。 使用者最重視的, 還是資訊。 時間:2014/01/16 講者:Ken
  9. 9. Minimum cost, Maximum ROI, Digital Consulting & Solutions 以使用者的需求進行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
  10. 10. Minimum cost, Maximum ROI, Digital Consulting & Solutions 以使用者的需求進行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
  11. 11. Minimum cost, Maximum ROI, Digital Consulting & Solutions 實踐專注在資料/資訊上的UI/UX設計 - 從「核心資訊與路徑」開始規劃 時間:2014/01/16 講者:Ken
  12. 12. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 過去,我們常這樣開發網站的UI/UX… 首頁與 主視覺 內容頁面 分類頁面或 其他相關頁面 但是,很可能因為遺漏掉了重要的資訊而必須回頭修改首頁主視覺… 時間:2014/01/16 講者:Ken
  13. 13. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 交通需求線 時間:2014/01/16 講者:Ken
  14. 14. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 Are Halland: Core and Paths: Designing Findability from the Inside and Out (2007) 使用者通常是透過向內連結(搜尋、推薦、社群或廣告等)進入他們想要看的內容。 這些內容我們可以稱之為「核心資訊」。 Homepage 搜尋引擎 部落格推薦 RSS或廣告 Landing page Landing page 時間:2014/01/16 講者:Ken
  15. 15. Minimum cost, Maximum ROI, Digital Consulting & Solutions 時間:2014/01/16 講者:Ken
  16. 16. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 依照「核心資訊與路徑」為主規劃使用者介面、體驗模型的優勢: • 專注於使用者對於資訊的聚焦。 • 快速對焦服務提供者與使用者的供需認知。 • 目標導向。 • 不浪費時間在多餘的美化與設計。 • 創造使用者與核心資訊的最短距離連結。 時間:2014/01/16 講者:Ken
  17. 17. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 對內路徑 搜尋引擎 部落格推薦 社群推薦 RSS 網路廣告 … 曝光的可能性 對外路徑 核心資訊 放入購物車 分享資訊給朋友 閱讀其他資訊 … 創造服務價值 服務的投資回報 時間:2014/01/16 講者:Ken
  18. 18. Minimum cost, Maximum ROI, Digital Consulting & Solutions 「核心資訊與路徑」為主的UI/UX開發 流程: • 定義核心資訊。 • 列出向內路徑。 • 列出向外路徑。 • 依照模型整合頁面全貌。 時間:2014/01/16 講者:Ken
  19. 19. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1 定義核心資訊 時間:2014/01/16 講者:Ken
  20. 20. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 2 3 買台單車 銷售單車 得到單車的資訊 得到使用者的資訊 進行比價 推廣品牌 1 商品 - 登山車。 24段變速。 TIPS : 運用模型進行開發規劃時,開發 團隊請務必要對核心資訊先進行 檢視與驗證。 4 TIPS : 為分辨在核心資訊內的資訊輕 重先後,建議同時為核心資訊 進行重要性排序。 規格、簡介。 5 6 價格、品名、商品分類、 放入購物車、 其他參考圖片、 加入喜好清單、 品牌識別與網站主視覺。 分享到社群。 時間:2014/01/16 講者:Ken
  21. 21. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 依核心資訊進行各種載具介面 的草圖設計。 時間:2014/01/16 講者:Ken
  22. 22. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 核心內容: 舒棉連帽外套-男(紅色) 使用者目的: 購買、比價。 網站業主目的: 銷售商品、留下會員資訊、品牌。 輔助資訊: 商品說明、規格、試穿照、尺寸表、 付款方式、建議售價。 核心元素: 品名、價格、數量、產品分類、 產品照、主視覺、網站品牌識別。 預期動作: 加入購物車、會員登入、訂閱電子報。 時間:2014/01/16 講者:Ken
  23. 23. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 核心內容: 2013頂級登山摺疊車… 使用者目的: 購買、比價。 網站業主目的: 銷售商品。 輔助資訊: 商品說明、規格(下拉選單)、 付款方式、分期方式、建議售價。 核心元素: 品名、價格、數量、產品分類、 產品照、主視覺、網站品牌識別。 預期動作: 加入購物車、加入追蹤清單、 買貴通報、故障通報。 時間:2014/01/16 講者:Ken
  24. 24. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 核心內容: 2013頂級登山摺疊車… 使用者目的: 購買、比價。 網站業主目的: 銷售商品。 輔助資訊: 規格(下拉選單)、付款方式、分期方式、建議售價。 核心元素: 品名、價格、數量、產品分類、產品照、主視覺、品牌識別。 預期動作: 加入購物車。 時間:2014/01/16 講者:Ken
  25. 25. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 核心內容: 影片。 使用者目的: 透過影片獲取資訊。 網站業主目的: 提高瀏覽量與黏著度、增加廣告收益。 核心元素: 影片名稱、上傳者資訊、主視覺、 網站品牌識別。 預期動作: 播放、訂閱、評價、加入喜好清單… 輔助資訊: 發佈時間、影片說明、瀏覽量… 時間:2014/01/16 講者:Ken
  26. 26. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1:定義核心資訊 核心內容: SONY 42型聯網LED液晶電視 使用者目的: 比價。 網站業主目的: 銷售商品(到店面購買)。 核心元素: 品名、價格、型號、產品分類、 產品照、主視覺、網站品牌識別。 預期動作: 讚、分享、到店面購買(不明確)。 輔助資訊: 商品規格。 時間:2014/01/16 講者:Ken
  27. 27. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1-tip:那些按鈕教我的事 放入購物車 時間:2014/01/16 講者:Ken
  28. 28. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-1-tip:那些註冊程序教我的事 時間:2014/01/16 講者:Ken
  29. 29. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-2 列出向內路徑 時間:2014/01/16 講者:Ken
  30. 30. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-2:列出向內路徑 買台單車 得到單車的資訊 單車名、變速、登山車、 得到使用者的資訊 進行比價 GOOGLE YAHOO BLOG 社群網站 網路媒體 外部網站 其他… 銷售單車 推廣品牌 商品 - 登山車。 24段變速。 規格、簡介。 預先規劃向內路徑的連結內容與關鍵字,提 升搜尋分享的資訊連結。幫助使用者快速找 到此頁面。 價格、品名、商品分類、 放入購物車、 品牌名、爬山、休閒、 其他參考圖片、 加入喜好清單、 變速… 品牌識別與網站主視覺。 分享到社群。 時間:2014/01/16 講者:Ken
  31. 31. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-2:列出向內路徑 時間:2014/01/16 講者:Ken
  32. 32. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-2:列出向內路徑 時間:2014/01/16 講者:Ken
  33. 33. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-3 列出向外路徑 時間:2014/01/16 講者:Ken
  34. 34. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-3:列出向外路徑 買台單車 銷售單車 得到單車的資訊 得到使用者的資訊 進行比價 推廣品牌 GOOGLE YAHOO 商品 - 登山車。 BLOG 24段變速。 社群網站 網路媒體 外部網站 建立完整的向外路徑,提高使用者停留在網站內進 其他… 規格、簡介。 行活動的時間,有助於提高網站經營者的設定目標 (購買、獲得使用者資訊等)。 購物車 結帳頁面 會員頁面 喜好清單 分享 列印 相關商品 相關分類 其他… 單車名、變速、登山車、 價格、品名、商品分類、 放入購物車、 品牌名、爬山、休閒、 其他參考圖片、 加入喜好清單、 變速… 品牌識別與網站主視覺。 分享到社群。 時間:2014/01/16 講者:Ken
  35. 35. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-3:列出向外路徑 時間:2014/01/16 講者:Ken
  36. 36. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-3:列出向外路徑 時間:2014/01/16 講者:Ken
  37. 37. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-3:列出向外路徑 時間:2014/01/16 講者:Ken
  38. 38. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-4 依照模型整合介面全貌 時間:2014/01/16 講者:Ken
  39. 39. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-4:依照模型整合介面全貌 目的:確保使用者可以最快到達核心內容頁面,並持續停留在介面上使用。 Homepage 搜尋引擎 部落格推薦 RSS或廣告 Category Landing page Landing page 時間:2014/01/16 講者:Ken
  40. 40. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-4:依照模型整合介面全貌 目的:確保使用者可以最快到達核心內容頁面,並持續停留在介面上使用。 時間:2014/01/16 講者:Ken
  41. 41. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-4:依照模型整合介面全貌 http://www.lativ.com.tw/Detail/10020032 時間:2014/01/16 講者:Ken
  42. 42. Minimum cost, Maximum ROI, Digital Consulting & Solutions STEP-4:依照模型整合介面全貌 http://www.youtube.com/watch?v=Qo6QNU8kHxI&hd=1 時間:2014/01/16 講者:Ken
  43. 43. Minimum cost, Maximum ROI, Digital Consulting & Solutions 補充 運用「核心資訊與路徑」做 UI/UX開發時該注意的事 時間:2014/01/16 講者:Ken
  44. 44. Minimum cost, Maximum ROI, Digital Consulting & Solutions 運用「核心資訊與路徑」開發該注意的事 • 如果你的服務/產品有多個面向,請為每個面向的核心資 訊都建立一個模型,再針對每個核心資訊重要性進行排序 與整合。 • 請記得在模型建立初期,透過使用者訪談與洞察,確認核 心資訊,以免產生認知差距。 時間:2014/01/16 講者:Ken
  45. 45. Minimum cost, Maximum ROI, Digital Consulting & Solutions 分享 如何跟你的UI/UX設計師溝通 時間:2014/01/16 講者:Ken
  46. 46. Minimum cost, Maximum ROI, Digital Consulting & Solutions 如何跟你的UI/UX設計師溝通 • 避免雞同鴨講。 • 不要太快進入設計細節。 • 同理心。 • 針對資訊與功能做設計,而不是為了美觀。 • 認同並學習跨界的工作經驗。 時間:2014/01/16 講者:Ken
  47. 47. Minimum cost, Maximum ROI, Digital Consulting & Solutions 聽了這麼多的概念, 最後,我們來個練習吧。 時間:2014/01/16 講者:Ken
  48. 48. Minimum cost, Maximum ROI, Digital Consulting & Solutions 實戰練習:用「核心資訊與路徑」模型敘述你目 前公司所提供的主要產品。 時間:10分鐘。 時間:2014/01/16 講者:Ken
  49. 49. Minimum cost, Maximum ROI, Digital Consulting & Solutions 謝謝各位 :-D 歡迎各位提問 蔡柏文 Ken Tsai ken@minmaxdc.com 時間:2014/01/16 講者:Ken

×