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