資訊架構混亂
導覽按內部部門而非訪客目的劃分,令人找不到最基本的服務、地址或報名資訊。
Case · 網站作品
自 2006 年起為不同企業與機構度身訂造網頁,橫跨飲食老字號、零售、非牟利病人組織與青少年運動培訓。以下為具名客戶作品,以及每個項目在資訊架構與內容規劃上要處理的問題。
Selected work.
Case 01
根據公開資料,恭和堂是香港歷史最悠久的龜苓膏專門店。配方源自清代太醫嚴綺文,其後人嚴永昌、嚴繼昌於 1904 年香港開埠初期來港,在現今油麻地一帶創立恭和堂行醫並沿用祖傳方法製作龜苓膏。品牌以「恭遵古法龜苓製、和解頑痀氣血調」為宗旨,現已傳承至第三、第四代,並在香港、九龍多區設有分店。
百年老字號的難處,在於歷史很長但不能變成一篇讀不完的長文。訪客可能是想了解龜苓膏功效的新客、想找最近分店的熟客,也可能是查詢產品或合作的商業對象。網站需要在同一個版面上,同時照顧品牌敘事與即時查詢兩種完全不同的需求。
A century of craft, clearly told.
Clear structure, easy to update.
Case 02
樂悠居是我們自 2006 年以來度身訂造網頁的知名客戶之一。這類企業網站的價值,不在於首頁有多少特效,而在於訪客能否在幾秒內判斷「這裡提供什麼、適不適合我、下一步怎樣聯絡」。
版面可以在後期調整,但資訊架構一旦定型,日後新增服務或內容就會處處受限。我們的做法是在 Plan 階段先鎖定頁面清單與標題層級,讓網站可以隨業務擴充,而不需要每次都推倒重來。詳見數碼方案與合作流程。
Case 03
根據公開資料,香港肝臟移植協康會是一個非牟利組織,於 1998 年 5 月成立,由一群已經接受和正在輪候肝臟移植的人士、曾經捐出部分活體肝臟的親友,以及他們的家人組成。組織的成立背景,是瑪麗醫院於 1991 年 10 月成功進行本港第一宗肝臟移植後,成功移植者人數持續增加,病友需要一個屬於自己的組織互相扶持。
非牟利機構網站同時服務多種使用者:病友與家屬需要可信賴的資訊與情緒支援,義工與捐款者需要參與渠道,傳媒與公眾則需要機構背景。若導覽按內部部門劃分,各類訪客都會迷路。正確做法是按「使用者想做的事」分流。
Information people can act on.
Browse · Compare · Contact
Case 04
新之城同屬我們的知名客戶之一。以產品或項目為主的網站,最考功夫的地方是分類架構:分類太少,訪客要在長列表中大海撈針;分類太多,反而增加選擇成本。
如果客戶開始頻繁詢問價錢與存貨、或訂單以電郵與電話重複處理,就是時候考慮把展示型網站升級為可落單的網上商店系統,把產品、購物車、訂單、客戶、存貨與付款集中在同一個後台。
Case 05
根據公開資料,阿仙奴足球學校源自英格蘭阿仙奴足球會於 1985 年開辦的足球課程,由最初的社區計劃逐步擴展至世界各地,現時在多個國家設有分校,而香港分校於 2010 年成立,為青少年提供恆常足球訓練。
課程類網站的訪客九成是家長,而家長的決策問題非常具體:小朋友的年齡合不合適、在哪裡上課、幾點、怎樣報名、下一期何時開班。這些資訊必須在一兩次點擊之內找到,而且每期更新都要即時反映,否則網站會很快失去可信度。
Ages, venues, times — in one look.
不同行業的表面需求各異,但真正拖慢網站成效的問題其實高度重複。
導覽按內部部門而非訪客目的劃分,令人找不到最基本的服務、地址或報名資訊。
所有服務擠在一頁,既難閱讀,亦令每組關鍵字互相稀釋,難以在搜尋結果取得位置。
先做電腦版再壓縮,導致手機上文字過細、按鈕過近、表單難以填寫。
訪客看完內容卻不知道該做什麼。每一頁都應有清楚的查詢、致電或了解詳情路徑。
後台難用是主因。網站架構應讓負責同事能在無需技術支援下完成日常更新。
寄存、憑證、備份與內容更新缺乏固定流程,直到網站或電郵中斷才發現問題。
同樣是一個網站,行業不同,優先次序就完全不同。
How to evaluate
好看只是門檻,以下幾點才分辨得出網站能否長期運作。
01
一個十頁的形象網站與一個兩百頁的產品網站,難度不在同一級別。看作品時應比較與你相近的內容規模。
02
直接在手機上開啟作品網站,試著找地址、找服務、填表單。設計圖看不出的問題,實測十秒就知道。
03
每頁是否只有一個 H1、標題層級是否有邏輯、服務有沒有獨立頁面、內部連結錨文字是否具意義。這些是 SEO 的前置條件。
04
網站要用好幾年。設計公司能否在三年後仍然接得到你的電話,比一份漂亮的提案更實際。
Process
每個案例都經過同一條流程,差別只在內容量與功能範圍。
01
了解業務、受眾與網站要達成的事,並檢視現有網站的問題與必須保留的內容。
02
整理網站架構、頁面清單、標題層級與功能範圍,同時定下關鍵字與內部連結方向。
03
建立符合品牌與轉換目標的版面,同步確認桌面與流動裝置的呈現。
04
以 HTML5 製作網站、商店系統或所需功能,處理表單、後台與結構化資料。
05
上線、寄存與電郵設定、轉向規則、提交 sitemap,以及後續優化與支援。
Checklist
內容準備是時間表中最常被低估的一環。以下資料愈早整理,進度愈可控。
FAQ
涵蓋客戶背景、行業做法、項目流程、評估方式與收費考慮。
我們成立於 2006 年,主要替不同客戶度身訂造網頁,知名客戶包括恭和堂、樂悠居、香港肝臟移植協康會、新之城,以及阿仙奴足球訓練學校。這些項目橫跨飲食老字號、零售、非牟利病人組織與青少年運動培訓等不同性質的機構。
根據公開資料,恭和堂是香港歷史最悠久的龜苓膏專門店,嚴氏後人嚴永昌、嚴繼昌於 1904 年在油麻地創立,配方源自清代太醫嚴綺文。品牌現已傳承至第三、第四代,並在香港、九龍多區設有分店。這類百年老字號的網站,重點在於把歷史脈絡、產品理念與門市資訊清楚呈現。
根據公開資料,香港肝臟移植協康會是一個非牟利組織,於 1998 年 5 月成立,由已接受和正在輪候肝臟移植的人士、曾捐出部分活體肝臟的親友,以及他們的家人組成。組織的成立背景,是瑪麗醫院於 1991 年 10 月完成本港首宗肝臟移植後,成功移植者人數增加,病友需要一個互相扶持的平台。
根據公開資料,阿仙奴足球學校源自英格蘭阿仙奴足球會於 1985 年開辦的足球課程,由最初的社區計劃逐步擴展至世界各地,現時於多個國家設有分校,香港分校於 2010 年成立。這類課程網站的核心,是讓家長在最短時間內找到年齡分組、地點、時段與報名方式。
企業網站會隨年月改版、更換供應商或調整網域,舊有連結未必仍然指向我們當年交付的版本。與其提供可能失效或已被覆寫的連結,我們選擇說明每個項目要處理的問題與設計方向。如你想了解某個項目的具體細節,歡迎直接聯絡我們。
可以。部分項目涉及客戶內部資料或未公開的改版計劃,未必適合公開展示,但我們可以在會面時按你的行業提供相關參考,並說明當時的處理方式與考慮。請致電 3115-0301 或電郵 [email protected]。
這裡列出的是可具名公開的客戶。部分項目屬內部系統、未公開的改版,或客戶不希望對外展示,因此沒有在網站上列出。這不代表我們的經驗僅限於這五個項目。
老字號的最大資產是時間累積的信任,網站不應把它包裝成一間新公司。做法上會建立清晰的品牌故事區、把歷史沿革整理成可閱讀的脈絡、突出產品的傳統工藝與現代標準,並確保門市地址、營業時間與聯絡方式易於查找。視覺上宜克制,讓內容本身承擔說服力。
非牟利機構的網站通常同時服務多種使用者:受助人、家屬、義工、捐款者與傳媒。因此導覽要按「使用者想做的事」分流,而不是按內部部門劃分。內容上偏重可信賴的資訊、活動消息與聯絡渠道;技術上則要特別重視文字清晰度、字級可讀性與無障礙操作。
是決策資訊的完整度與更新速度。家長或學員最想知道的是年齡分組、上課地點、時段、收費與報名方法,這些資訊必須在一兩次點擊之內找到,並在每期課程更新時同步。網站架構要方便日後自行更新,否則資訊很快就會過時。
不一定。如果主要收入來自門市,網站的首要任務可能是產品展示、分店資訊與品牌建立;待需求成熟才加入購物車與付款。我們的網上商店系統可在稍後階段接上,涵蓋產品、購物車、訂單、客戶、存貨與付款管理。
可以。雙語網站需要在規劃階段就決定語言切換方式、網址結構與內容維護分工,因為每次更新都要處理兩套內容。若其中一種語言長期不更新,反而會影響專業形象,所以建議按實際維護能力決定語言數量。
非常重要。香港大部分本地查詢都在手機上發生,餐飲、零售與課程類尤其明顯。我們的網站以 HTML5 製作並兼容流動產品,設計時會同時檢視桌面與手機的版面,而不是先做電腦版再壓縮。
流程分五步:Discover 了解業務、受眾與網站要達成的事;Plan 整理架構、頁面與功能範圍;Design 建立符合品牌與轉換目標的版面;Develop 製作網站、商店系統或所需功能;Launch 上線、寄存、優化與後續支援。每一步確認後才進入下一步,詳見數碼方案頁。
最有幫助的是:現有網站網址與希望保留的內容、公司或機構簡介、服務或產品清單、可用的相片與標誌檔案、想參考的網站例子,以及上線的目標時間。內容準備是項目時間表中最常被低估的一環,愈早開始整理,進度愈可控。
時間主要取決於頁面數量、功能複雜度與內容準備速度,而非設計本身。實務上,最常見的延誤來自內容未備妥與內部審批來回,而不是製作。我們會在 Plan 階段先鎖定頁面清單與內容負責人,讓時間表有實際依據。
我們使用較新的 HTML5 技術及 jQuery,能兼容多個瀏覽器及流動產品,並會替客戶進行網頁優化。需要客戶自行更新內容的項目,可採用 WordPress;涉及訂單與存貨的項目,則採用我們的網上商店系統。技術取向詳見網頁設計服務頁。
如果處理得宜,不會;處理不當則會。風險主要來自三方面:網址改變而沒有做 301 轉向、原有內容被大量刪減、以及網站結構改動後內部連結斷裂。正確做法是先整理現有頁面清單與新舊網址對照表,保留並改寫既有內容。
沒有固定年期。應該考慮改版的訊號包括:手機上操作明顯不便、載入速度慢、後台無法自行更新、業務與服務結構已經改變、或網站無法支援新的推廣需求。若只是內容過時,優先處理內容更新即可,未必需要整站重做。
建議看五點:一、作品是否涵蓋與你相近的內容量與複雜度;二、網站在手機上的實際表現,而非只看設計圖;三、內容結構是否清晰,抑或只有漂亮視覺;四、公司是否仍在營運並能提供長期支援;五、對方能否說明每個項目要解決的問題。單看好看與否,判斷力很有限。
舊版網站在改版後通常不再保留公開存取,部分客戶亦不希望展示過往版本。更實際的評估方式,是了解我們如何處理資訊架構、內容整理與上線後的支援,這些才是決定網站能否長期運作的因素。
可以看到基礎,但不能只看排名。值得檢查的是:每頁是否只有一個 H1、標題層級是否有邏輯、每項服務有沒有獨立頁面、內部連結的錨文字是否具意義、網址結構是否清晰、有沒有 sitemap 與結構化資料。這些是排名的前置條件,比一句「我們能做到第一位」可靠。相關服務見SEO / SEM 頁。
看內容與版面是否互相貼合。模板網站的特徵,是版面固定而內容被硬塞進去:例如三欄格式卻只有兩項服務、或大段文字被壓縮在細小區塊。度身訂造的網站,版面會跟隨實際內容量與業務結構而變化。
有。我們提供網頁寄存與電郵服務,並與網站設計、電子商貿一併規劃長期支援,包括寄存與域名續期、SSL 憑證、備份、內容更新與運作檢查。網站上線之後才是真正開始。
可以。我們會先確認現有寄存環境是否支援新網站所需的程式版本與設定。若現有環境有明顯限制(例如速度、郵件到達率或無法安裝 SSL),我們會說明影響,讓你自行決定是否搬遷。
有。日常內容更新、系統與外掛更新、備份與還原測試、SSL 與域名續期監察、表單與電郵收發測試,都屬於長期支援範圍。這些工作單項都不困難,但缺乏固定流程就容易被忽略,直到出事才發現。
我們不用一口價套餐,因為同樣叫「一個網站」,工作量可以相差數倍。主要影響因素是頁面數量與內容準備、功能範圍、設計程度、語言版本、SEO 範圍與後續支援。把這幾點寫在查詢時提供,可以更快得到貼近實際的報價。
企業網站的真正成本在往後幾年的維護、改版與寄存。自 2006 年營運至今,代表我們處理過網站搬遷、系統升級與流動裝置世代更替等長期問題,也代表你日後找得到當初做這個網站的人。公司背景見關於我們。
我們除了製作網頁,亦會替客戶進行網頁優化,當中網頁推廣與 SEO 優化屬於我們提供的專業服務,讓客戶除了擁有優質網頁,還能在搜尋器內排位更前。實際範圍按每個項目的需要而定。
可以。常見做法是在網站設置訂閱或查詢表單收集名單,再以 EDM 向現有客戶、會員及指定群組發送最新優惠、產品、服務與活動資訊。發送前必須確保寄件域名的驗證設定正確,並在訊息內提供取消接收選項。
可以。我們的辦公室位於九龍新蒲崗大有街 34 號新科技廣場 11 樓 16 室。建議先致電 3115-0301 或電郵 [email protected] 預約,讓我們預先了解你的項目性質並準備相關參考。
在聯絡頁填寫姓名、電郵、電話、現有網站與項目內容,或直接致電 3115-0301。我們會先了解你的業務目標、內容現況與時間表,再建議合適的服務組合與流程。
我們 BIC Web Design 成立於2006年 主要替不同客戶度身訂造網頁, 當中知名客戶包括恭和堂、樂悠居、香港肝臟移植協康會、 新之城、阿仙奴足球訓練學校等
這些項目的內容量、使用者類型與更新頻率各不相同,但處理方式一致:先弄清楚訪客來到網站要完成什麼事,再決定架構、版面與技術。我們使用比較新的 HTML5 技術及 jQuery,能兼容多個瀏覽器及流動產品,並會替客戶進行網頁優化,當中網頁推廣與 SEO 優化服務更是我們提供的專業服務,令客戶除了擁有一個優質的網頁外,還能夠於搜尋器內排位更前。
如果你正在比較幾間網頁設計公司,歡迎把你現有網站的問題與目標告訴我們。我們可以先指出哪些屬於內容問題、哪些屬於結構問題、哪些屬於伺服器問題,再討論是否需要重做。