聯成電腦網頁設計分享：如何讓冗長頁面「更好用」 — SEO、SEM
文、Jasmine Lin
初步了解 SEO 與 SEM 後，身為產品設計師所蒐集的網頁互動設計守則與範例。
作者簡介｜Jasmine
現居美國西雅圖的使用者經驗（UX）設計師，藉著對資訊、心理與行為科學的熱情一頭栽進產品設計領域。經由閱讀與旅行認識這個世界，透過寫作更認識自己。喜歡有點重量的紙本書、週末早晨的回籠覺和巴哥犬女兒烏龍。
前陣子手上專案的一項任務是重新設計他們的「SEO 頁面」與「SEM 頁面」。不看還好，一看嚇死人，頁面上只有滿滿的文字，篇幅長到我高速捲動了老半天還看不見底。
身為設計師的本能就是 刪東西！將一切簡化到只提供使用者所需的資訊量。見到落落長的頁面，我只想去蕪存菁，刪掉廣告、刪掉重複的內容、刪掉滿滿的連結，再將內容切割成數篇文章，而不是全塞在單一頁面。
前主管曾跟我說，SEO 的重點就是玩文字遊戲，互動設計並不是網頁設計的核心，行銷才是，畢竟重點在於流量與點擊，產品設計師能施展手腳的地方並不多。
因此，我對於 SEO/SEM 的了解也就僅止於「內容為王」、「廣告投放」等關鍵字，在接到修改 SEO/SEM 頁面的任務時立刻冒出一堆問題：
SEO 跟 SEM 有什麼不一樣？為什麼 SEO 頁面一定要那麼長？
為了找出 SEO/SEM 頁面背後的原理，我開始研究兩者之間的差別，並且試圖找出設計這些網頁時的最佳典範（best practices）與守則。我相信一定有方法達到 SEO/SEM 的目的，同時讓使用者在瀏覽網頁時擁有優質的體驗。
我並不是行銷人，行銷圈的專家們對於網路內容行銷一定有更多高明的見解，本文的目的是以設計師的觀點研究網頁設計與行銷守則的甜蜜點。
Photo byHalGatewood
SEO、SEM 傻傻分不清楚
搜尋引擎行銷（Search Engine Marketing, SEM）
SEM 的最終目的是經由付費廣告推銷網站以增加曝光率，所以 SEM 頁面的本體就是大家最不喜歡的廣告們，一旦停止付費投放，效果就會立刻消失。
最常見的執行管道是Google Ads，其中包含多種工具例如：
Search Ads
搜尋結果有「廣告」二字，那些浮在最上面的網頁
Google Display Network
可以想成部落格的邊欄廣告，它會根據使用者瀏覽的網頁內容投放相關廣告（例如：你在讀設計相關的文章，邊欄廣告可能會投放 Sketch 優惠價格）
Video Ads
就是最近越來越猖獗的 Youtube 廣告
由於 SEM 有清楚的投放目標，以及可量化的成效，自然而然衍伸出像是 SERP（SERP, Search Engine Results Pages，搜尋引擎結果頁）、PPC（Pay Per Click，單次點擊付費）以及 PFI（Pay For Inclusion，涵蓋付費）等專有名詞，方便行銷人員或 PM 追蹤廣告投放成果。
搜尋引擎最佳化（Search Engine Optimization, SEO）
SEO 的最終目的是透過自然排序以提升網頁的能見度，聽起來跟 SEM 好像沒兩樣，但重點來了 SEO 是免費的！
但聰明的你應該猜得到，天底下沒有白吃的午餐，「免費」自然是有代價的。
要做到真正成功的 SEO，內容行銷人員和工程師需要熟悉搜尋引擎演算法的運作方式，照著它的遊戲規則玩以獲得更高的排名，並且持之以恆，這也是為甚麼每當 Facebook 或 Google 演算法一更新，小編們就會集體崩潰。
SEO 最佳化的方式可以粗略分成兩大類：
1. 技術導向
使用者看不到的努力，例如寫命名與階層明確的程式碼，或是埋關鍵字在 URL 裡頭等
2. 內容導向
也就是最近很紅的內容行銷，著重於提供使用者豐富的資訊，建立聲望並產生黏著度
研究之後發現，SEM 與 SEO 並行才是最有效的成長方式。當你的品牌或產品仍默默無名的時候，運用 SEM 頁面吸引新用戶的目光，讓大家有機會認識你、知道你的存在；再運用 SEO 讓這些用戶更容易留下來，並在想到相關主題時會立刻想到你，以增加長期的曝光率。
SEO 與 SEM的異同
至於 SEO 頁面為什麼要那麼長，事實上只要內容符合使用者的需求，永不終止的文字其實是好的，與其讓使用者不斷在多個頁面上跳轉，不如讓他們知道他們所需要的資訊全都在此頁。
對於企業而言，網頁的留存率和轉換率是最重要的，這些數字背後意味著 $$$。然而站在使用者的角度，豐富有用的資訊、瀏覽流暢不會卡住、視覺享受等才是重點。
站在企業需求與使用者經驗的交叉口，並理解 SEO 的邏輯後，（勉強地）接受了 SEO 頁面勢必會落落長的前提，我開始到處蒐集能協助冗長頁面成立的網頁互動設計範例。
導覽 Navigation
導覽列 NavBar
像是網站的路標，網站越複雜的話導覽的存在就越重要，理想的導覽應該是清楚明瞭並且永遠可觸及的，避免讓使用者感到無處可去而離開網站。新穎的網站設計傾向於回收再利用導覽列的空間，在使用者捲動頁面時讓導覽列像百變怪一樣改變造型與用途。
一、黏著
「既然要永遠可觸及，那直接把它永遠黏在原本位置上就好了吧！」這大概是最簡單直覺的解法。
Evernote Blog
二、隱藏
比黏著再進階一點的解法，根據使用者滑動的方向決定是否顯示導覽列，預先假設使用者往上滑動很大機會是想 navigate 到其它頁面。
Spotify Newsroom
三、進度條
開始重新利用導覽列的空間，輔助使用者追蹤閱讀進度。需要導覽列時並不需要知道進度，故兩者可以在相同位置進行切換。
Dropbox Work In Progress 我最喜歡的網頁設計之一
四、文章名稱
在一個網站上讀太多內容之後，往往會忘記自己正在讀的是哪篇文章。閱讀時保有文章名稱的能見度能輔助使用者了解自己身在何處，並且加強對此文章主題的印象。
AIGA
單頁目錄 Table ofContent
像是迷你版的導覽列，在單一頁面的長度破表時使用，讓使用者方便在感興趣的章節之間跳轉，而不是無止盡的捲動頁面。
一、黏著
跟黏著的導覽列一樣，這是最簡單明瞭的方式，讓使用者在閱讀時永遠觸及得到目錄。
Uber Design
二、回到頂部
如果將目錄放在頁面最上方的話，黏著的回到頂部按鈕就能帶使用者自由跳躍於不同段落之間。
Resume Genius
三、偽導覽
長得像是黏著的 hamburger menu，利用使用者普遍慣用的導覽方式介紹頁面目錄。
Uber Design 近期最值得一看的網頁設計
微互動 Microinteraction
輪播 Carousel
當有多個同質資訊需要展示時，為了避免無限重複的內容，不如將他們組在一起，善用輪播的方式輪流使用一個空間。
一、圖片輪播
Nike
二、橫向輪播
Squarespace
三、無格線按鈕
Careof
Hover
一、顯示 CTA
預設 hover 代表想要進一步動作，到時候再出現 CTA 即可，避免讓使用者看到無數個重複的 CTA 在頁面上，從而造成視覺噪音。
Squarespace
二、顯示其他內容
當單一物件有多種形式時，避免一次將全部重點都放在同張圖，反而在 hover 時才將次要重點顯現出來，充分利用空間。
WIX 這裡的例子是響應式設計，hover 時顯示行動版網頁的模樣
三、鼠標變換
這是我最喜歡的 hover 設計，鼠標本身的用意單純是指向。當鼠標在 hover 到不同物件上時轉化成即將執行的動作，提供使用者比鼠標多一層意義，資訊量倍增！
Dropbox Work In Progress Again, 我超愛這網站
四、顯示影像
很新穎的做法，跟一般網頁 default 顯示圖片然後 hover 才顯示文字完全相反。讓我想起主管曾說過他很不喜歡一般網頁的設計，因為他 hover 過去就是因為對那張圖有興趣、想看得更仔細，圖片卻被蓋住或是直接消失，很不合理。
Liz Wells
單頁內容 On PageSEO
除了互動設計之外，單一頁面的內容呈現方式是體驗的核心，優質的導覽與微互動都是為了讓使用者更能夠沈浸在瀏覽內容的心流。
一、純文字
並不是所有文案都需要多媒體影像輔助才是「好內容」，有效運用文字本身建立視覺階級，就算只有純文字也能讓使用者閱讀起來很舒服。
Mailchimp Resources
二、引用文字
適時引用文字也能讓文案產生躍動感，讓讀字讀到有點倦了的使用者感到些許新意，重新投入閱讀體驗中。
Nike News
三、影像
現今常見的手法，熟悉網路媒體的受眾偏好吸收影像，如果在文字之間輔以圖像或影片能讓使用者更容易投入文案中。
REI ExpertAdvice
四、資訊圖表
當文案內容牽涉到需要比較獲釋龐大的資訊量，運用資訊圖表能夠協助使用者快速、直覺地吸收內容，同時也少去文案人員書寫幾個大段落的力氣。
Mail
五、綜合
上述幾個元素彼此不相衝突，設計師或行銷人員能混搭使用文字、影像、資訊圖表等讓單一頁面充滿驚喜。
Uber Design
結語
在蒐集這麼多例子之後，雖然仍覺得身為產品設計師能做得有限，但還是能提供幾個讓網頁更親近使用者的原則：
讓使用者清楚理解自己身在何處，不會迷失方向感。
導覽列永遠可觸及，需要使用者滑半天回到頂部才能導覽的網頁最糟了。
對於冗長的頁面，隨時可觸及的目錄表尤其重要，讓使用者能輕易在頁面各章節跳轉。
建立明顯的單頁視覺階層，創造閱讀律動感，以保持使用者的投入程度。
這次研究讓我更確定原先的理念 擁有好的 SEO 並不代表要犧牲設計美感，就算在創業初期沒有影像或資訊圖表等吸睛的素材，也可以藉著文字本身的韻律感提供使用者流暢的閱讀體驗。
文章轉載自「Medium」，已取得作者授權同意，原文為：如何讓冗長頁面「更好用」 SEO、SEM與網頁設計
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
