從企劃到開發維護的 Drupal 專案經驗 - 以 新竹社服中心網站為例

蔡明哲 悠識數位顧問有限公司UserXper.com

2

蔡明哲 Richard Tsai• 悠識數位 首席資訊架構師 Chief Information Architect

– 專長• 網站企劃，網路行銷 , 專案管理 , 系統分析 , 資料庫行銷

– 過去• 企劃顧問，專案總監，客服總監，技術總監，行銷企畫經理，知識研究部經理，軟體工程

師，專案經理，產品經理，廣告 AE..

• 幫助客戶– 找出網站設計或企劃的問題– 提供網站 Usability 的建議– 提供網站企劃及 Prototype Design 的服務– 提供網站企劃的內功心法 / 秘笈 / 工具

3

網站企劃學習的三個大方向

MS Office,Axure RP,Freemind/XMind,Google Analytics,…

資訊架構 ,使用者經驗 ,介面設計 ,資訊設計 ,互動設計 ,品牌與視覺傳達 ,資訊技術應用 .…

Tools Concepts

- 專案管理 工作流程 / 溝通方法- 使用者研究- 製作開發技術 HTML, Flash, PSD..- 行銷文案- SEO 搜尋引擎最佳化- …

Workflow/Skills

心法 秘笈武器

4

把網站當做軟體開發 (10 多年前 )

Richard as a Programmer, SA ( 系統分析師 )

• 首先詢問需求 , 分析需求 , 然後開規格• 撰寫程式• 請美工提供 UI 設計• 再套一次介面• 客戶測試

5

我們的專案流程 ( 採用 UCD)

• 需求訪談分析 , 目標使用者分析• 然後分析競業 , 業主偏好網站 , 品牌訴求• 提供網站定位與發展策略並確認• Mindmap 蒐集腦力激盪的結果• Card Sorting/ Mental Model 發展網站資訊架構• 製作網站 Sitemap, Wireframe, Prototype by Axure RP• Content Auditing

• 網站風格設計並確認• 適時做 User Test• 程式開發 , 內容蒐集• 測試 (Functional Test)• Usability Test• 上線• 績效評估與分析

User-Centered Design

企劃階段

設計開發階段

6

我們目前的「網站企劃」流程Strategy策略規劃

Strategyplanning

phase

Scope需求範疇

•----------- •-----------•-----------•-----------•----------- Requirement

Definition Phase

PrototypeDesign Phase

網頁設計視覺設計

系統開發ImplementationPhase

Visual & PageDesign Phase

context

content users

Skeleton介面設計

Structure架構定義

策略企劃

執行企劃

7

Card Sorting

Mindmap

Mental Model

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry

ProductConfigurators

ProductConfigurators

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry

ProductConfigurators

ProductConfigurators

User Behavior

Content Auditing

Information Architecture

Stakeholder interview

WireframeHTML PrototypeSpecification

Traffic Analysis

現在的流程

8

Card Sorting 卡片排序法

9

Usability Test

10

新竹社服中心 CSSC 專案背景

• 人 : 朋友介紹 , 找人幫忙• 事 : 將手動維護 HTML 改成上稿管理• 時 : 2009/9 月 ~2010/1 月完成 ~2010/3 月上線• 地 : 台北 , 新竹• 物 : http://www.cssc.org.tw, Drupal

11

新竹社服中心網站改版緣由鄒大哥 許老師1

負責窗口

34

NPOCMS 改造競賽5

6

Richard我

2

企劃PM

Drupal

7

8設計師

技術

設計

12

新竹社服中心網站 ( 改版前 )

13

拜訪新竹社服中心

14

新竹社服中心 - 杜華神父石

15

新竹社服中心網站 ( 改版前 )• 維護方式

– 純靜態 HTML 網站– 用 FrontPage 維護網頁– 手動維護連結

• 網站的問題– 缺少好的視覺設計– 網站導覽混亂，不容易了解這個機構– 資訊呈現混亂，重點無法凸顯

• 人員素質的問題– 只有一個人會 FrontPage (兼 )– 只會收發 Email，最多會貼BLOG 文章

16

當時思考的問題• 做好案子 = 大家都滿意

網站訪客 ( 外部使用者 )

容易理解的命名與架構容易找到重要資訊

網站維護人員 ( 內部使用者 )可以輕易新增網頁 /單元可以自行編輯內容可以自動收到民眾的資訊 (捐贈或服務需求 )

我們自己 ( 開發團隊 )可以快速找到共識

17

還有祂

18

做了某些決定• 不使用 WordPress (無法滿足需求 )• 不全部重新寫 code ( 成本太高 )• 採用 Drupal (彈性的 CMS, 據說很厲害 )• 避免開發後的大幅修改

– 因為工程師 / 設計師都是被ㄠ的– 因為台北新竹還是有段距離– 採用 HTML Prototype (Axure RP)– 讓 CSSC接受網站資訊架構 /單元命名的作法 (UCD)

19

多數專案失敗的根源是

溝通過程產生「落差」 對於結論缺少「共識」

20

專案三大成功關鍵因素

共識的建立

資源的掌握 專業程度的高低

21

請預測以下專案品質

對牛彈琴–牛 0%–書生 100%

22

秀才遇到兵–秀才 100%–兵 60%

請預測以下專案品質

23

做了某些決定• 不使用 WordPress (無法滿足需求 )• 不全部重新寫 code ( 成本太高 )• 採用 Drupal (彈性的 CMS, 據說很厲害 )• 必須避免開發後的大幅修改

– 因為工程師 / 設計師都是被ㄠ的– 因為台北新竹還是有段距離– 採用 HTML Prototype (Axure RP)– 讓 CSSC接受網站資訊架構 /單元命名的作法 (UCD)

• 教導客戶如何一起合作完成專案

24

教導客戶如何一起合作完成專案

•教 CSSC– 關於使用者行為的正確認識– 關於技術方案選擇的考慮– 講清楚我們建議的規劃– 專案進行的程序– 雙方應負的責任– 如何蒐集資料– 如何操作維護網站內容 (Drupal CMS)

25

關於使用者行為的正確認識

26

關於技術方案選擇的考慮

27

講清楚我們建議的規劃• Axure RP HTML Prototype

28

講清楚我們建議的規劃• Axure RP Wireframe (doc)

29

專案進行的程序 /雙方應負的責任

30

如何蒐集資料• 整理文字 /圖片內容• 按照 excel 整理資料• 檔案命名方式• 1項 1 個 Word檔案

31

如何操作維護網站內容 (Drupal CMS)

• 測試階段及資料輸入的 training ( 效果不好 )

•遇到問題，隨時補充操作教學

32

採用 Drupal對專案的影響

33

個人心得，僅供參考• 採用 Drupal是否會對專案造成任何限制 ?

– 視覺設計，不受限制– 程式開發，可進行少量 ~ 大量客製化

• Drupal CMS擴充性的彈性很強大• 採用 Drupal等於採用 較佳的 CSS 套版 (被迫 )• 有 Drupal 的熟手 (高手 ) 的幫忙是很重要的

– 否則就要自己練成• Drupal CMS 介面還算友善 • 必須熟悉 Drupal 的系統觀念跟結構• 學習 Drupal

– 難的不是 Drupal CMS 介面，– 而是你得知道找到什麼模組或功能去做什麼事情。

34

另一個案例• 時代基金會 YEF 網站

http://yef.into.webhop.net/

35

如何追蹤我們的訊息 ?• 悠識數位 http://userxper.com

請上網搜尋 “網站企劃”

• 網站企劃 (facebook)http://facebook.com/web.plan

• Axure RP User’s Club (facebook)http://facebook.com/axure.club

• HPX 網站企劃輕鬆聚 (聚會活動 )http://userxper.com/HPX-fb-group/