世新大學資訊傳播學系110級畢業專題—界限之專題網站。
ROLE
UI/UX Designer
TYPE
Website
YEAR
2024
挑戰
在初期階段，有個問題困擾著我們：性平議題到底該如何推廣？而為了解決這個問題，我們也是絞盡腦汁在思考、嘗試。
於是，我們決定推出三個加值產品：網頁、Podcast、桌遊。
性平議題該如何推廣
• 如何將抽象且可能被視為艱澀的性平議題，轉化為容易被接受的形式
• 如何設計內容，讓不同背景的人都能共鳴並參與討論
網站該怎麼設計才好
• 如何讓內容清晰易懂，避免過於艱深的專業術語
• 如何優化使用者體驗，確保網站操作簡單、不讓使用者感到困惑
• 如何呈現多樣性內容，讓使用者可以隨時隨地輕鬆使用
如何吸引目標受眾的參與
• 性平議題可能存在認知門檻或誤解，如何突破這些障礙，吸引更多人投入
面對這些挑戰，我們明白，推廣性平議題並非一蹴可幾，而是需要不斷探索與創新的方法。
方法
為了解決性平議題在推廣過程中面臨的挑戰，我們以「敘事型網站」作為設計基礎，並規劃了以下五個核心頁面，對應不同的問題：
1. 首頁：面對性平議題艱澀且可能讓人望而卻步的特性，我們選擇以簡約明瞭的風格，呈現片段情境、法律規範與問卷數據，讓使用者無壓力地初步接觸性平議題，降低進入門檻。
2. 故事：為了讓性平議題更具生活化與共鳴性，我們透過講述大一新生遭受性騷擾的故事，講述性騷擾案例以及日常中無心的舉動如何影響他人，讓使用者能在情感層面與議題產生連結，進而反思自身行為。
3. 播客：將 Podcast 獨立成頁面，精華作為引導，讓使用者能輕鬆聆聽主題的重點，並進一步聆聽完整節目。
4. 展現：在如何吸引受眾參與的挑戰中，我們利用視覺化方式：如侵害軌跡圖，搭配資料的分類與加值，讓複雜的性平資料以簡單且具吸引力的形式呈現，幫助使用者更清晰地理解議題。
5. 團隊：團隊成員、贊助商與合作夥伴的介紹，以及我們的團隊歷程，拉近與使用者的距離，讓他們感受到性平推廣背後的用心。
這些頁面不僅解決了推廣過程中的挑戰，也為我們留下展覽的數位留存。
設計
設計流程：
確立產品定位：因為不希望艱澀難懂的法律條文讓使用者感到難以使用，整體風格訂定為簡約、些許動畫、圖文故事為主。
調查、研究：以競品分析為主，透過分析其他敘事型網站、性別平等議題網站、展覽相關網站，統整其優缺點，並將其改善後融入自身網站當中。
設計、調整：接著著手設計低保真線搞，在每周會議中跟小組成員討論各個區塊該長怎樣，及融合他們想呈現的想法，並不斷調整。也因一開始有考量到開發技術問題，過於華麗的動畫可能無法呈現，設計也盡量往簡單的方式呈現。
架設：從一開始的 Coding 到嘗試使用 WordPress 及最後發現 Framer 這個平台，架設過程從一開始的覺得困難到逐漸輕鬆。也因為後續使用 Framer 的關係，原本打消念頭的動畫效果也得以實現，後續的高保真設計也直接移來這邊操作，以便後續可以直接發布完整版。
設計工具：Figma、Framer
在不同區塊設計間猶豫不決時，也會用投票的方式詢問團隊成員哪個設計好，並採取票數高的設計。與團隊的不斷溝通、頭腦風暴，才是造就設計出來的成品的最大關鍵。
使用者體驗
也因畢業展覽有分為兩個階段，校內展前及校外展，因此將使用者體驗分為兩次不同的測試。以便在校外展時能夠給予完整的體驗。
校內展前執行：易用性測試，因為第一次接觸敘事型網站，所以不知道多數使用者的想法是如何，所以先以自己＋小組內部討論作為初步設計。而執行意用性測試的方式則以指派任務的方式進行。尋找 5 名受測者，並告知他們要瀏覽整個網頁，並大聲說明出自己遇到什麼樣的問題，以及覺得哪邊可以作改善，旨在希望改善流程、資訊清晰度、資訊傳達度。
校內展後執行：觀察使用者，因為展覽場地因素，以及觀展人不一定希望被訪談，於是透過在旁邊觀察他們的操作行為，並加上事後的回饋表單（網頁喜歡的部分）來綜合歸納出需作更改、調整的地方。
觀察操作行為：
進到頁面後不知道可以滾動（Scroll）
Podcast 選集清單沒有人注意到。
如何運用 AI 的輪播圖會造成重複點擊。
回饋表單：將喜歡比例較低的區塊重新調整（EX:Podcast、桌遊區），並結合留言回饋（可以多點點擊互動、圖片是否能放大、桌遊區介紹可以不要那麼擠嗎）
上述的調整結束過後，整個網頁也就大功告成，讓觀展人能夠在校外展體驗到最好的狀態。
結論
整體的概念、發想都有好的結果，讓大家以看故事的方式了解性別平等的樣態、團隊的所作所為都非常好，來觀展的人也都對網站讚嘆連連，提出了許多如何架設、設計網站的疑問。
在學習上也學會了更多 Figma、Framer 的操作及 UI/UX 設計該注意到一些小細節，了解到 Design Guidline,Component,Variant,Grid System 保持一致性有多麼重要，也加快了開發的速度。
但就以在「展覽上」觀賞這件事情，閱讀時長必須先考慮進去，才好進行整體內容規劃，在觀察以及查看後台資訊，發現一組停留在網頁瀏覽時間 10~15 分鐘不等，會影響到展覽動線。 雖然已將網頁區放置在最後觀賞的區塊，但由於場地大小有限＋接續導覽，以至於上一組還在看的話，下一組就沒辦法馬上銜接上。
但若是以「展覽數位留存」方面來講的話，我覺得整體算是不錯的。畢竟若是在展間聽人導覽、觀賞展間，也會花上 10~15 分鐘不等，再加上網頁上有一些動畫，可以讓閱讀不那麼單調、無趣。
沒有觀賞到實體展覽的人，日後也可以透過這個網頁了解，我們是如何宣導性平議題以及將我們的產品給建置出來的。
無論在展覽上聆聽也好、事後在網路上瀏覽也罷，我們都希望能藉由此次經驗啟發更多人，重新思考性別平等的議題，並激發對話與行動的可能性。
