地震警示頁面產品圖
產品介紹
「地震警示界面」是一款專為應對地震災害而設計的即時通知,旨在為用戶提供最佳的地震應變體驗,確保民眾安全無虞。採用使用者為中心的設計策略,充分考慮終端用戶需求,提供即時、精準的地震速報資訊。本產品清楚展示關鍵信息,如震級、震源地、震度等,並建立一套完善的資訊呈現流程,讓用戶迅速瞭解地震情況。此外遵循使用者經驗設計原則,並提供直觀的視覺化界面以及簡潔明瞭的互動操作流程,使民眾在面對地震時能夠迅速作出適當反應。
研究人員 - 陳侑廷 │ 指導教授 - 林家華
時間
2020 / 12 - 2022 / 1
工作項目
研究規劃、文獻調查、使用者研究、問卷設計調查、使用者經驗設計、介面修改、資料分析
- 目標與挑戰 -
此「地震速報警示頁面」的核心挑戰在於,有效地整合地震相關資訊,並以使用者為中心的設計方法,創建一個易用、直觀且高度互動的警示頁面,以滿足用戶在地震災害情況下多樣化角色需求,並充分考慮影響使用者的因素與價值,從而提供高效且吸引人的使用體驗。為此在設計過程中,我們確立了四個關鍵目標:1. 整合所需資訊內容;2. 建立完整資訊顯示流程;3. 構建設計要點;4. 提出設計介面及互動使用流程。
Literature Review 文獻探討
1 - 目前現況 :
●  地震規模到達5.0以上 + 所在地震預估震度達4級(臺北市3級)➔ 發布地震速報至該縣市民眾手機
●  地震速報僅可提供有限文字告警 ➔ 地震發生時間、震央、顯著有感地震、「趴下、掩護、穩住」、聲響震動告警 (不可擅自更動)
●  國內外多款 APP 提供視覺化的地震預警通知 ➔ 每一種頁面提供之資訊內容版型彼此都不一樣  
2 - 地震速報圖像化可行性 :  
●  行政院核定2019年至2022年為「臺灣5G行動計畫」
●  利用服務品質保證(Quality of Service, Qos)機制不相同的資料流 & 不一樣的使用者,採取順序優先等級排列
- 01 Empathize -
- 使用者的想法複雜無法快速整理歸納,所以我一開始使用 KJ 法針對使用者對於地震當下希望收到的資訊內容及流程需求進行調查 -
KJ Method
受測者資料
( 分6組進行 )
1 - 卡片群島化 :
●  6組提出該顯示項目  ➔ 接收者所在地地震級數、地震震央位置
 5 組提出該顯示項目   地震規模、地震發生時間、最近避難點、地震避難動作
目前地震速報沒有 ➔ 接收者所在地地震級數、地震規模、最近避難點
2 - A型圖解化 ( 關聯性解釋圖 )
將歸納後的卡片,做先後順序指示圖,以了解使用者對於群組之間的先後關係
(點擊圖片可放大)
3 - A型圖解化 ( 十字軸分析 )
將歸納完整的卡片,做重點群體分類
(點擊圖片可放大)
4 - B型敘述化
將圖解化後所了解的事情,以字句方式顯示
(點擊圖片可放大)
* 發現 *
在地震速報訊息的研究中,非常重視使用者參與。通過實驗分析,確定了使用者需求,包括「地震訊息」、「設計要求」、「延伸災害訊息」以及「後續相關訊息」。根據這些需求,我為設計師制定「使用者旅程地圖」「地震警示介面資訊流程」,作為設計的核心指南。
- 02 Define -
- 利用KJ法分析並整合實驗數據,我設計直觀且易用的「地震警示介面資訊流程」「使用者旅程地圖」作為應對地震災害的核心設計依據 -
Site Map 介面資訊流程
User Journey Map 使用者旅程地圖
( 點擊圖片可放大 )
- 03 Ideate -
- 根據整合核心需求,我設計地震災害情境下「人物誌」、「情境假設」「界面設計規範」後續設計師能迅速清晰掌握使用者需求和可能面臨的挑戰 -
Persona 人物誌
Scenario 情境假設
( 點擊圖片可放大 )
Interface Design Specification 介面設計規範
- 04 Prototype -
- 根據前階段的資料,我為4位設計師提供「地震警示介面資訊流程」、「使用者旅程地圖」、「人物誌」、「情境假設」及「界面設計規範」,並製作「用戶流程」以供了解使用情況。通過焦點團設計體讓他們討論並共同創建地震警示頁面的原型 -
User Flow 用戶流程
Wireframe 線框搞
(焦點團體設計)
Mockup 視覺稿
(焦點團體設計)
Mockup User Flow 視覺稿用戶流程
( 點擊圖片可放大 )
- 05 Test -
- 這個階段分為三個部分「專家訪談」、「前期測試」和「易用性」。我通過專家訪談改進了地震警示頁面;接續進行前期測試評估易用性和收集使用者意見,並針對意見加以修改介面;最後進行易用性測試使用問卷收集數據並分析結果 -
Step 1 : Expert Interviews 專家訪談
進行專家訪談,討論地震警示頁面的改進並將建議整合到設計中
* 受訪者 : 2位設計師、1位防災體系公職 ( 均於各自領域有10年以上工作經驗 ) *

問題 1 : 針對地震警示頁面所提供的資訊內容有何想法 ?

考量「地震警示頁面」是速報訊息不是 App,如果所有資訊都出現會資訊過量,而且這個階段使用者在安全狀態,所以應該改為單一連結顯示,讓使用者可以自行選擇

「狀況回報 & 地震後續相關資訊」 介面修改

問題 2 : 對於地震警示頁面整體操作感受或建議為何?

「前往」按鈕置於版面左方,可能造成難以觸擊或誤觸改為上下擺放,並將「前往」按鈕放大「取消」按鈕改為純文字顯示可強烈引導使用者點擊

「避難指示」介面修改

問題 3 : 針對地震警示頁面所提供的整體回饋性上,有何感受或建議?

「主震資訊及警告類」類別三(6弱-7級)地震級數巨大,非常可能造成災難性破壞,要將流程一的靜態改為閃爍狀態提高使用者急迫性

「主震資訊 & 警告類(類別三-流程一)」
介面修改

問題 4 : 對於地震警示頁面整體操作感受或建議為何?

( 1 )「臺北市」容易產生場址效應,建議將「臺北市」4級改為「主震資訊及警告類」類別二。

    「主震資訊 & 警告類(類別一 - 僅臺北市)」
介面修改

( 2 ) 5強地震所產生之破壞力非常劇烈,所以應該改為「主震資訊及警告類」類別三。

「主震資訊 & 警告類(類別二 - 5強)」介面修改
Step 2 : Pre-testing 前期測試
進行任務測試並計算時間和半結構式訪談,了解使用者對地震警示頁面的看法,並根據反饋進行細部調整
* 受訪者 : 10 位受訪者 ( 使用智慧型手機,且過去曾收過地震速報 ) *

問題 1 : 針對測試中地震警示頁面所出現的介面有何感受或建議?

( 1 ) 一開始的閃爍雖然會讓受測者危機意識提升,但恐懼感會加重,所以認為閃爍時間可縮短減少刺激

「主震資訊 & 警告類(類別三-流程一)」介面修改

( 2 ) 介面中顯示訊息接收者「所在地區」應該加以放大,加以提高識別度

「可能發生之延伸災害 & 警告類」介面修改
* 任務 : 請選取「最近的避難場所」,並執行導航 *
類型一受測者 : 6 人
( 直接點擊導航按鈕 )
平均秒數 : 5.14 秒
類型二受測者 : 4 人
( 先查看避難場所詳細資訊,在點擊導航按鈕 )
平均秒數 : 12.82 秒

問題 2 : 完成導航任務有多容易或多困難,對介面有何感受或建議?

避難場所詳細資訊應適度展開,且須增加重新整理按鈕,並且可透過顏色方式加以凸顯避難場所的遠近,而在路線顯示上應讓使用者更加了解到避難場所之路徑

「避難指示(流程二)」介面修改
Step 3 : Usability Test 易用性測試
對調整後的地震警示頁面進行使用者評估,包括易用性、互動滿意度、介面感受和任務計時測試,收集數據並利用SPSS分析結果
* 便利抽樣 : 35 位受測者 ( 使用智慧型手機,且過去曾收過地震速報 ) *
測試結果如下
- Final test results 最終測試結果 -
( 1 ) 系統易用性量表
易用性平均分數 : 88.1 分 - 通過易用測試(且每個人的分數都超過最低門檻 68分)
系統易用性量表連結 :
https://docs.google.com/document
( 2 ) 使用者互動滿意度量表
使用者互動滿意度平均分數 : 198.3 分 - 整體介面滿意易度良好(滿分 216 分)
使用者互動滿意度量表連結 :
https://docs.google.com/document
( 3 ) 介面感受程度
問卷結果顯示,隨著地震級數和顏色使用的變化,受測者的警覺和緊張感逐漸增強。在地震後的介面,受測者感受到放鬆和安全感。
介面感受程度量表連結 :
https://docs.google.com/document
( 4 ) 任務計時測試
介面測試反饋顯示,避難場所資訊適度展開並利用顏色差異強調距離,產生引導效果,使人們更容易點擊導航按鈕
* 任務 : 請選取「最近的避難場所」,並執行導航 *
類型一受測者 : 22 人
( 直接點擊導航按鈕 )
平均秒數 : 6.81 秒
類型二受測者 : 4 人
( 先查看避難場所詳細資訊,在點擊導航按鈕 )
平均秒數 : 23.06 秒
- Conclusion 總結 -
Information Flow Framework  資訊流程架構
( 點擊圖片可放大 )
Final Mockup 最終視覺稿
Final Mockup User Flow 最終視覺稿用戶流程
( 點擊圖片可放大 )
Hi-fi Interactive Prototype 高保真互動原型
操作互動原型連結 ( 開啟使請先點擊右下方的 Restart或按 R鍵  ) :
https://www.figma.com/proto/
* 注意 : 前方等待時間為假設告警聲響及震動信號特殊間隔共 11 秒 *
* Reflection 反思 *
本研究專注於地震警示頁面的「資訊內容」、「流程架構」和「設計要點」未來可優化不同行動裝置的介面探討聽覺輔助設計擴大實驗對象範圍,包括各年齡層和國籍。這將提升地震警示頁面的通用性和實用性,確保使用者的安全。
Other Projects