User Experience (UX)

2022/02/23 (更新投影片)

簡介

使用者經驗 (User eXperience, UX)簡單的講就是在設計系統時將使用者的經驗歷程考慮進去，從如何輸入資料一直到如何展現資訊都要以使用者為中心去設計。

• 使用者經驗設計 (吳濟聰老師碩士在職專班教材)

使用者經驗不代表只是資訊系統的使用介面，舉個例子，曾經有個超市導入新的結帳系統，也把所有的商品都貼上了條碼，他們遇到了一個小問題，很多產品沒辦法貼條碼，例如，螺絲釘通常是裝在盒子裡，因為消費者通常只需要一到兩支螺絲釘，但是，又不可能在螺絲釘上貼條碼，所以，他們想出來的解決方法是在螺絲釘盒旁邊放一些印好的條碼，希望使用者拿了螺絲釘會順便拿條碼，結果，幾乎沒有使用者會順手拿螺絲釘旁的條碼，就算拿，也常拿到錯的條碼，所以，櫃台在結帳的時候常常有問題，造成消費者很大的困擾，紛紛投訴，要求停止使用新的結帳系統。後來，他們想到一個方法，就是在收銀機旁放一本本子，把所有沒辦法貼條碼的物品分類、拍照，並附上條碼，櫃台就用這樣的方式刷條碼，這樣的設計成功的解決這個問題。從這個案例裡，告訴我們系統的使用者經驗不只是資訊系統的使用介面，而是整個購買的過程。

當然，使用者經驗跟使用者介面很有關係，我曾經犯過一個錯誤，我花了很多時間設計了一個系統，使用者原本是希望文字輸入直接輸入產品編號，我覺得這樣的需求很糟，還要去檢查輸入的產品編號是否正確，我就認為應該提供一個下拉式選單，讓使用者可以點選產品，我覺得這才不會讓使用者選錯產品。可是，我引以為豪的改變卻被使用者打回票。因為這個公司的產品編號是每個客戶儲存在該公司的物品編號，而每個客戶儲存上千上萬個物品，這樣的設計要讓使用者拉很久才能找到編號，而我在測試時，每個客戶只有十筆資料，完全不會覺得有問題，可是，當套用在真實資料時，就馬上發現問題了。這也是很多同學常常會忽略的問題，一個開發者自認為好的設計卻有可能是完全不符合(或沒考慮)使用者經驗的設計。

使用者經驗不只是想辦法讓系統很炫，我們曾經為了讓系統的展現活潑化，設計了一個介面，各個學類是一個錢幣，會依照學生的適合程度掉到不同的位置，而且會有錢幣掉下來的音效，我們花了很多時間設計，完成後很興奮奮，後來測試時發現一大堆問題，首先是遇到不同螢幕尺寸畫面會亂掉，後來我們就固定畫面的尺寸在大多數螢幕可以呈現的範圍，後來又發現只要學生調整字體大小，整個畫面就會亂掉，後來又遇到瀏覽器相容的問題，最後，決定忍痛拿掉這個我們覺得很炫的畫面，回歸到最簡單的設計，利用簡單的表格顯示學類的適合程度。

另外一個經典的失敗設計是: 在問卷的最後一步，是要學生從六個候選清單中依序選擇三個選項。學生會先看到三個預設的選項，但可以利用往左往右去換選項，換了第一名的選項，在第二名的候選清單中就會把剛剛第一名的選項去掉，同樣的選完第二名的選項後，在第三名的候選清單中就會把剛剛第一名及第二名的選項去掉，我們認為這是很棒的設計。但是，當系統上線之後，發現怎麼所有學生的選項都一樣，經過訪談才發現，因為學生在前面幾個步驟回答了很多問題，絕大部分的學生都以為最後這一步是系統根據前面的問題提供的建議，而不去換選項。就算加了解釋，多數學生還是不會去換選項，最後只好忍痛改回最簡單的設計，給學生六個選項，沒有預設答案，並要求依序選擇三個選項。

UX的主要階段/領域:

• UX Strategy

  • 強調UX的公司會從企業關心的角度(企業策略)去思考公司目前(或未來要提供)的產品或服務如何增進使用者的經驗，也就是是否能解決使用者的痛點、或者滿足使用者更多的價值

• UX Research

  • 強調UX的公司會花很多時間去進行研究以便更了解使用者，了解使用者的時候，要注意是否真的了解使用者的需求，還是只是看到自己想看到的

    • 研究的方式

      • 透過質化的方式，透過觀察、訪談了解使用者的需求

      • 利用量化的方式，透過行為資料 (點擊率、點擊路徑)或問卷調查去了解使用者的需求

      • 可以先透過質化方式探索需求，再透過量化方式去確認使用者的需求

      • 也可以先透過量化方式去發現使用者的行為，再利用質化方式去了解行為背後的情境

  • 可以透過Design Thinking常用的Persona (使用者的背景)、Empathy Map (深入了解使用者)、Customer Journey Map (使用者的歷程 / 使用者與系統的互動)描述使用者

• UX Design

  • 根據對使用者的了解去設計解決方案，如同前面的幾個例子，要從使用者的觀點去設計，而不是從開發者的立場去思考

  • 透過User Story描述功能需求，也可以透過Design Thinking常用的User Flows或Service Blueprint

  • 透過Wireframe、Prototype設計介面，也利用Wireframe、Prototype去確認使用者的需求

延伸閱讀

• UI vs UX

  • Why UX and UI should remain separate

  • UI & UX 差別是什麼，看圖大整理

• 使用者經驗設計 (吳濟聰老師領科學程使用者經驗設計課程教材)

• 使用者經驗設計 (吳濟聰老師碩士在職專班使用者經驗設計課程教材)

• User Experience (wikipedia)

  • User experience design (wikipedia)

• UX 入門指南

• 談完美使用者經驗的重要條件

  • 條件一：可用性

  • 條件二：便利性

  • 條件三：易尋性

  • 條件四：實用性

  • 條件五：嚮往性

  • 條件六：可靠性

• The five areas of UX

  • Usability

  • Utility

  • Functional Integrity

  • Visual Design

  • Persuasiveness