最近開始對UX有興趣，於是就找了coursera 上面的 UX 課程來學習 :D
一開始沒用過這個網站，花了點時間研究網頁功能和上課規則，過程中發現蠻有趣的一些點，像是網站上方導覽列極簡到幾乎沒有東西，還有明明有付費課程，卻沒有太多行銷廣告等等。決定以這個網站作為第一次 UX 分析的練習，文章有三個區塊：
由於一開始是對 Coursera 極簡風的導航感到新奇，所以決定聚焦 Navigation 的 UX 觀察，但也會提到 UI 層面。
首頁上方橫幅沒有直接推播課程，要捲到下面才看的到熱門課程輪播 (carousel)
登入後的首頁變成功能 panel，畫面依然簡潔，甚至連課程推薦都要自己點到 "Recommendations" 才看的到，第一次點 “Recommendations” 進去網頁會請使用者選擇有興趣的類別，他會推薦相關課程
這裡還蠻疑惑怎麼沒把課程推薦放在畫面底部，感覺有意營造一種非營利、學術性的風格。
課程介紹簡單好懂，但免費課程（左圖）沒有標註 Free，付費課程（右圖）也沒有標註價格
這裡忍不住要吐槽，第一次點進課程看到左邊畫面，會不敢點選參加，怕一不小心就買了課程 XD 後來才發現付費課程，會像右圖用 Try for Free 標示，真的相當隱晦的作法。
覺得在文案部分可以再改善，譬如 Enroll for Free 之類的，不太明白 Coursera 的考量是甚麼？目前不清楚他的課程付費機制，定價機制等等，可以當作下次的研究題材。
跟 Udemy 比較，兩者取向相當兩極化。Udemy 極盡商業化，廣告多，標價清楚且是浮動價格，會進行促銷。Coursera 課程偏向學校教授的學術研討，而 Udemy 偏向業界技能實戰。
課程介紹 (Enroll 後)會著重在目前上課進度，而非課程內容
以上是這次討論涵蓋的 Coursera 主要功能頁面。
接下來要導入 Navigation UX 原則來分析這次的案例，來源為 <Is Navigation Useful?> — Jakob Nielsen。
如果想直接看網站與原則的分析，可跳過這個區塊，先看第三段文章。
Jakob 首先提出八點使用者的行為（附上 Google 中文翻譯）：
A1. users comment on the content first; if the content is not relevant, then they don’t care about any other aspect of the design
用戶首先評論內容; 如果內容不相關，那麼他們不關心設計的任何其他方面
A2. when they arrive on a page, users ignore navigation bars and other global design elements: instead they look only at the content area of the page
當他們到達一個頁面時，用戶會忽略導航欄和其他全局設計元素：相反，他們只查看頁面的內容區域
A3. users don’t understand where they are in a website’s information architecture
用戶不明白他們在網站的信息架構中的位置
A4. users are extremely goal-driven and look only for the one thing they have in mind — they don’t spend much time on promotions for anything else
用戶是極其目標驅動的，並且只考慮他們想到的一件事 — 他們不會花太多時間在其他任何促銷活動上
A5. in pursuit of their goal, users often rely on search as their main hunting strategy
為了追求自己的目標，用戶經常依靠搜索作為他們的主要狩獵策略
A6. users rarely look at logos, mission statements, slogans, or any other elements they consider fluff (in particular, they ignore advertising and anything that looks like an ad)
用戶很少看標識，使命宣言，標語或他們認為絨毛的任何其他元素（特別是，他們忽略廣告和任何看起來像廣告的東西）
A7. if a page does not appear relevant to the user’s current goals, then the user will ruthlessly click the Back button after two to three seconds
如果一個頁面與用戶的當前目標不相關，那麼用戶將在兩到三秒後無情地點擊後退按鈕
A8. if users don’t understand a certain design element, they don’t spend time learning it — instead, they ignore it and continue the hunt for their own goal
如果用戶不理解某個設計元素，他們不會花時間學習它 — 相反，他們忽略它並繼續尋找自己的目標
再來 Jakob 提出了設計原則（僅節錄部分）：
Generic Links
B1. Restrict linking to basic features (say, search, copyright, and a few more), the home page, and the main page for the current section.
縮減鏈接到剩下基本功能（如搜索，版權等），主頁和當前部分的主頁面。
B2. Less is more : having a small number of standard links on every page makes it more likely that users will notice those links they do need.
少即是多 ：每個頁面上都有少量的標準鏈接，使用戶更有可能注意到他們需要的鏈接。
Structural Navigation
B3. Do not link to all sections of the site from all pages. What is the probability that a user will go from looking at hairdryers to looking at grunge music? … Why not just go back to the home page …
不要鏈接到所有頁面的網站的所有部分。用戶從看吹風機看看垃圾音樂的可能性有多大？（筆者註：子頁面幾乎不會有互相連結的需要）… 為什麼不回到主頁
B4. … provide links to all levels of the hierarchy above the current location. … Without structural links, pages become orphans that are not contextualized. And since users often arrive at pages through search or other means that bypass the higher-level navigation pages, it is necessary to provide a path back to these higher levels.
提供指向當前位置上方所有級別的鏈接。… 沒有結構鏈接，頁面就會變成沒有語境化的孤兒 。而且，由於用戶通常通過搜索或其他方式繞過較高級別的導航頁面到達頁面，因此有必要提供返回到這些更高級別的路徑。
Local Navigation
B5. Local links to related content are also very useful.
與相關內容的本地鏈接也非常有用。
Structure Can Help
B6. Most sites have miserable information architectures that mirror the way the company internally thinks about the content and not the way users think about the content.
大多數網站都有悲慘的信息架構 ，這些架構反映了公司內部對內容的看法，而不是用戶對內容的看法。（沒人願意看的網站導覽）
B7. Users are so impatient on the Web that they don’t take time to learn about any individual website and its structure — instead, they proceed to the next site.
用戶對Web非常沒耐心，以至於他們沒有時間了解任何單獨的網站及其結構 — 而是轉向下一個網站。
以下會針對 Coursera 主要頁面，列出頁面上的元素對應哪項設計原則，並作詳述。
登入後的首頁
A1：用戶首先關注的是內容是否符合需求，Coursera 主打教學課程，便在主頁面放置目前使用者正在進行的課程，符合使用者需求。
A5：使用者尋找想要的課程，會依靠上方搜索列，而非被動接受推銷。
A6：Coursera 盡可能減少廣告，要點選 “Recommendations“ 才能看到推薦的項目，如此可增進使用者體驗，不會讓使用者被廣告轟炸。
這邊值得一提的是，Coursera 沒廣告策略和 Jakob 提出的原則吻合，卻和 Udemy 的商業策略相反，並不能說 Udemy 設計不佳，而是情境取向不同。
Coursera 的情境讓使用者主動去搜索想要的課程，網站並不會去 push 使用者做決定；Udemy 則是給予沒有特定想法、只是想瀏覽課程 window shopping 的使用者一些多元的選擇，還可以看到現在熱門的課程項目。
由此推論 Jakob 的原則，比較適用在主動閱覽資訊項目的資訊網站設計，而非電商類型的網站。
A2：使用者關注的是頁面內容，不會第一時間研究課程網站架構那些。（我這種刻意要研究的除外）。極簡化導覽列可以避免使用者分心，直接聚焦在畫面主要內容，也就是課程列表上面。
B2：同上，畫面中可點選的連結就是右上方功能表，中間的上課中清單，還有左邊的課程相關導覽，減少使用者操作網站的壓力。
A8：這個設計元素不算新，漢堡和三個點都有 ”更多功能” 的意思在裡面。但我在使用的時候，完全沒注意到有三個點可以點選，而且還是 “課程退訂/改期功能” 這種大功能。
我認為這是 UI 編排上的問題，在這個卡片清單，視覺焦點會在左方的課程內容，與右方的進入課程按鈕。如果有更多功能，其實擺在 “Go to Course” 按鈕右側也許會更明顯，而且空間也夠大。
B6：這些連結們應該就是 Jakob 提到的 “這些架構反映了公司內部對內容的看法，而不是用戶對內容的看法” 。我想 Coursera 在極簡的導覽上，卻保留了完整的網站結構連結，不把他從畫面隱藏掉，是為了更完整的功能。
一般使用不需要捲到下方，只有操作遇到困難，或是對課程付費方式想要更深入的了解，才會去從網站導覽找尋答案。這應該是折衷的做法，與其讓大家找想要的連結在哪裡，還不如全部攤開一目了然。
課程頁面
這有兩個好處，一個是瀏覽課程中，使用者能比較相同類型的課程，找到更合適的項目；一個是教育使用者知道這個分類層級，如此一來下次想找 UX 課程，可以往設計跟產品方面搜索，能找到更多結果。
小反思：有些課程若是跨領域、屬於兩種類別，則麵包屑就會難以呈現。須謹慎使用。
這次研究網站，最大的收穫是去發掘一些習慣的網站元素，原來背後都有深意。而 Jakob 的文章末尾也讓我驚豔… 他提到
“And I predict that Internet Explorer version 8.0 will be the first good Web browser that actually helps users navigate.”
這篇文章，居然是 2000 年寫的 @@
我不太清楚那個年代，瀏覽器跟網站導覽之間的關係，但這作者研究的成果與整理出來的原則，竟在過了18年後的現在，依然經的起考驗，不禁敬佩萬分。跟大家分享自己的小心得，若有任何批評或討論歡迎留言！
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.
評論