這篇文章主題為：Card Sorting（卡片分類法）與 Navigation（導航），內容承接之前所寫的文章，建議可以由第一篇開始閱讀，較能了解 UX 的全貌。
- UX 1: UX Design Process & User Research
- UX 2: Competitive Analysis & Persona
- UX 3: Define Problem & Ideating
- UX 4: Feature Prioritization
- UX 5: Sketching & Testing & Information Architecture
Card Sorting（卡片分類法）
之前已撰寫過與 sitemap（網站地圖）相關的文章，這篇將介紹 UX 領域常用於做 sitemap 的方法之一： Card Sorting。
Card Sorting 有兩種方式：open sort 和 closed sort。在 open sort 的的過程中，參與者會在卡片上創造分類，例如： About、Countries 等等。透過讓參與者自己創造類別（給參與者便利貼和麥克筆自己寫），也可知道他們是如何在心裡建構、命名這些類別及給予標籤等脈絡，進而找出大家都習慣使用的命名和分類輪廓。這是一個比較通用的方式，且對於後續產生點子和組織內容有很大的幫助。蠻推薦以下的影片，會更清楚這個概念是什麼。
第二種是 closed sort，與 open sort 相反，它是把事先都寫好類別的卡片讓測試者來分類，能夠判斷這些事先寫好的類別，夠不夠測試者來進行歸類。做測試時，最好寫好的卡片和便利貼都備妥，以防真的有需要創造新類別。另外，也可利用 Optimalsort 來做線上的 Card Sorting。
Tips
- 確保這些卡片的內容有足夠的關聯性可被 grouping（群組）
- 一張卡片上只能寫一個內容，在描述上精簡，掃一眼就知道是什麼
- 在整個過程中，我主要的工作就是保持安靜和觀察，不引導參與者做 grouping
- 過程中邊做筆記，任何有趣或是發現都不放過
三個 Card Sorting 可能會犯的小陷阱：
- 提供太多類別（cognitive load）、太多卡片、卡片字太長都會造成測試者的壓力，而產生負面情緒
- 不要使用過於可愛、有趣的標籤，務必以簡潔為要
- 使用行話、內部使用的語言或產業專屬的語言，可能會造成測試者困惑，應以能理解的內容較佳
對於 Card Sorting 做法和概念有大致的了解後，真正的用處在於：
- 驗證之前的 Information Architecture（資訊架構）
- 若目前沒有任何架構，則可以用 open sort 去找靈感
之後便可以用結果來畫出 sitemap
Navigation（導航）
不管是設計網站或是 app，理解用戶如何在裝置上閱讀內容是很重要的，很多人在設計網站時，以為大家是會乖乖地從上到下，左到右慢慢的看，但透過 eye tracking research（眼球追蹤研究）發現並不是這樣，反而類似 F 狀（F Pattern）來觀看網頁內容：
- 直接垂直掃描整個頁面
- 掃視第一段或第二段內容
- 再看一下標題或頁面下面的幾個字
來源：Google搜尋
使用不同裝置的用途不同（如電腦或手機），這些差異可作為用戶使用行為的參考，稱作 content hierarchy（內容階層）。其中又分成 Main、Supporting 和 Interface：
- Main content：主要內容是協助用戶做到 “最主要的目標”，以 airbnb 為例，即上面所推薦的房子
- Supporting content：次要則是幫助 engagement，就是一些其他輔助性內容，像是“你可能還喜歡”等推薦
- Interface content： 提供基礎的架構，像是點 Airbnb app 下方，有首頁、搜尋、訊息、旅行等欄位
來源：airbnb app screenshot
Navigation 是 Interface Content 裡面最重要的要素之一，因為好的 Navigation 能讓使用者花更多的時間在 app 上，直覺的 Navigation 通常會包含以下幾點：
- Stay consistent
- Use conversational copy（預想對話式問題）：就是進入某些網站，會跳出問題或幾個可以讓用戶選擇的項目，可協助導入到相關的頁面
來源：google search
- Avoid mystery meat：避免使用不直覺的 icon，大家可以看看下圖，裡面應該許多 icon 不知其意義吧，或是需要猜測。
來源：Pixabay
- Simplify design：使用大家熟悉的 layout 會比較好，google search 就是很經典的例子，簡單直白
- Keep depth in check：以不超過三層為原則，不然會太複雜
來源：behance
- Keep breadth in check：breadth 指的是看得見的選單，即 visible menu，當上述的 depth 太深時，可以透過增加橫向的 breadth。看下面的圖應該就可以懂 depth 和 breadth 的差別了
來源：Uxpamagazine
此外，其中一個 UX 的鐵律是 Miller’s Rule of Seven，即在短期的記憶內，一般人很難記住七件以上的項目。然而，如何呈現、排列和組合內容，卻是比項目的多少來得更重要。大致上，navigation 的呈現共有 6 種方式：
- Global： 每一頁的最上方都會有的，很像小地圖定位，讓你知道你現在在哪裡。如下圖紅色框起的那排，不管進入哪個頁面，都不會因此改變。它也被稱作 persistent navigation
來源：Pazzo
- Local： 會隨著現有頁面而改變的標籤，作用是顯示和當前網頁對使用者可能有幫助的內容，通常出現在 sidebar 或 global navigation 之下
來源：Pazzo
- Faceted： 把關鍵字搜尋成果，以小區塊的方式呈現，在瀏覽特定類別或是某些 e-commerce 網站時，特別管用。Amazon 幾乎每個頁面都可以看到 faceted navigation，也被稱為 filtered navigation
來源：Amazon
- Contextual： 通常是用於呈現新資訊或是探索網站的好方式，也稱 associated navigation。通常以 pop up window 跳出來，或是在一個網站旁邊的 box 中，像下面紅框就是放置讀者可能也會有興趣的內容
來源：BuzzFeed
- Inline： 是 content navigation 的一種，但連結是放置於網站的 site body copy，通常在部落格和新聞網站中最常見。大家對女人迷這個網站應該都不陌生，每篇文章裡面都會有很多可以點擊並連去其他文章的連結。
來源：女人迷
- Supplemental： 輔助性質的，包含 sitemap、 index、 search 和 guide 等 …
原文連結：
- UX 1: UX Design Process & User Research
- UX 2: Competitive Analysis & Persona
- UX 3: Define Problem & Ideating
- UX 4: Feature Prioritization
- UX 5: Sketching & Testing & Information Architecture
本文章已獲得作者 Ian Weng 授權，原文：UX 6: Card Sorting & Navigation，出處： IANWENG9。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
