如何對您的網站進行設計審核

已發表: 2017-06-27

隨著您網站的發展,其設計可能會開始顯得有些陳舊。 請記住,設計趨勢在不斷發展,如果您希望您的網站看起來現代和“新鮮”,那麼能夠發現這些問題非常重要。 此外,您還需要保持設計的所有方面看起來統一(和可用)以提供良好的體驗。

發現和糾正這些問題的最佳方法是對整個網站進行設計審核。 在本文中,我們將教您這些審核是什麼以及它們如何幫助您。 然後,我們將討論一些幫助您進行操作的工具,最後向您展示如何通過三個簡單的步驟進行操作。 讓我們開始工作吧!

什麼是設計審核(以及它如何幫助您)

設計審核是指您坐下來審查您的網站或公司的視覺品牌元素。 在大多數情況下,您正在尋找一致性,但該過程也提供了一個絕佳的機會來檢查您的設計是否仍然看起來很新鮮。

老實說,“審計”這個詞讓整個事情感覺比實際要危險得多。 無論如何,對您的網站進行定期設計審核有幾個好處。 例如:

  • 有機會檢查您的設計。 隨著設計趨勢的流行和過時,您的視覺元素也可能開始顯得有些陳舊。 設計審核可以為您提供現實檢查和升級機會。
  • 查看您的品牌。 大多數網站都有基於多種視覺元素的自己的品牌,例如其徽標、標語、標題圖像等。 隨著時間的推移,這些元素可能會變得不匹配,這反過來又會影響您的品牌形象。
  • 您可以將其作為諮詢服務提供。 如果您有成功進行設計審核的經驗,則可以向其他公司推銷您的服務並幫助他們完成流程。 許多企業都沒有意識到他們提供的好處,所以如果你能說服他們需要他們,那麼機會就成熟了。

在您開始向其他網站提供服務之前,了解每個設計審核的基本步驟是很重要的。 可以想像,在此過程中,您需要一些工具來幫助您,所以讓我們來看看一些最重要的選項。

3 個幫助您審核網站設計可用性的工具

如果您是設計師,您就會知道網上有無數工具可以讓您的生活更輕鬆。 但是,在本節中,我們決定只關注那些可以幫助您審核站點元素並檢查設計中是否存在任何缺陷的內容。 讓我們來看看其中的三個。

1. 瘋狂蛋

Crazy Egg 主頁。

Crazy Egg 是一種分析工具,專注於幫助您找到網站上的問題區域。 它使用熱圖技術使您能夠查看頁面上哪些元素最受關注,哪些元素繪製得不夠。 此外,它還包括幫助您了解用戶是否正在滾動瀏覽您的內容的功能。 Crazy Egg 還為您提供有關訪問者來自何處的寶貴數據,然後根據這些數據細分他們的行為。

從設計的角度來看,這種類型的工具非常寶貴,因為它使您能夠將設計中最需要幫助的區域歸零。 例如,如果您的熱圖顯示一個關鍵的號召性用語 (CTA) 沒有獲得應有的吸引力,您可以在下一次設計審核期間優先對其進行分析。

主要特點:

  • 在您的網站上實施熱圖。
  • 跟踪訪問者向下滾動頁面的程度。
  • 密切關注您的流量來源,並根據這些來源細分您的用戶數據。

價格:每月 9 美元,每年支付 | 更多信息

2. 可用性工具

UsabilityTools 主頁。

熱圖是一個強大的工具,可以幫助您了解用戶的行為,但沒有什麼比實際看到他們如何與您的網站進行交互更重要的了,一步一步。 UsabilityTools 使您能夠通過記錄您的用戶在您的站點上執行的每個操作(包括鼠標移動、表單交互和點擊)來實現此目的。

這聽起來可能有點矯枉過正,但如果您很難弄清楚您網站的哪些元素沒有按照應有的方式吸引用戶,這是識別它們的絕佳方式。 此外,可用性工具可幫助您細分從訪問者那裡收集的所有數據以進行快速分析。

主要特點:

  • 跟踪用戶在您網站上的鼠標移動、點擊和表單交互。
  • 細分您收集的數據以便於分析。
  • 與您團隊的任何成員輕鬆共享錄音。

價格:每月 19 美元 | 更多信息

3. 可用性中心

UsabilityHub 主頁。

最後但並非最不重要的是,我們有 UsabilityHub。 這有點不同 - 它是一個包含多種工具的平台,其中任何一種都可以幫助您成功進行設計審核。

它包括一個五秒測試,它確定用戶是否能記住您網站的設計,以及衡量可用性的點擊和導航測試。 最後,您還可以訪問受眾調查,幫助您確定他們是否喜歡您的設計,以及他們希望看到哪些變化。

主要特點:

  • 使用多個測試來衡量您網站的可用性和您的設計的接受度。
  • 混合和匹配您喜歡的任何測試以滿足您的需求。
  • 自定義您的每個測試以衡量您最感興趣的元素。

價格:每個對您的測試的響應 2.50 美元 | 更多信息

如何對您的網站進行設計審核(分 3 個步驟)

現在我們已經探索了一些您可以使用的工具,是時候討論成功設計審核的步驟了。 根據您的網站和目標,您可能不會使用我們討論過的所有工具——但這取決於您。 讓我們跳到第一步。

第 1 步:收集所有視覺品牌元素

Instagram的主頁。

Instagram 是具有簡單但一致的品牌的網站的一個很好的例子。

在確定您的設計是否存在任何問題之前,您需要收集網站的所有品牌元素。 這樣,您將能夠發現他們的風格之間是否存在任何不協調。

這樣做使您能夠以鳥瞰圖分析所有關鍵品牌元素,並檢查它們是否合在一起(這是我們將在下一步中討論的內容)。 將您的元素聚集在一起可能聽起來沒有必要,但是在您查看整個圖片之前,您的設計中的某些缺陷可能不會變得明顯。

至於您需要收集哪些元素,這裡有一個簡單的列表可以幫助您入門:

  • 您網站的所有格式的徽標。
  • 任何背景和標題圖像。
  • 您在整個網站中使用的所有圖標。
  • 您用於內容的所有字體的示例。
  • 您在整個設計中使用的色調的調色板。

目前,我們建議以您最喜歡的格式保存這些元素。 您可以創建 PDF 以便更輕鬆地共享,或將實體副本傳遞給您的團隊。 一旦您的編譯文件或文檔準備就緒,就可以開始工作了。

第 2 步:分析您網站的視覺元素

Netflix 的主頁。

Netflix 的品牌戰略簡單但始終如一——他們確保盡可能使用他們的標誌。

正如我們之前提到的,第二步是通過你的視覺品牌元素來發現你的設計中的任何不一致或缺陷。

設計(當然)在很多方面都是主觀的,但這並不意味著您網站的風格無法改進。 例如,每個企業都應該呈現連貫的設計風格,讓他們的客戶習慣它,並將其與他們的產品聯繫起來。 網站也是如此——您的徽標、內容和圖像都需要共享相同的風格並保持一致。

讓我們通過一些簡單的技巧來確保您網站的視覺元素在這些方面達到目標:

  • 檢查您的徽標是否在所有頁面上保持一致,如果不一致,請在必要時進行更換。
  • 確保您的背景圖像具有相似的風格,這樣您的頁面和部分之間的過渡就不會刺耳。 如果您發現任何不適合模具的圖像,請更改它們。
  • 確保您的圖標具有相似的風格,如果沒有,請嘗試用單個系列中的替代品替換它們,例如 Font Awesome Icons(可以與 Divi 集成)。

到目前為止,我們只討論了在線元素,但請記住,設計審核可以——而且應該——也涵蓋你的離線視覺元素。 如果您的企業有實體店,您需要收集任何可以拿到的品牌物品(例如小冊子、T 恤和電話卡),並為它們重複第 1 步和第 2 步。

第 3 步:為您的網站創建設計標準手冊

品牌手冊的示例。

Urban Outfitter 的品牌指南手冊講述了是什麼讓他們的品牌與眾不同。

現在是時候為未來做計劃了。 最好的方法之一是為您網站的任何未來設計更改創建規則彙編 - 也稱為設計標準手冊。

本文檔的目的是確保今後您可以將設計工作外包,而無需對其進行微觀管理。 此外,隨著您網站的發展,您的工作團隊可能會增加更多成員。 標準手冊可以幫助他們更好地了解您的視​​覺品牌。 事實上,這是一種非常明智的做法,以至於許多頂級公司都參與其中。

至於要在您的手冊中包含哪些類型的規則,讓我們回顧一些幫助您入門的想法:

  • 包括有關如何使用徽標及其變體的指南(順便說一下,這也是一種常見做法)。
  • 附上貢獻者應該在您的網站上使用的圖像類型的示例,以及有關如何呈現它們的規則以及他們應該避免的內容類型。
  • 如果有多個選項可用,請討論您應該在整個網站中使用的字體,以及在什麼情況下應該使用它們。
  • 提供您想要在設計中使用的按鈕、圖標和其他類似元素類型的示例。

請記住,沒有兩本設計標準手冊是相同的。 您可能需要根據您的網站使用的元素添加更多規則,以及您是否想談論離線品牌。 但是,儘早進行設置不僅可以確保未來的設計審核更順利進行,還可以幫助您更快地為團隊培訓新成員。

結論

隨著時間的推移,大多數網站在設計時需要進行修飾是很正常的。 例如,您的某些元素在視覺上可能無法很好地相互配合,但如果不定期進行完整的設計審核,就很難發現這一點。 更重要的是,這樣做將確保您的訪問者將來繼續在您的網站上獲得良好的體驗。

以下是對您的網站進行設計審核的三個基本步驟:

  1. 收集您所有的在線和離線視覺品牌元素。
  2. 分析您收集的元素。
  3. 為您的網站創建設計標準手冊。

您對如何為您的網站進行成功的設計審核有任何疑問嗎? 在下面的評論部分提問!

Darko 1981 年的文章縮略圖/shutterstock.com