UX 6: Card Sorting & Navigation

這篇文章主題為:Card Sorting(卡片分類法)與 Navigation(導航),內容承接之前所寫的文章,建議可以由第一篇開始閱讀,較能了解 UX 的全貌。

 

Card Sorting(卡片分類法)

之前已撰寫過與 sitemap(網站地圖)相關的文章,這篇將介紹 UX 領域常用於做 sitemap 的方法之一: Card Sorting。

Card Sorting 有兩種方式:open sortclosed sort。在 open sort 的的過程中,參與者會在卡片上創造分類,例如: About、Countries 等等。透過讓參與者自己創造類別(給參與者便利貼和麥克筆自己寫),也可知道他們是如何在心裡建構、命名這些類別及給予標籤等脈絡,進而找出大家都習慣使用的命名和分類輪廓。這是一個比較通用的方式,且對於後續產生點子和組織內容有很大的幫助。蠻推薦以下的影片,會更清楚這個概念是什麼。

 

第二種是 closed sort,與 open sort 相反,它是把事先都寫好類別的卡片讓測試者來分類,能夠判斷這些事先寫好的類別,夠不夠測試者來進行歸類。做測試時,最好寫好的卡片和便利貼都備妥,以防真的有需要創造新類別。另外,也可利用 Optimalsort 來做線上的 Card Sorting。

UX Card Sorting

 

Tips

  1. 確保這些卡片的內容有足夠的關聯性可被 grouping(群組)
  2. 一張卡片上只能寫一個內容,在描述上精簡,掃一眼就知道是什麼
  3. 在整個過程中,我主要的工作就是保持安靜和觀察,不引導參與者做 grouping
  4. 過程中邊做筆記,任何有趣或是發現都不放過

 

三個 Card Sorting 可能會犯的小陷阱:

  1. 提供太多類別(cognitive load)、太多卡片、卡片字太長都會造成測試者的壓力,而產生負面情緒
  2. 不要使用過於可愛、有趣的標籤,務必以簡潔為要
  3. 使用行話、內部使用的語言或產業專屬的語言,可能會造成測試者困惑,應以能理解的內容較佳

 

對於 Card Sorting 做法和概念有大致的了解後,真正的用處在於:

  1. 驗證之前的 Information Architecture(資訊架構)
  2. 若目前沒有任何架構,則可以用 open sort 去找靈感

 

之後便可以用結果來畫出 sitemap

 

Navigation(導航)

不管是設計網站或是 app,理解用戶如何在裝置上閱讀內容是很重要的,很多人在設計網站時,以為大家是會乖乖地從上到下,左到右慢慢的看,但透過 eye tracking research(眼球追蹤研究)發現並不是這樣,反而類似 F 狀(F Pattern)來觀看網頁內容:

  1. 直接垂直掃描整個頁面
  2. 掃視第一段或第二段內容
  3. 再看一下標題或頁面下面的幾個字

heatmap f shape reading

來源:Google搜尋

 

使用不同裝置的用途不同(如電腦或手機),這些差異可作為用戶使用行為的參考,稱作 content hierarchy(內容階層)。其中又分成 Main、Supporting 和 Interface:

  1. Main content:主要內容是協助用戶做到 “最主要的目標”,以 airbnb 為例,即上面所推薦的房子
  2. Supporting content:次要則是幫助 engagement,就是一些其他輔助性內容,像是“你可能還喜歡”等推薦
  3. Interface content: 提供基礎的架構,像是點 Airbnb app 下方,有首頁、搜尋、訊息、旅行等欄位

airbnb app Navigation UI

來源:airbnb app screenshot

 

Navigation 是 Interface Content 裡面最重要的要素之一,因為好的 Navigation 能讓使用者花更多的時間在 app 上,直覺的 Navigation 通常會包含以下幾點:

  • Stay consistent
  • Use conversational copy(預想對話式問題):就是進入某些網站,會跳出問題或幾個可以讓用戶選擇的項目,可協助導入到相關的頁面

conversational copy

來源:google search

 

  • Avoid mystery meat:避免使用不直覺的 icon,大家可以看看下圖,裡面應該許多 icon 不知其意義吧,或是需要猜測。

icons

來源:Pixabay

 

  • Simplify design:使用大家熟悉的 layout 會比較好,google search 就是很經典的例子,簡單直白
  • Keep depth in check:以不超過三層為原則,不然會太複雜

Navigation model

來源:behance

 

  • Keep breadth in check:breadth 指的是看得見的選單,即 visible menu,當上述的 depth 太深時,可以透過增加橫向的 breadth。看下面的圖應該就可以懂 depth 和 breadth 的差別了

Keep breadth in check

來源:Uxpamagazine

 

此外,其中一個 UX 的鐵律是 Miller’s Rule of Seven,即在短期的記憶內,一般人很難記住七件以上的項目。然而,如何呈現、排列和組合內容,卻是比項目的多少來得更重要。大致上,navigation 的呈現共有 6 種方式:

  • Global: 每一頁的最上方都會有的,很像小地圖定位,讓你知道你現在在哪裡。如下圖紅色框起的那排,不管進入哪個頁面,都不會因此改變。它也被稱作 persistent navigation

Pazzo

來源:Pazzo

 

  • Local: 會隨著現有頁面而改變的標籤,作用是顯示和當前網頁對使用者可能有幫助的內容,通常出現在 sidebar 或 global navigation 之下

Pazzo

來源:Pazzo

 

  • Faceted: 把關鍵字搜尋成果,以小區塊的方式呈現,在瀏覽特定類別或是某些 e-commerce 網站時,特別管用。Amazon 幾乎每個頁面都可以看到 faceted navigation,也被稱為 filtered navigation

Amazon

來源:Amazon

 

  • Contextual: 通常是用於呈現新資訊或是探索網站的好方式,也稱 associated navigation。通常以 pop up window 跳出來,或是在一個網站旁邊的 box 中,像下面紅框就是放置讀者可能也會有興趣的內容

BuzzFeed

來源:BuzzFeed

 

  • Inline: 是 content navigation 的一種,但連結是放置於網站的 site body copy,通常在部落格和新聞網站中最常見。大家對女人迷這個網站應該都不陌生,每篇文章裡面都會有很多可以點擊並連去其他文章的連結。

女人迷

來源:女人迷

 

  • Supplemental: 輔助性質的,包含 sitemap、 index、 search 和 guide 等 …

 

 

原文連結:

 

本文章已獲得作者 Ian Weng 授權,原文:UX 6: Card Sorting & Navigation,出處: IANWENG9

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter