RAY 4.0 - 基隆市政府全球資訊網 by 翁瑞宏/楊郁如/潘躍升/吳育葦

Our Team

⽬錄

Contents

01 02 03 04

專案簡介 資訊架構 設計⽅向 反思

A B

基隆市政府全球資訊網 網站現況分析

01 01

專案簡介

Project Introduction

A B

基隆市政府全球資訊網 網站現況分析

01 01

專案簡介

Project Introduction

06

K E E L U N G

01 專案簡介 / Project Introduction

資料來源： https://www.dgbas.gov.tw/public/data/84115143771.pdf

基隆市政府網站 基隆市政府網站的各項網⾴資料都在同⼀平台之下運作，使 資訊得以整合。 平台網站有⺟站(基隆市政府全球資訊網)與⼦站(各局室網站) 的分別，各附屬機關網站網站可將訊息資料加入基隆市政府 全球資訊網，使基隆市全體機關單位資訊連成⼀系，更便利 於⺠眾瀏覽查詢。

07

01 專案簡介 / Project Introduction

K E E L U N G

⺟站 - 基隆市政府網站

⼦站 各局室網站

⼦站 各局室網站

⼦站 各局室網站

⼦站 各局室網站

⼦站 各局室網站

⼦站 各局室網站

由⼦站(各局室網站)上稿，⺟站(基隆市政府全球資訊網)與⼦站(各局室網站)同步刊登為使本府全體機關單位的網站資訊⼀致。

資料來源： https://www.dgbas.gov.tw/public/data/84115143771.pdf

08

A B

基隆市政府全球資訊網 網站現況分析

01 01

專案簡介

Project Introduction

09

01 專案簡介 / Project Introduction

問題發現 Problem Discovery

從基隆市政府網站的資訊架構可發現，類 別中的⼦項⽬過於混雜、不直觀。另外， 有些選項被歸類在不適當的類別中，⽽有 些選項可被再挑選出來歸納成⼀個類別。

A B C

問題初探 關鍵問題與初步改善⽅向

01 02 問題初探與核⼼議題

A B C

問題初探 關鍵問題與初步改善⽅向

01 02 問題初探與核⼼議題

12

02 問題初探與核⼼議題

問題初探 Problem First Exploration

資訊 紊亂

部會的觀點

網站 複雜度⾼

基隆市政府全球資訊網為整合式搜尋的網站， 期望整合各項服務分類。

期望以服務為導向， 簡化⽬前網站的複雜度。

13

02 問題初探與核⼼議題

問題初探 Problem First Exploration

我們的觀點

機關 為導向

⼀般⺠眾無從得知所需要的服務是隸屬於哪⼀機關所管轄。

服務 精確性

便⺠服務的提供內容僅有少數服務供選擇， 也不是⼀般⺠眾會希望查詢到的。

14

02 問題初探與核⼼議題

使⽤者訪談 User Interview

喜歡以主題服務相關的呈現⽅式, 但前提是主題要設定好

未能理解陳情申訴意思， 會以為跟提告有關。

查詢服務時，會找到不相關的網⾴

觀光旅遊蠻重要的,如果這部分資訊 整合得好的話會比較⽅便

不太了解各局處所負責的相關事項

主題館認為像是主題樂園、博物館, ⽽並非市政服務

K E E L U N G

K E E L U N G

不會覺得「認識基隆」會在講 基隆歷史，會以為在講基隆景點

市⺠休閒跟主題館都有觀光，會認為觀光同⼀ 類，但是所涵括的內容⼜不⼀樣連接到的也不 ⼀樣，但是名稱上⼜相當混淆。

15

02 問題初探與核⼼議題

問題初探 Problem First Exploration

使⽤者訪談

資訊 不易⽤

名稱容易誤解該服務所提供的內容。

體驗 不友善

主選單層級架構複雜， 需經過多次點選才能得到所需之服務。

30 16

02 問題初探與核⼼議題

03 脈絡洞察 / ContextualInsight

About 曉偉是在台北讀書大學生，期中考後的假日與三五好友相約基隆遊玩。 因為沒有汽車，打算藉由大眾交通的方式在選定地點後一次遊玩附近景點， 並觀賞特色展覽。

目標 • 可以一次找到附近範圍內的景點

Challenge •

點開觀光，但沒有給出詳細資訊

•

沒有相對位置概念，地圖連結也失靈

31 17

02 問題初探與核⼼議題

03 脈絡洞察 / ContextualInsight

About 柏成是一名在台北的科技公司上班的基隆人，由於職業是會計， 所以有時候會受朋友所託找尋政府相關的財務資訊。假日的時間除了到台北玩以外， 有時也想要就近在基隆找一些季節性的景點或是活動參加，平時也會關心基隆的在地議題。

目標 • 找到政府補助的相關資訊 •

找尋最近的在地活動訊息及議題

Challenge •

無法找到政府網站應提供的專案資訊或議題

•

不懂服務的歸類方式以致於找不到想要找的服務，用搜尋功能有時也不一定能找到

18

02 問題初探與核⼼議題

CJM | 查詢觀光景點

19

02 問題初探與核⼼議題

CJM | 查詢青年貸款

A B C

問題初探 關鍵問題與初步改善⽅向

01 02 問題初探與核⼼議題

K E E L U N G

21

02 問題初探與核⼼議題

關鍵問題 The key issue

服務歸納不清楚

服務命名不直觀

網站內容⾴⾯說明不⾜

基隆在地特⾊

未充分展現

22

02 問題初探與核⼼議題

改善⽅向

K E E L U N G

清楚的服務歸納

• 將服務分類降低搜尋困難度

• 盤點網站服務項⽬並歸納

擬定完善網站架構

• • 以服務為命名並導⾄局處

精準定義服務名稱

• 字數盡可能統⼀ • 命名的字詞直接由內容取得 • 避免重複使⽤同⼀詞彙

清楚的圖⽂化資訊設計

展現出在地特⾊

• 魅⼒基隆

• 針對個別項⽬提供說明

• 提供多樣化的資訊呈現

• 從地圖找到鄰近景點以進 ⾏個⼈觀光規劃

ＫＥＥＬＵＮＧ

Improvement Direction

A

資訊架構規則及訂定過程

B

主題服務/分眾服務與選單

C

結論

01 03

資訊架構

Information Architecture

A

資訊架構規則及訂定過程

B

主題服務/分眾服務與選單

C

結論

01 03

資訊架構

Information Architecture

25

03 資訊架構 / Information Architecture

避免模糊的分界、強調切割獨立性

規則 Rule

重分類 | 廣⽽淺非窄⽽深 針對此⼀統整性的入⼝式市府網站, 透過廣做為入⼝, 讓使⽤者找到所欲查詢的⽬標, 再透過⼦關聯的階層設計, 呈現符合邏輯次序之資訊。

K E E L U N G

K E E L U N G

命名 | 妥善代表內容、彼此有區別性

26

K E E L U N G

分類規則緊扣 同⼀層類別彼此互斥 上下階層⽗⼦關係 位階平⾏、顆粒⼤⼩⼀致（granularity）

命名規則緊扣 盤點類似網站之命名⽅式 命名的字詞可以直接由內容獲得 ⽂字視覺格式、⽂法格式、字數⼀致 避免重複使⽤同⼀詞彙

參考來源：蔡明哲、陳書儀(譯)(⺠106)。資訊架構學 (原作者:L. Rosefeld )。臺北市：碁峰資訊。

K E E L U N G

03 資訊架構 / Information Architecture

03 資訊架構 / Information Architecture

1. 統整既有架構之項⽬，參考類似網站之項⽬

過程

2. 將網站項⽬進⾏整併，並根據類別意義去蕪存菁

Process

3. 審視各項⽬之實⽤性、命名與所屬階層是否恰當 4. 重新檢視各命名所屬的分類是否合宜

K E E L U N G

K E E L U N G

27

A

資訊架構規則及訂定過程

B

主題服務/分眾服務與選單

C

結論

01 03

資訊架構

Information Architecture

29

03 資訊架構 / Information Architecture

問題 問題⼀：便⺠服務、市政服務、主題服務館 服務內容重疊，未能窮盡所有服務 問題⼆：列舉項⽬位階不平⾏

K E E L U N G

問題三：處室網站難以嫁接服務的想像（沒有入⼝） 問題四：命名不直觀

調整 •

整併便⺠服務、市政服務、主題服務館之服務, 並加入以客群區分類別

•

呈現順序

•

新增機關業務介紹

•

命名與重分類

30

03 資訊架構 / Information Architecture

K E E L U N G

調整 •

整併便⺠服務、市政服務、主題服務館之服務並 加入以客群區分類別

•

呈現順序

•

新增機關業務介紹

•

命名與重分類

結果 結果⼀：增列基隆服務 結果⼆：市政資訊作為政府提供資訊的窗⼝ 結果三：於組織架構新增機關業務介紹 結果四：更新資訊架構的選單

31

便⺠服務

市府服務

主題館服務

釐清問題 A版-主題服務

主題服務

原先基隆市政府網站的服務分類混亂, 不易找尋所需之服務

K E E L U N G

03 資訊架構 / Information Architecture

32

03 資訊架構 / Information Architecture

盤點各⼤政府網站 A版-主題服務

盤點了台灣9個縣市政府所提供的網站服務, 並將其整合並歸納為25⼤類別

33

03 資訊架構 / Information Architecture

⼾籍⾝分

⽂化休閒

買屋賣屋 觀光旅遊

社會福利 環境能源

A版 - 主題服務 最終我們透過⼯作坊與設計顧問 和部會⼈員逐層分類，並歸納出 12個⼤分類。

交通 勞⼯就業

過程 將項⽬根據描述內容分類

初步分類後將同⼀類型的資訊群組

市⺠快線

法律服務

歸納分類

企業投資

K E E L U N G

醫療保健

34

03 資訊架構 / Information Architecture

⼾籍⾝分

⽂化休閒

⼾籍⾝分

買屋賣屋

⽂化休閒

觀光旅遊 醫療保健

觀光旅遊

醫療保健

社會福利

社會福利

環境能源

歸納分類

勞⼯就業

A版 - 主題服務

環境能源

經由易⽤性測試，修正分類命名以 及調整部分⼦分類的歸屬位置。

交通

交通

勞⼯就業 企業投資 市⺠快線

市⺠快線

法律服務

法律服務

教育學習

企業投資

K E E L U N G

買屋賣屋

35

便⺠服務

+

主題服務

市府服務

+

+

主題館服務

釐清問題 B版 - 分眾服務

? 原先基隆市政府網站的服務分類 混亂不易找尋所需服務

K E E L U N G

03 資訊架構 / Information Architecture

36

03 資訊架構 / Information Architecture

夏威夷政府網站

盤點各⼤政府網站 密⻄根政府網站 密⻄根區分成居⺠、

商務、求職者、觀光客。

香港政府網站 香港網站區分成

本港居⺠、商務及貿易

及非本港居⺠。

B版-分眾服務 參考夏威夷、密⻄根和香港的政府網站, 以不同⾝分別來區分服務

K E E L U N G

夏威夷分成政府、商務、 居⺠及遊客等。

37

03 資訊架構 / Information Architecture

政府服務

基隆市⺠

歸納分類 B版-分眾服務 以「⾝份別」概念區分後，參考舊版 基隆市政府所提供之服務項⽬與GA統 計的熱⾨搜尋，重新考慮服務項⽬的 優先順序與相關性。

旅客/觀光客

K E E L U N G

非基隆居⺠

A

資訊架構規則及訂定過程

B

主題服務/分眾服務與選單

C

結論

01 03

資訊架構

Information Architecture

03 資訊架構 /

結論 conclusion

命名 | 妥善代表內容、彼此有區別性 重分類 | 廣⽽淺非窄⽽深

Information

K E E L U N G

K E E L U K N E GE L U N G

39

A

設計規範

B

迭代設計

Ｃ

SUS易⽤性分數

B

01 04

設計⽅向

Future direction

A

設計規範

B

迭代設計

Ｃ

SUS易⽤性分數

01 04

設計⽅向

Design Direction

K E E L U N G

42

03 設計⽅向 / Design Direction

04 設計⽅向 / Design Direction

140px 16px

122px

K E E L U N G

K E E L U N G

43

44

K E E L U N G

K E E L U N G

04 設計⽅向 / Design Direction

BUTTONS & FORMS ( DROPDOWN、SEARCH FILED、NAVIGATION BAR、SEARCH ICON、PAGE BAR、AVATAR )

04 設計⽅向 / Design Direction

K E E L U N G

K E E L U N G

45

A

設計規範

B

迭代設計

Ｃ

SUS易⽤性分數

01 04

設計⽅向

Future direction

K E E L U N G

47

04 設計⽅向 / Design Direction

網站⾸⾴規劃 Homepage Planning

K E E L U N G

48

04 設計⽅向 / Design Direction

網站 次⾴規劃 Website Internal Page Planning

49

04 設計⽅向 / Design Direction

選單

K E E L U N G

舊版網站

會先看上⽅導覽列

網站可以有⼀個區塊是完整的網站總導覽

50

04 設計⽅向 / Design Direction

選單

K E E L U N G

Wireframe

上層選單最醒⽬，所以會 上層選單最醒⽬，所以會 比較想要從這裡開始點選。 比較想要從這裡開始點選。

K E E L U N G

51

04 設計⽅向 / Design Direction

選單 呈現形式 跳脫舊版往右邊展開的⼆級⼦選單 , 以展開形式供使⽤者快速讀取選單內容。

52

04 設計⽅向 / Design Direction

次導覽列 Wireframe

K E E L U N G

應該要有個次導覽列，讓⼈點進去⼀眼

應該要有個次導覽列，讓⼈點進去⼀眼 就能知道這⾴⼤概涵蓋什麼樣的內容。 就能知道這⾴⼤概涵蓋什麼樣的內容。

當⾴⾯資訊過多時, 使⽤者會難以在短時間內了解⾴⾯的整體內容

K E E L U N G

53

04 設計⽅向 / Design Direction

次導覽列 在資訊較多的⾴⾯提供次導覽列, 以便使⽤者快速了解⾴⾯內容, 並快速連結⾄想要點擊的服務類別。

54

04 設計⽅向 / Design Direction

網站⾸⾴規劃 Wireframe

K E E L U N G

WireframeA以主題來區分服務

以及WireframeB以⾝份別來區分服務

K E E L U N G

55

根據GA統計資料，依照頻率排列出 補助分⼀區有幫助 使⽤⾼低之順序，以符合使⽤需求 更快尋找到福利資料

04 設計⽅向 / Design Direction

基隆服務 在Wireframe A 與Wireframe B 的測試過 程中，兩者皆由其使⽤偏好的擁護者。 整併主題服務與分中服務設立基隆服務專 區供使⽤者依其需求進⾏查詢。

56

04 設計⽅向 / Design Direction

右側浮動欄蠻直觀的， 右側浮動欄蠻直觀的， ⼀下⼦就找到補助類的服務 ⼀下⼦就找到補助類的服務

K E E L U N G

點選右側浮動欄，直覺性的看到想要 點選右側浮動欄，直覺性的看到想要 看的⽂字，⾺上找到相對應的資訊 看的⽂字，⾺上找到相對應的資訊

浮動側邊欄 作為⾸⾴的各區塊快捷鍵，讓使⽤者能快速了解⾴⾯內容， 並連結⾄想要點選的服務 並且在下⽅放置當季重要服務或是專區。

57

04 設計⽅向 / Design Direction

申請補助服務 & 線上申辦專區 補助散落在各局處，設立補助專區能把各種補助都會列出來 幫助只想要找到補助的使⽤者。

線上申辦服務專區，幫助使⽤者找尋可以線上申辦的服務。

K E E L U N G

K E E L U N G

補助分⼀區有幫助 補助分⼀區有幫助 更快尋找到福利資料 更快尋找到福利資料

58

K E E L U N G

04 設計⽅向 / Design Direction

訊息快報 訊息快報由三個⾴⾯「最新公告」、「活動訊息」以及「市政新聞」所構成 放置的欄位內容根據我們的受測者回饋個別調整為發布時間、標題、發布單位

59

招標⾦額可放在最外⾯，結標時間也很重要。 招標⾦額可放在最外⾯，結標時間也很重要。 如果做簡版與詳版的⾴⾯切換，會比較好， 如果做簡版與詳版的⾴⾯切換，會比較好， 其他要放的資訊感覺放在內⾴就好。 其他要放的資訊感覺放在內⾴就好。

簡版

K E E L U N G

公告次數很重要，發布時間也很重要， 公告次數很重要，發布時間也很重要， 結標時間點進去看到就好。 結標時間點進去看到就好

招標資訊 於標題前⽅加上招標類別 簡版與詳版設計以供資訊與內容呈現 於詳版增列時間與預算⾦額

04 設計⽅向 / Design Direction

詳版

繁版

60

04 設計⽅向 / Design Direction

徵才資訊需要⼀段徵才的時間會比較好 徵才資訊需要⼀段徵才的時間會比較好

詳版 簡版

先看到主要的條件跟主要單位就好 先看到主要的條件跟主要單位就好

K E E L U N G

感覺只需要標題 感覺只需要標題，公告時間單位 ，公告時間單位 和職稱就好，再加上下⾯基本的東⻄ 和職稱就好，再加上下⾯基本的東⻄

徵才資訊 於標題前⽅加上類別 簡版與詳版設計以供資訊與內容呈現 於詳版增列任⽤資格

簡版

A

設計規範

B

迭代設計

Ｃ

SUS易⽤性分數

01 04

設計⽅向

Design Direction

62

System Usability Scale 新版

58.13

提升

21.87

80

K E E L U N G

舊版

K E E L U N G

63

04 設計⽅向 / Design Direction

Prototype 網站建立

Website 網址：140.119.19.99:3001

(請使⽤Chrome開啟)

01 05

反思

Reflection

65

05 反思 / Reflection

反思 Reflection

• 對受訪者以及受測者都要謹慎應對並及早邀請

K E E L U N G

• 對於⽇後從事「資訊架構」整併的執⾏建議與⼼法

• 考量設計上的限制取捨使⽤者給予的回饋或建議