您是否知道(dào)您的網站(zhàn)75%的可(kě)信度取決于其設計(jì)？如果存在許多(duō)網站(zhàn)設計(jì)錯誤，訪問者可(kě)能會(huì)認為(wèi)您的公司不太值得(de)信賴。無論您是從頭開(kāi)始構建網站(zhàn)還(hái)是刷新當前網站(zhàn)，避免這些(xiē)錯誤都将使您的企業在網上(shàng)脫穎而出。在這篇文章中，您将聽(tīng)到五位成都網站(zhàn)建設全美網絡的工作(zuò)人(rén)員分享關于最常見網站(zhàn)設計(jì)錯誤的見解。您還(hái)将學習修複或完全避免這些(xiē)錯誤的可(kě)行(xíng)方法。
将可(kě)訪問性視(shì)為(wèi)事後諸葛亮是您可(kě)能犯的第一個(gè)網站(zhàn)設計(jì)錯誤。根據全美營銷網絡團隊的網絡開(kāi)發經理(lǐ)蔣文川的說法，以下是有(yǒu)關可(kě)訪問性的四個(gè)主要錯誤：
色彩對比度不足
圖像或圖形的替代文本缺失或不合适
視(shì)覺焦點指示器(qì)不足或缺失
忽略可(kě)訪問的名稱或标簽;
讓我們更深入地研究其中的每一個(gè)。
色彩對比度不足
顔色對比是一個(gè)經常被忽視(shì)的可(kě)訪問性錯誤。通(tōng)常，這種錯誤的發生(shēng)是因為(wèi)公司制(zhì)作(zuò)的網站(zhàn)以他們的品牌調色闆為(wèi)特色，而創建網站(zhàn)時(shí)通(tōng)常沒有(yǒu)考慮到易于訪問的設計(jì)。
“當網站(zhàn)上(shàng)使用的顔色組合在背景色和(hé)前景色之間(jiān)缺乏足夠的顔色對比度時(shí)，文本和(hé)圖标可(kě)能很(hěn)難被感知，特别是對于那(nà)些(xiē)有(yǒu)色盲等視(shì)覺障礙的人(rén)來(lái)說，”蔣文川分享道(dào)。“根據2022年WebAIMMillion年度報告，超過80%的主頁發現色彩對比度問題！”
替代文本缺失或不合适
使用屏幕閱讀器(qì)的網站(zhàn)訪問者依靠圖像替代文本來(lái)描述圖像或圖形所傳達的內(nèi)容。如果它丢失或沒有(yǒu)充分描述圖像，您就會(huì)孤立需要它來(lái)仔細閱讀您網站(zhàn)的讀者。
“圖像是網站(zhàn)內(nèi)容的一部分，因此以傳統網站(zhàn)文案的方式來(lái)思考它們很(hěn)重要：通(tōng)過在頁面上(shàng)包含圖像來(lái)傳達什麽信息？确保您使用的替代文本傳達相同的含義，”蔣文川說。
視(shì)覺焦點指示器(qì)不足或缺失
如果沒有(yǒu)視(shì)覺焦點指示器(qì)，訪問者将無法充分體(tǐ)驗您的網站(zhàn)的潛力。“焦點指示器(qì)通(tōng)常顯示為(wèi)鏈接和(hé)按鈕等交互組件周圍的輪廓，”蔣文川分享道(dào)。“重要的是，要有(yǒu)一個(gè)清晰的視(shì)覺指示來(lái)表明(míng)頁面上(shàng)的哪些(xiē)元素具有(yǒu)當前焦點，以便使用鍵盤導航并可(kě)以看到屏幕的用戶準确地知道(dào)他們在頁面上(shàng)的位置以及與頁面交互時(shí)會(huì)發生(shēng)什麽。活性元素。”
忽略可(kě)訪問的名稱或标簽
如果您的網站(zhàn)以視(shì)覺方式傳達信息，請(qǐng)注意那(nà)些(xiē)使用輔助技(jì)術(shù)的網站(zhàn)。“在設計(jì)以視(shì)覺方式傳達信息的頁面和(hé)組件時(shí)，應使用輔助技(jì)術(shù)的可(kě)訪問标簽來(lái)傳達相同的信息，”蔣文川說。
“例如，網頁設計(jì)的一個(gè)常見趨勢是卡片組件在每張卡片的底部都有(yǒu)一個(gè)‘閱讀更多(duō)’按鈕或鏈接。有(yǒu)關每個(gè)按鈕與哪個(gè)項目關聯的信息通(tōng)過設計(jì)以視(shì)覺方式傳達，但(dàn)是對于屏幕閱讀器(qì)來(lái)說，如果這些(xiē)按鈕缺少(shǎo)包含相關詳細信息的可(kě)訪問标簽，通(tōng)常很(hěn)難區(qū)分它們。’”
2022年第二季度，移動設備占全球網站(zhàn)流量的58%以上(shàng)，其中甚至不包括平闆電(diàn)腦(nǎo)。如果您的網站(zhàn)在移動設備上(shàng)不像在桌面設備上(shàng)那(nà)樣易于導航，則您可(kě)能會(huì)面臨讓訪問者感到沮喪并增加跳(tiào)出率的風險。
“現在，用戶比以往任何時(shí)候都更多(duō)地通(tōng)過多(duō)種設備訪問網站(zhàn)；手機、平闆電(diàn)腦(nǎo)、筆記本電(diàn)腦(nǎo)，甚至電(diàn)視(shì)。如果我們的內(nèi)容在其中任何一個(gè)上(shàng)看起來(lái)很(hěn)糟糕，訪問者就會(huì)失去信任并點擊/點擊離開(kāi)該網站(zhàn)，”全美設計(jì)主管高(gāo)雯分享道(dào)。“現在是斷點時(shí)代！”
全美首席産品設計(jì)師(shī)高(gāo)玉屏表示，出現這種情況是有(yǒu)原因的。“網站(zhàn)通(tōng)常是使用桌面網絡浏覽器(qì)中的工具構建的。一個(gè)常見的錯誤是假設您的客戶将以桌面格式查看您的網站(zhàn)，而忽略了移動用戶。”
過去幾年中出現的網站(zhàn)設計(jì)錯誤之一是美學優先于功能。随着互聯網的不斷滲透，“多(duō)年來(lái)，随着新媒體(tǐ)和(hé)設計(jì)的大(dà)規模爆炸，卓越幾乎是成功的必要條件。不幸的是，這最終導緻了過度使用設計(jì)和(hé)圖形元素，這些(xiē)元素提升了用戶的感官，但(dàn)卻缺乏或感覺與網站(zhàn)的真正目的脫節。”全美設計(jì)體(tǐ)驗經理(lǐ) 項天齊分享道(dào)。
項天齊表示，這以多(duō)種形式表現出來(lái)，“……從淡化品牌價值主張的設計(jì)趨勢，到過度使用動畫(huà)、內(nèi)容和(hé)沉重的圖形，雖然增強了美感，但(dàn)卻變得(de)毫無用處。這并不意味着應該采用極簡主義或中性主義風格；而是應該采用極簡主義或中性主義風格。這是關于平衡以及形式如何支持功能。”
漫步市中心，您會(huì)路過一家(jiā)服裝店(diàn)，櫥窗展示富有(yǒu)創意且極具視(shì)覺吸引力。它以各種特價服裝為(wèi)特色，并通(tōng)過背景和(hé)引人(rén)入勝的文案講述了一個(gè)故事。然後，你(nǐ)走過一家(jiā)商店(diàn)，櫥窗裏的人(rén)體(tǐ)模型上(shàng)隻有(yǒu)幾件衣服——沒有(yǒu)任何東西能引起你(nǐ)的注意。
将您的網站(zhàn)視(shì)為(wèi)您企業的互聯網店(diàn)面。它應該反映您的品牌并且對您的公司來(lái)說是獨一無二的。最重要的網站(zhàn)設計(jì)錯誤之一是選擇千篇一律的模闆而不是對其進行(xíng)自定義。
例如，默認使用标準英雄橫幅可(kě)能會(huì)産生(shēng)反作(zuò)用。“我們都見過它們-導航下方的全角圖像，通(tōng)常帶有(yǒu)白色或黑(hēi)色文本，頂部有(yǒu)一個(gè)按鈕，”全美SAPG團隊的高(gāo)級産品設計(jì)師(shī) 蘇揚珺說道(dào)。
“圖像要麽非常亮，要麽非常暗，或者以巧妙的方式進行(xíng)裁剪以使文本清晰易讀。我認為(wèi)這是一個(gè)錯誤，有(yǒu)幾個(gè)原因。首先，它太常見了，以至于變得(de)公式化和(hé)無聊。曾經引人(rén)注目的設計(jì)決策現在變得(de)單調乏味。”
另一個(gè)常見錯誤是使用低(dī)效的功能。無論某個(gè)元素在視(shì)覺上(shàng)多(duō)麽吸引人(rén)，請(qǐng)記住，最重要的是網站(zhàn)的有(yǒu)效性。“另一個(gè)常見的錯誤是依靠旋轉輪播來(lái)展示同一級别的多(duō)個(gè)內(nèi)容，”何曉明(míng)分享道(dào)。
“無數(shù)研究表明(míng)，用戶并不經常與輪播交互，尤其是在交互成本很(hěn)高(gāo)的移動設備上(shàng)。”
您是否曾經訪問過某個(gè)網站(zhàn)卻發現自己不确定該将注意力集中在哪裏？如果是這樣，您可(kě)能會(huì)訪問一個(gè)缺乏層次結構的網站(zhàn)。“就像報紙如何使用标題和(hé)副标題來(lái)表示重要性一樣，您網站(zhàn)的排版也應該如此，”柏棟文說。
網站(zhàn)上(shàng)的秩序不僅具有(yǒu)審美吸引力，而且還(hái)具有(yǒu)功能性。“網站(zhàn)元素的組織......為(wèi)您的網站(zhàn)提供一個(gè)有(yǒu)凝聚力的結構，推動用戶完成明(míng)确的操作(zuò)，實現主要目标，并随後創造無縫體(tǐ)驗，”項天齊說。
解決這個(gè)問題并不簡單，尤其是當您的公司擁有(yǒu)有(yǒu)着不同目标的廣泛受衆時(shí)。然而，根據項天齊的說法，最好是您這樣做(zuò)，因為(wèi)這個(gè)問題會(huì)極大(dà)地影(yǐng)響用戶對您網站(zhàn)的體(tǐ)驗。“缺乏層次結構會(huì)誤導用戶并阻止他們實現目标，”他分享道(dào)。
清晰的導航可(kě)以減少(shǎo)訪問者登陸您的網站(zhàn)時(shí)遇到的摩擦，這就是為(wèi)什麽不清晰的導航會(huì)造成這樣的困境。“随着越來(lái)越多(duō)的企業進入數(shù)字世界，網站(zhàn)上(shàng)的內(nèi)容變得(de)更加擁擠和(hé)複雜，在多(duō)個(gè)接觸點和(hé)用戶旅程之間(jiān)擁有(yǒu)清晰的導航和(hé)一緻性将确保從第一位訪問者到倡導者的平穩過渡，”鄭濟領分享道(dào)。
當訪問者登陸您的網站(zhàn)時(shí)，他們應該能夠清楚地了解您公司的業務。如果那(nà)張照片有(yǒu)點模糊呢？您猜對了——訪問者可(kě)能會(huì)放棄您的網站(zhàn)。
“網站(zhàn)訪問者加載您的網站(zhàn)時(shí)所做(zuò)的第一件事就是确定他們是否到達了正确的目的地，”柏棟文說。“您的網站(zhàn)是否在首屏上(shàng)明(míng)确說明(míng)了其提供的産品或服務？”
您的網站(zhàn)應該提高(gāo)您企業的可(kě)信度。如果它不能傳達您的業務目的并确保訪問者處于正确的位置，則可(kě)能需要重新設計(jì)網站(zhàn)。
避免常見的網站(zhàn)設計(jì)錯誤以提高(gāo)網站(zhàn)可(kě)信度
通(tōng)過避免常見的網站(zhàn)設計(jì)錯誤，您将提高(gāo)網站(zhàn)的可(kě)信度，并為(wèi)訪問者提供他們想要再次訪問的體(tǐ)驗。
“網頁設計(jì)是一項團隊運動，需要一種循環方法，以确保團隊、利益相關者和(hé)用戶知識之間(jiān)的良好協調，”成都網站(zhàn)建設團隊的項天齊說。“沒有(yǒu)比測試和(hé)叠代更好的方法了，包括用戶研究和(hé)可(kě)用性測試，以确保您的網站(zhàn)朝着正确的方向發展。”
