網頁設計中頁腳 Footer 的設計觀念
頁腳 (FOOTER) 除了是用戶尋找資訊的地方，也是版權宣告及重要連結的區塊，但卻經常在網站設計中時遭到忽略
在之前的文章中，我分享了導航菜單 (Navigation menu) 的應用，說明了他的使用情境和範例，那麼這次就來分享相對於 Navigation menu，頁尾(Footer) 的常見用途以及範例
本文會跟大家介紹：
還沒看過我之前的文章的人，可以先了解 Navigation Menu 的應用：
Navigation Menu的大學問：那些你沒注意到的小細節#像極了愛情還記得在我轉職為 UIUX 設計師後的某天，有位工程師曾經這樣問我：
為什麼網站上有 Footer？Footer 可以拿來幹嘛？他只是一個能放網站連結的元素罷了，好像沒有說很重要
當時我聽完 OS 心裡想：對耶！我從來沒仔細想過這個問題，Footer 感覺就是網站的資料簡介跟站內連結，其他的好像真的不重要…
但身為設計師的我，還是給了一個回答：
「嗯…因為 Footer 通常有公司的聯絡資訊和網站功能，使用者多少還是會需要找這些資訊，所以要保留吧」
顯然工程師不是很滿意我的回答，我也在這之後認真的思考，對於網站與用戶而言 Footer 的意義以及使用目的
▍Footer 的定義
根據 Nielson Norman Group 對於 Footer 的解釋：
Footer 常駐於每個網頁底部，在主體內容下方，他就像是一個導航系統，他能夠短促的告訴使用者網站提供的服務
想像一下，用戶瀏覽網站到了最後，滑到了頁面的底部，這時候你認為他的心情是什麼？• 其實就代表網站可能提供了有用的內容，讓他願意花時間瀏覽完畢，並且一路看到了最後
• 或是他在目前的頁面無法被滿足，試圖在網站的最後看看是不是有他想要的資訊
此時我們應該要繼續的提供良好的體驗，直到最後的接觸點仍持續給予資訊或是好處，並且告訴他們我們的價值，還有什麼是我們能夠為他們服務的
- 因此，Footer 的存在不應該被低估，他的重要性與 Header 和 Body 一樣重要
- 此外，用戶也習慣在看到網站的最後，預期能再找到更多資訊，例如：公司簡介、聯絡方式、服務項目、主要功能等等，都是有機會能拉高滿意度、提升易用性的
- 即使大多時候人們時常忽略 Footer，但我們不可否認的是，他對於用戶仍有極大的影響力，而且有著比你想像還要多的使用方式
接著，讓我們來談談以 UX 角度而言， Footer 的體驗關鍵：
▍Footer 的三大隱藏關鍵
（一）將 Footer 視為使用者旅程的最後關鍵點
最後的體驗對用戶來說也是一樣重要的。在網站的最後，我們是不是提供了用戶一致且完整的服務，讓他們能夠在即將離開頁面前仍然能找到有用的資訊
（二）Footer 可作為有效的熱門捷徑
可以根據網站內容將主要功能或是熱門捷徑設計在 Footer 裡，取決於你想要讓用戶看到什麼資訊。用簡單的方式再次強調網站價值，進而有效地增加轉換跟減少跳出率
（三）Footer 有機會讓使用者停留在網站裡
因為 Footer 可替使用者常用的頁面或功能建立捷徑，如果你突然想要尋找某個網頁，可以透過 Footer 的連結資訊到達想要前往的頁面，延長用戶的體驗路徑
你知道 Footer 還分成 Skinny footer和 Fat footer嗎？接下來就來介紹這兩種不同類型的特色和差異：
▍Footer 的種類
整體來說，Footer 分成 Skinny footer與 Fat footer
Skinny footer：僅設計一部分的網站導覽連結讓用戶點擊，也可以只是放上簡單的 Logo 或是 Copyright
- 情境：用途廣泛，通常提供精簡的資訊給使用者
- 優點：不讓用戶分心在 Footer 上，讓用戶能更專注在網站本身的內容
Fat footer：顧名思義，設計大面積的區塊引起用戶注意，通常提供詳細的網站地圖以及其他資訊
- 情境：常用於中大型網站，例如：591、博客來
- 優點：(1)引導用戶找到更多資訊、(2)提升易用性、(3)加強 SEO
聽起來好像 Fat footer 優於 Skinny footer？但其實它也有使用上的缺點 🤕👇- 當佔據畫面太多、資訊量過大時，用戶有可能快速略過
- 當網站在頁尾有 CTA 的動作時，Fat footer 很容易喧賓奪主，搶走用戶的注意力
▍Footer 如何跟用戶對話？
你有想過 Footer 除了展示自身網站優勢，同樣也能從用戶身上獲取價值嗎？
相信設計師們也看過不少的 Footer 設計，以下統整一些參考範例：
常見的互動形式：電子報、優惠碼、試用品、搜尋、下載 CTA、加入Line
以上都是可以再次激起使用者興趣而採取行動的方式，取決於在網站的情境下，你希望在用戶離開前得到他們的哪些回饋，或著是想要提供哪些價值給他們，引起他們的共鳴而願意提供個人聯絡資訊
理解 Footer 的意義和重點後，相信 Footer 對於各位而言不再只是個簡單的小東西，而是有機會創造更優質的用戶體驗的元素之一。在此也提供各位設計師設計 Footer 前應該要思考的重點：
▍設計 Footer 前，先問自己的 5 個問題
- 用戶會期望在最後看到哪些資訊？
- 設計的資訊是否能涵蓋網站的重點與精髓
- 這些資訊能否引導用戶繼續瀏覽？
- 提供的資訊是否能滿足不同類型的用戶？
- 有沒有什麼想要從用戶身上獲取的資訊
▍結論
【Footer 的意義/用途】
1. 簡化並展示網站的頁面結構
2. 作為類似 Navigation Menu 的導覽，引導用戶使用其他服務/功能
3. 提供網頁資訊或是對用戶的好處，並告訴用戶網站的價值，以及服務項目【Footer 的體驗關鍵】
1. 視為使用者旅程的最後關鍵點
2. 可作為有效的熱門捷徑
3. 有機會讓使用者停留在網站裡【Footer 的種類】
• Skinny:提供精簡的資訊給使用者，可以只是放上簡單的 Logo 或是 Copyright
• Fat:設計大面積的區塊引起用戶注意，通常提供詳細的網站地圖以及其他資訊【Footer 與用戶對話】
利用提供電子報、優惠碼、試用品、搜尋、下載 CTA、加入Line...等激起使用者興趣，引起用戶共鳴而願意採取行動
參考網站
謝謝閱讀到這裡的你們！如果喜歡我的文章的話，可以幫我拍拍手👏👏👏📌 拍手 1-10 下：謝謝分享～
📌 拍手 11-25 下：很不錯！
📌 拍手 26-35 下：優質好文，期待下一篇
📌 拍手 36-50 下：超級實用！快點再出其他文章呀～～另外，也可以留言或寫信跟我分享意見或是推薦我其他主題唷！
也可以直接訂閱我，不定期會更新文章來回饋朋友們📬
