普通文組 2.5

如何讓你的網站對使用者友善,或是如何不要讓使用者感覺像是被你的網站拷問

總結

可以透過以下三個面向來檢查「網站是否對使用者來說足夠友善」(或判斷你的網站是否為最上乘的拷問工具):

  • 文字:讓所有人都能輕鬆地看
  • 圖片:所有的圖像都要與內容有關,所有的圖示都應該搭配標籤一起出現
  • 設計:無聊永遠勝於驚嚇

這世上有很多能有效率地帶給人痛苦的道具

UX 不佳的網站確實能算一種拷問工具吧(出處:《地。-關於地球的運動-》單行本第一集)

筆記

關於文字

如何讓文字好看:

  • 保留足夠的行距,不要讓文字擠在一起
  • 確保文字的尺寸夠大,不要小到看不清楚
  • 一行句子不要太長(可以以 ch 為單位來設定元件寬度)
  • 確認文字與背景的對比度夠強烈,尤其要注意以圖片為背景的文字是否會有對比度不足的狀況(可以用 text contrast checker 搜尋檢查工具)

如何讓內容好讀:

  • 主動幫使用者強調(bold/highlight)重點內容
  • 使用列點(bullet point)呈現內容
  • 使用簡短、直觀的文字來描述內容(更多說明可搜尋關鍵字 the first 2 words rule)

關於圖片

  • 不要因為「不知道這裡可以放什麼」就插入圖像,所有的圖像都應該跟產品的內容有關
  • 使用圖示(icon)時一定要搭配標籤,因為圖示能被解讀的方式太多了(太主觀了);比如在 Google Fonts 搜尋 sharecopy 這兩個關鍵字都會找到多組圖示,搜尋結果中也確實有多張圖示可以讓人聯想到 share/copy 的意圖

關於設計

  • 盡量使用現成、使用者已經熟悉的模式;可以用「部位 template/example」來搜尋,比如以 pricing template 來找價目表的常見設計樣式
  • 設計要連貫;比如整個網站的按鈕、超連結應該使用一致的樣式
  • 為了避免做錯事,使用者會傾向選擇「不做任何事」,所以要讓產品的操作結果符合期待,而非製造驚嚇(make design predictable, boring is better than confusing)

參考文件

收集各類設計模板的資源: