九月 5, 2023 設計與程式

一個好網站該具備什麼樣的條件?

Hsiang L. | HubSpot 數位轉型專家

網站建置

先說說我們為什麼要做網站好了,我們通常做一個網站,不外乎就是滿足我們目前因應市場趨勢,要從線下轉為線上的數位轉型,無論您的產業是服務業、產品業、顧問業。

一個好的網站應該在形式和功能上都表現出色,它應該在視覺上令人愉悅且易於導航。它應該有很棒的設計和一流的用戶體驗,並且在技術上穩定和安全,且具有吸引力、功能性和實用性,更必須滿足用戶意圖並有明確的目標。

網站的進化跟需求

隨著市場的需求,網站已經是我們經營公司最重要的門面之一,對這部分,我們來看看網站需求的進化史:

Graphic illustrating the three evolutionary stages of web design

  1. 我想要有個網站
  2. 我想要有個漂亮的網站
  3. 我想要有個漂亮的網站並且能帶來好的行銷口碑、促進公司營運成長

你發現了嗎?你原本從只需要一個網站,慢慢的衍生你對他的需求,而對於未來的網站,也是如此,一開始我們會對於網站的設計有所要求,但漸漸地,隨著公司慢慢經營成長,你會發現你會遇到很多體驗上、效能上、維護上的問題,陸續湧現,到最後,會希望網站多注重在功能性,可以為你帶來明顯商業成效的網站。

每間公司都需要網站

我們不得不承認現在大部分的人都是透過網路搜尋來找到您,事實上,有數據研究有 76% 的人會在拜訪你的公司或商店之前,先搜索過您的品牌,這就就好比我們想要找附近店家,總是會在 Google 地圖搜索一遍,進而認識他的品牌先,再去拜訪他吧?

就如同您想要認識 Hububble 這間公司,在 Google 上面搜索了 Hububble 或者台灣 HubSpot 代理商之後,第一個會出現的是以下這個畫面:

screenshot_hububble-1

右邊會有 Google 的門市或公司資訊,再來左邊呈現官網的資訊。

這可以讓認識品牌的訪客有良好的體驗,加深你的第一個印象。

那要做到像左右邊這些資訊,是 Google 神通廣大到什麼都知道嗎?

不是的,這些資料都是你要讓 Google 知道,並且告知他你會有什麼資料,Google 雖然平常也會爬網路資料並且建立索引,但若你是品牌或網站的擁有人的話,你可以把 Google 當作秘書一樣,把資料給他,他就會按照你提供的資料,把呈現畫面弄的更好。

一個沒流量的網站,做得再好也沒用。
一個有流量的網站,你就應該好好把握。
因為流量就是商機。

好網站的條件有哪些?

那一個好的網站,應該具備什麼樣的條件才算好呢?
我們先從最大的架構來講起,基本上要達成一個好的網站有非常多的條件。

我把他分成三個面向:

good-website3

  • 要提供好的使用者體驗 - 給使用者看的網站
  • 要提供好的技術性結構 - 給搜索引擎看的網站 
  • 數位轉型中的行銷策略

對於現在的網站以及搜索引擎來說,你要網站排名好,其實很簡單,你只要考慮了解重點:

使用者有良好的體驗,能找到他們所需要的,那你就掌握了這排行的要點,搜索量自然也會上升。

然而,我這邊提到的良好體驗,不一定是設計,也不一定內容,因為這兩個都是相輔相成的,我來解釋為什麼。

網頁設計要能提供好的使用者體驗

使用者體驗不僅是網站設計,還包括你的網站是否能讓使用者帶來快樂的瀏覽體驗,讓他們記住一些東西。

如果您的頁面加載很長時間,這讓他們感到沮喪,因為由於您的配色方案,他們無法閱讀您網站上的文字,或者他們無法點擊您移動網站上的按鈕,這都會影響使用者的體驗。

不是設計好使用者體驗就好,也不是動態有多浮誇,能抓到重點讓使用者瀏覽時感到開心,能夠輕易地找到需要的資訊,這就是好的使用者體驗。

Blog - Good Website_1

品牌識別

要讓使用者使用者體驗好,整個網頁設計就必須要有完整一致的感覺,讓他從進到官網,或者從廣告進來到其中一個頁面來,直到他送出他的第一個表單或接觸點之前,都必須讓他感受到你品牌的特質,就如對方到您的公司或店裡來,您會花很多心思在空間裝潢是一樣的概念,一個品牌可以給顧客留下好的印象。

在網站中,我們需要考量的是,網站的品牌識別如何跟線下的是一致的呢?

這很簡單,就好比空間設計來說,每一張桌子、椅子、燈管、擺飾,都會突現出你店裡的風格。而從網站中,我們可以從不同的網站元素來保持一致,如:按鈕、圖片、插圖、圖示、動態、字體大小等等的,都可以達成這個目的。

我們的重點是希望可以讓訪客這邊能強烈的感受到你的品牌風格,但又在不干擾他的使用體驗下,給他留下一個很好的印象。

設計規範 Style Guide

當我們在開啟一個設計專案的時候,在 UX 以及 UI 的設計領域裡,設計規範扮演了相當重要的角色,有了這個之後,才能將品牌視覺跟體驗融合成一個。

但我想強調的是,品牌的設計規範,跟網站的設計規範兩個是不同的唷。

我們會遇到客戶大部分只有品牌的設計規範,但是對於網站的設計規範沒有概念,那請問這兩個是一樣的嗎? 不~ 這兩個是有很大的差異的!

品牌的 Style Guide 會著重在於 Logo 的用色、對比、印刷等使用方式。

而在網站的 Style Guide 多半結合了品牌的 Style Guide 之後,還會有一個很重要的 UI Style Guide,這裡面就包含了許多網站的元件,如按鈕、連結、大小標體、內文文字大小、顏色、表單等設計的統一,除此之外,插圖、圖示、以及動態等的一致也是相當重要。

唯有將這兩個結合,才能將品牌融入網站合一體,讓訪客有個完整又一致的數位體驗。

以下是我們網站規範的參考:

  • bh-Colors網站設計-顏色規範
  • bh-Typography網站設計-字體規範
  • bh-Button網站設計-按鈕規範
  • bh-Forms網站設計-表單規範

網站效能與速度

網站評測工具

有數據指出,太慢的網站會讓你流失掉 75% 的訪客。

我常常遇到很多詢問是關於網站的效能不好,大部分都是因為網頁的動態速度,以及整體設計太過於強烈,導致使用者可能無法在一開始的時候就找到他們需要的資訊,或者是要找一個東西都要 1~2 秒以上的話,使用者很容易失去耐心而離開這個網站。

效能在體驗上是個非常重要的一環

想像一下,就如對方到您的店裡來的時候,都沒有店員願意服務,或者怠慢了這個訪客,是否我們就流失掉這個商機了呢?

所以網站的效能跟速度很重要,反而要如何如何在設計以及程式中取捨,會是個很大的挑戰。

我有遇過很吃動態的網站,這基本上 80% 的 SEO 策略都是失敗的,或許在品牌識別上他是非常成功的,但這也比較適合那些可能原本就知道他們網站的人,但至於要透過自然搜索排上去的話,需要很有技巧。

以下我舉出一些會影響到網站效能的關鍵。

網路速度

你家的網路會影響到整體網站的數據,為什麼?其實 Google 現在的 SpeedTest 分數會去算出平均拜訪你網站的人的整體數據,好比說,你的受眾若都是東南亞國家,用手機上網的使用者的話,那麼分數就是建立這個依據上,並且提供你修改優化的建議。

主機

主機的規格會影響到效能,這個主機簡單的來說就是你的電腦,當你的網站架在一個規格強大的電腦上時,效能自然就會好,相同的,若網站架在一個規格比較簡陋的電腦上,當你的網站遇到比較大的流量的時候,很容易就因為這樣掛掉。

我通常都會以房子來解釋主機的事情,基本上我會這樣分:

  • 很多市面上一年 4-5 千塊的主機基本上都是雅房、套房
  • 要租到整層或別墅等級的,基本上沒有上萬或幾十萬是跑不掉的

為什麼?雅房與套房的裝潢,是否房東都幫你處理好了?其實你可以一卡皮箱就進去住,但因為空間地方小,水管與其他租客共用,好比你安排了一場在你家辦生日趴踢的時候,邀請了數十人來你家的概念是一樣的,要煮飯、上廁所等等,因為跟大家都是共用同一條水管,所以整體上會卡卡的。相反的,若你是租整層或別墅等級的房子,因為水管跟空間都大,所以辦了一場生日趴踢的時候,也不會遇到大家都要擠在同一個空間上的狀況,效能跟速度都會順暢許多。

那為什麼費用會差這麼多?其實道理很簡單。

雅房跟套房的優缺點就是便宜、有事找房東,但限制多,跟共享主機是同樣的概念。

整層或別墅的優缺點就是貴、什麼都要自己處理,跟獨立自架主機是同樣的概念。

載入檔案數量與大小

一般來說,當你的檔案越大越多的時候,在瀏覽器中的加載所需的時間就會越長,雖然說你家的網路可能會很快使得可以在更短的時間內加載這些檔案更快,但是並不是每個人的狀況都與你一樣,況且,這些加載檔案的體驗對於機器人來說是非常重要的,我有遇過因為檔案太大,加載速度慢,分數也會降低,這都會連帶影響到你的頁面效能跟 SEO 排行的成效。

所以必須花時間盡可能的優化這些檔案,例如縮小圖檔,簡化程式碼等的可能,就可以加快網頁載入的效能了。

插件

確實,很多平台如 WordPress 在使用插件的情況下,可以輕鬆的在你網站上添加功能…… 尤其是如果你是在沒有太多技術知識的情況下自行維護網站。但是,你的網站上若有太多插件,或者選擇太多插件的情況下,反而會降低網站速度。

每個插件都有不同的功能跟特性,有些會跟資料庫做連動,而有一些會在設計或互動(前端)增加功能,但是基本上,每個插件背後裡都會送出許多與資料庫請求的連結,也會額外加入許多不必要的檔案,如 Javascript、CSS 等等的,這些若你本身不是網站開發的程式人員,很容易會被忽略,甚至不知道這個帶來的影響會對網站有多大。

瀏覽器

瀏覽器會影響網站加載速度,舊版本的瀏覽器更會因為難以加載某些檔案或程式碼的關係,導致不兼容。

而這些都是機器人可以幫你算出來的,自然這些會因為你受眾常用的瀏覽器跟數據有關,進而去推算出你的分數而影響排行榜。

網站體驗的影響

若您還不知道,其實 Google 在去年 (2020) 的 5 月 5 日有發佈關於衡量網站使用者體驗的核心指標 (Core Web Vitals)。

網頁效能的重要性
網頁載入時間越長,對跳出率的影響就會越大。舉例來說:
如果網頁載入時間從 1 秒增加到 3 秒,跳出率就會增加 32%
如果網頁載入時間從 1 秒增加到 6 秒,跳出率就會增加 106%

而這個指標裡面有涵蓋三大重點:

  • 網站載入速度:LCP
  • 網頁互動性:FID
  • 視覺穩定性:CLS

執行結果後,系統會根據網址在特定類型裝置上的效能,套用「不良」、「需要改善」和「良好」標籤。

報表狀態結果會有以下的分數標準:

  速度良好 需要改善 速度低落
LCP 2.5 秒以下 4 秒以下 超過 4 秒
FID 100 毫秒以下 300 毫秒以下 超過 300 毫秒
CLS 0.1 以下 0.25 以下 超過 0.25

 

您或許會有疑問說,這些分數又跟設計還有效能有何關係?我來說明一下,好比說:

  • LCP 的速度過高,超過 4 秒,這跟我以上所涵蓋的主機、程式寫法、載入檔案數量多寡其實是息息相關的。
  • 網頁互動性 FID 過高,可能會因為會跟我們的設計以及行銷策略有關係,好比按鈕放在很不明顯,亦或者頁面過多的按鈕導致使用者不清楚要點擊哪個,都會影響到這分數。

所以,如今的網站其實重點已經不只是在塞關鍵字,而是希望你的網站能夠給使用者帶來多少價值?

網頁使用者體驗本來就是 Google 現在極力在推廣的項目,從原本早期的行動裝置友善、AMP 頁面、安全性瀏覽、HTTPS 安全協定等,都能感受到 Google 想要宣導的目的。

而 Core Web Vitals 開啟了另外一個衡量網站的項目,讓製作一個好網站多了一個新的指標。

給搜索引擎看的技術性優化

其實很多人都會忽略掉一件事,總是網站做好給人家使用、給人家看就好。

行銷部分透過廣告或其他方式就好了,但是其實你知道嗎?好的自然流量一年可以省下你好幾百萬的廣告費。

這也是大家所想要致力想要提升的 SEO 排行,在這之前,你要知道搜索引擎是怎麼被收錄的,因為這些爬蟲並不會看得懂網站的內容,所以他必須透過各種項目以及程式給他的資訊,這樣他才能知道把網站收錄起來,當使用者打關鍵字的時候,給出適當的內容或結果出來。

當你給爬蟲更多資料時,你被收錄的機會就越高。

Blog - Good Website_2

除了我上面提到的 Core Web Vitals 的體驗相當重要之外,其實還有許多指標提供參考:

  • 網頁的標體跟敘述(Open Graph Meta)有沒有寫上?
  • 透過 JSON-LD 的方式可以讓 Google 或 Bing 更清楚的知道你網站其中的內容是關於哪些,例如:
    • 評價
    • 價格
    • 作者
    • 上映日期
    • ... 等等
  • 網站的 HTML 結構,如 H1, H2, H3 等的寫法架構,太多太少都不好
  • 網站的連結,如:canonical, noopener, nofollow 等
    • canonical URL 很重要的原因是因為要避免重複的內容太多,有些時候我們的網頁會可能需要到重複的內容,但是 Google 會特別獎勵或提高有價值的內容,為了避免被處分或因為重複頁面過多,在 meta 上面補上 canonical URL,會讓 Google 知道你重複的頁面是同一頁,來確保頁面的獨特性。
  • 在 Google Search Console 遞交 Sitemap
  • 修正網站的問題
    • 避免死連、死圖等

當然還不止這些,每個網站的問題都可能會在開發或經營時,面臨到的問題都不同。

Hububble 有提供免費諮詢以及網站健檢服務,若您對於您網站想要了解進一步的優化項目,可以留下以下資訊,我們會有專人與您聯絡,評估您目前的網站。

讓人家認識你的數位行銷

行銷是需要長期經營的,不是一次成功就完成了。
在數位行銷中,你的競爭對手只會一直增加,不會減少,所以時時並進以及時常維護才是數位行銷的成功之道。

Blog - Good Website_4

數位行銷( Digital Marketing )包含了在電子裝置或網路上所做的一切行銷手段,人們利用數位上的管道——例如搜尋引擎 ( Google、Yahoo )、社群媒體 ( Facebook、IG )、電子郵件、網站、一頁式銷售頁面、或 APP 等——去接觸到潛在目標受眾。

想了解更多數位行銷的知識請參考:數位行銷(Digital Marketing)一篇就懂

SEO 搜尋引擎最佳化

優化我們的網站使它在搜尋結果的排列順位出現地越前面的這個程序,就是所謂的「Search Engine Optimization( SEO )」,在搜尋結果頁面越前面出現,被看到的機會就越大,進而自然搜尋流量也會增加。

部落格經營

你不應該在沒有制定明確內容策略 ( Content Strategy ) 的狀況下就直接開始創造內容。有了內容策略 ( Content Strategy ),你可以保持在正軌上,並確保你所創造的每個內容都具有明確的目的。Blog - Content creation_1 (1)

了解更多內容行銷的知識請參考:內容創作指南

延伸閱讀:什麼是 HubSpot?HubSpot 全中文功能完整指南

廣告投放

95%的流量都集中在排在第一頁的網站,當您的網站無法以自然排序出現在第一頁,你就必須通過有效的廣告來輔助您的社群行銷和 SEO 工作。

廣告投放可以幫助您更快地被看見,會投廣告不代表你投對廣告,許多行銷人的問題在於,「無法在對的時間,提供給對的人對的資訊」,若您無法精準的選擇受眾,透過廣告只帶來低品質的流量,忽略了受眾人物畫像的重要。使得花費許多廣告預算將消費者導流到網站,卻無法把握時機提供對消費者有價值的品牌資訊,投了廣告卻形同亂槍打鳥,既無法發揮效用、又浪費成本。

一個好的廣告能夠幫您增加轉換率,給對的客戶在對的時間給他們對的廣告內容,進而增加廣告轉換率達到您的商業目標。

社群經營

經營社群的主要目的在於與目標顧客建立連結,增加信任感,便可透過產製內容引發目標顧客的興趣,使他們產生購買慾望。社群是唯一可以新客戶與舊客戶聯繫的渠道,也是幫助網站引流更多流量的方式。

SEO 好的秘訣是什麼?

數據驅動網站持續優化

新網站已經上線了,並有真實的用戶與該網站的互動紀錄,這將提供有價值的反饋。

這些寶貴的數據將顯示用戶感興趣的部分,將您的用戶瀏覽行為作為網站持續優化的根據,集中精力對高價值的用戶持續優化網站體驗,以支持您實現商業目標,再加上整合的市場行銷和銷售工作,可以不斷進行調整和更新,進而增加流量和優化轉化率。

創建一個出色的中小型企業網站可能並不像您最初想像的那麼簡單。

Hububble 有十年的網站建置經驗,幫助您建置「一個好網站」我們擅長全面性的規劃打造完整且能達到行銷最大化的網站,讓網站為企業帶來更多的銷售機會。現在就把複雜架設網站的所有項目,交給 Hububble。

contact us 3

Related Articles

Share this on

Subscribe to
Learning Hub

掌握趨勢、深度學習,獲得數位產業最佳的執行觀念,使用內容行銷捕捉廣大的網路受眾,一起學習成長 !