界限 Boundaries

界限 Boundaries 以創新、多元的方式推廣性別平等議題,並結合生成式 AI 輔助資料抓取、分類。 將網站結合數位展覽的概念,以便實體展覽結束後,仍有數位留存可供查看。

類型

類型

Website

擔任角色

擔任角色

UI/UX Designer、Framer Developer

時間

時間

2024/3 ~ 2024/12

93.9%

使用者好評

4

獲獎數量

5 位

觀展者表示,與他們的遭遇經歷相像。

250+

觀展人數
問題與機會

看見生活中,無形的問題

一開始,我們從自己生活周遭所遇到的性別議題去反思,無論是親身經歷、同儕分享、媒體新聞,發現這個問題好像層出不窮,於是我們開始展開行動。

後來我們透過問卷發現,高達 33% 的填答者曾有過疑似遭受性騷擾的經歷,這表示議題在生活中的普遍性遠超想像。

但無論是想了解議題的旁觀者,還是親身經歷的受害者,他們都面臨著不同的問題:「無法同理的狀況」與「說不出口的經歷」

  • 對旁觀者而言:論述的生硬、無法同理受害者,無法邁出下一步給出實質建議。

  • 對受害者而言:在缺乏能安心對話的情況下,往往陷入孤立無援的困境。

這正是我們專案的機會點所在,而我們的核心挑戰是:

我們是否能不只是單向地「提供資訊」,而是雙向地「創造連結」?

我們意識到單一媒介可能會稍顯薄弱,所以我們決定將專案的核心理念,分別加值成網站、Podcast 與桌遊三種媒介,期望從認知、聆聽、體驗這三個角度,建構一個完整體驗。

關鍵洞察

為了深入了解議題的多樣性,我們採取了從量化到質化的兩階段研究,以確保設計能精確回應真實的需求。

量化問卷

首先透過線上問卷,快速了解大眾的普遍認知。數據呈現兩個值得深思的現象:

認知落差:約 80% 的人能憑「直覺」判斷騷擾情境,但對「法律定義」普遍模糊,顯示知識上的缺口。

普遍性:高達 33% 的填答者表示有過被騷擾的經歷,證明這並非少數人的問題,而是一種普遍的存在。

數據證實,大眾的理解多停留在直覺感受,而非清晰知識

質化探討

與 3 位受害者及 1 位疑似加害者進行訪談,這讓我們看見了更多樣、更複雜的觀點:

樣態的多樣性:我們發現性騷擾的樣態多樣性,從跟蹤、偷拍到異性間的冒犯、同性間的調侃,無所不在。

長遠的心理影響:經歷所帶來的不安全感、對特定事物、地點的排斥,以及難以釋懷的情緒困擾。

玩笑的認知斷層:從疑似加害者的視角,得知「開玩笑」的意圖與接收方感受之間的落差。

總結

將所有發現統整,我們精選出兩個核心洞察:

大眾普遍「知道」性騷擾是錯的,但對於其法律定義、多樣性、以及對受害者造成的影響,有著巨大的認知落差。

無論是受害者的創傷、旁觀者的無知,還是大環境的漠視,都指向一個問題:我們的社會,缺乏一個能安全開啟對話、促進相互理解的有效場域。

基於以上洞察,我們將這個龐大的議題,收斂並定義出一個清晰、可執行的整合性挑戰:

如何將受訪者的真實經歷,轉換成一場能觸動人心的體驗,並真正地催化彼此的同理與對話?

因此,我們將此挑戰進一步拆解為三個層次的任務:

產出

核心挑戰

認知層 (網站)

如何建構一個清晰、安心的資訊入口,作為整個專案的敘事核心與展覽的數位留存?

情感層 (Podcast)

如何創造一個讓聽眾無壓力接收多元視角、讓受害者能撫慰心靈的節目?

體驗層 (桌遊)

如何透過遊戲機制,將抽象的心理界線與壓力,轉化為具體的互動體驗

設計流程

雖然「界限」是一個結合了網站、Podcast 與桌遊的跨媒體整合體驗,但接下來,我將聚焦在我主要負責的「網站」,深入分享我從無到有,建構這個數位敘事核心的 UI/UX 設計流程與決策。

目標使用者

為了雙向地「創造連結」,創造能夠互相理解且清晰、安心的資訊入口,網站的主要使用者訂定為「受害者」及「旁觀者」。

透過兩種截然不同的 Persona 更能精確的訂定出我們應該提供什麼樣的內容,才可以同時解決這兩種類型的人的難題。

網站動線規劃

因為是敘事型網站,所以在規劃上會有一條主要敘事路徑,在每個頁尾放置前往下一頁的按鈕,透過這條路徑使用者可以體驗精心安排的敘事架構。

同時為了滿足有特定需求的使用者,讓他們能夠馬上查看想看的頁面(例如:一位正在尋求幫助的人可能會想直接前往 Podcast 頁面),所以保留了傳統的導覽列,除了確保他們的效率與控制感,還讓網站易於使用。

Wireframe

網站以敘事形式作為核心設計,而非傳統的功能導向。所以我將網站視為一種數位策展,大量採用圖文穿插的版面配置,旨在打破實體展覽的時空限制,方便使用者在展覽結束過後,還可透過網站回味專案展覽。

在滾動過程中,加入動畫效果,其目的在於引導視覺動線、維持使用者的閱讀動機,確保使用者能在專注且不被打擾的氛圍中,完整接收我們希望傳達的深刻議題。

設計迭代

因為整體展覽分成「校內」及「校外」,所以在兩次展覽前,分別都會進行設計的調整,而在校內展前根據易用性測試做調整,而校外展則是透過收集校內展的問卷及在旁觀察並統整資料後做調整。

易用性測試

為了確保網站的資訊對使用者來說,是簡單、好用、容易獲得資訊的,加上以設計者的目光來看可能會有一些盲點沒有發現。
所以引進外來的使用,會更好的排除沒有注意到的盲點。

因此尋找了 5 名受測者,並在操作後進行訪談,最終統整各個使用者對於各頁面的評論,並進行更動。

最終進行 5 項更動

  1. 調整首頁文字內容

  2. 問卷呈現形式調整

  3. 故事圖文調整

  4. Podcast 選集與簡介調整

  5. 合作夥伴佔比調整

使用者回饋調整

透過校內展觀察使用者操作網頁時的表情、行為,並加以判斷為何會有這樣的反應,以及透過 115 份問卷回饋,相互比對、整理之後,開始進行更動。

問題一

進入頁面時不知道可以往下滑,產生困惑感。
解法:新增 Scroll Indicator

問題二

Podcast 的選集清單,多數人沒有注意到,以及沒有人點擊影片進行觀看。
解法:重新設計 UI 並將影片自動播放

問題三

輪播圖造成重複點擊,輪迴 2-3 次後才繼續往下看,影響觀看體驗。
解法:更改為一次性過程

問題四

桌遊區介紹擁擠,閱讀吃力。
解法:將原有介紹重新拆分成 3 塊,增加留白

問題五

圖片是否可以放大,能多點點擊互動嗎?
解法:新增圖片 Overlay 效果

結論

成果

「這個網站的故事,幾乎就是我的親身經歷。」 — 約 5 位觀展者在看完網頁後,跟我們述說與他的經歷類似,證明了我們成功創造了一個能引發深刻共鳴的體驗。

  • 93.9% 的使用者給予網站綜合好評 (n=115)

  • 榮獲畢業展覽四項獎項肯定:銅牌專案獎、最佳行銷暨社群經營獎、最佳資訊加值獎、外賓特別獎

整體的概念、發想都有好的結果,讓觀展者以看故事的方式了解性別平等的樣態、了解團隊如何執行專案都取得不錯的成果,多數人也都對網站讚嘆連連,提出了許多如何架設、設計網站的疑問。

反思

但就以在「展覽上」觀賞這件事情,閱讀時長必須先考慮進去,才好進行整體內容規劃,在觀察以及查看後台資訊,發現一組停留在網頁瀏覽時間 10~15 分鐘不等,會影響到展覽動線。

雖然已將網頁區放置在最後觀賞的區塊,但由於場地大小有限+接續導覽,以至於上一組還在看的話,下一組就沒辦法馬上銜接上。

但若是以「展覽數位留存」方面來講的話,我覺得整體算是不錯的。畢竟若是在展間聽人導覽、觀賞展間,也會花上 10~15 分鐘不等,再加上網頁上有一些動態效果,可以讓閱讀不那麼單調、無趣。
沒有觀賞到實體展覽的人,日後也可以透過這個網頁了解,我們是如何宣導性平議題以及將我們的產品給建置出來的。

無論在展覽上聆聽也好、事後在網路上瀏覽也罷,希望能藉由此次經驗啟發更多人,重新思考性別平等的議題,並激發對話與行動的可能性。

學習

在從無到有產出這個網站的過程,學到了很多東西。除了加深一些基本理論之外,也學會了更多的軟體操作,中間也發生了一些風格上的變化,但還是盡可能讓整個網頁的設計協調一點,不會有太大的落差。

除此之外,在團隊協作上也學會如何溝通及彈性變化,適時的參考別人意見,以及說出自己的想法,在整個製作過程都非常重要。

雖然面對各種不同意見的碰撞、想法的分歧,但也學會將這些挑戰轉化為成長的契機,給彼此時間提出自己目前的問題,接受彼此的想法並且都學會妥協,正是這些想法的磨合與專業的互補,才讓專案成果得以超越原本的想像。

kuti36.work@gmail.com

Copyright © Kuti Chen

kuti36.work@gmail.com

Copyright © Kuti Chen

kuti36.work@gmail.com

Copyright © Kuti Chen