在不斷發(fā)展的UI/UX設(shè)計(jì)領(lǐng)域，成功與失敗之間的界限非常微弱。即使是最小的設(shè)計(jì)失誤也可能導(dǎo)致用戶的沮喪、轉(zhuǎn)化率下降，甚至產(chǎn)品的失敗。為了幫助你避免這些陷阱，我們整理了一份10個(gè)最可怕的UI/UX錯(cuò)誤清單，務(wù)必要避免。每個(gè)錯(cuò)誤都附有一個(gè)真實(shí)案例，這樣你就可以從他人的經(jīng)歷中學(xué)習(xí)。讓我們開始吧！

1. 不直觀的導(dǎo)航

導(dǎo)航是任何網(wǎng)站或應(yīng)用的支柱。當(dāng)用戶找不到他們想要的內(nèi)容時(shí)，會(huì)導(dǎo)致沮喪和高跳出率。導(dǎo)航應(yīng)該清晰、簡(jiǎn)潔、易于使用。雜亂和混亂的導(dǎo)航菜單會(huì)讓用戶失去興趣并導(dǎo)致他們離開網(wǎng)站。例如，如果用戶在電子商務(wù)網(wǎng)站上搜索特定的產(chǎn)品或服務(wù)，但由于設(shè)計(jì)不良的導(dǎo)航菜單而無(wú)法輕松找到，他們可能會(huì)完全放棄該網(wǎng)站。

紐約時(shí)報(bào)的失誤：

《紐約時(shí)報(bào)》是世界上最受歡迎的新聞網(wǎng)站之一，每天都有數(shù)百萬(wàn)讀者訪問其內(nèi)容。然而，直到最近，該網(wǎng)站的導(dǎo)航菜單混亂且令人困惑，使用戶難以找到他們想要的內(nèi)容。導(dǎo)航菜單上鏈接到網(wǎng)站不同部分的鏈接過多，且沒有以直觀和用戶友好的方式進(jìn)行組織。

這對(duì)用戶來說是個(gè)問題，他們無(wú)法快速、輕松地找到他們感興趣的文章或部分。這導(dǎo)致了用戶的沮喪和高跳出率，因?yàn)樗麄兎艞壛诉@個(gè)網(wǎng)站，轉(zhuǎn)而選擇其他更易于導(dǎo)航的新聞來源。

作為回應(yīng)，紐約時(shí)報(bào)重新設(shè)計(jì)了導(dǎo)航菜單，使其更加簡(jiǎn)潔、簡(jiǎn)單和直觀。新的設(shè)計(jì)采用了更少的鏈接、更大的字體和更多的空白間隔，使用戶更容易瀏覽和導(dǎo)航網(wǎng)站。導(dǎo)航菜單現(xiàn)在按照清晰的分類進(jìn)行組織，如新聞、觀點(diǎn)、藝術(shù)和生活，使用戶更容易找到他們想要的內(nèi)容。

通過簡(jiǎn)化和優(yōu)化導(dǎo)航菜單，紐約時(shí)報(bào)成功地使用戶更容易找到他們所需的內(nèi)容，并吸引他們不斷回訪該網(wǎng)站。

2013年的《紐約時(shí)報(bào)》網(wǎng)站

圖片

2019年的《紐約時(shí)報(bào)》網(wǎng)站

圖片

2. 閱讀困難：

低對(duì)比度的文字、小字號(hào)和擁擠的內(nèi)容幾乎讓用戶無(wú)法閱讀和理解信息。這可能導(dǎo)致用戶體驗(yàn)不佳，并使用戶難以與您的內(nèi)容互動(dòng)。為了避免這個(gè)錯(cuò)誤，請(qǐng)使用清晰易讀的字體、適當(dāng)?shù)膶?duì)比度和組織良好的內(nèi)容。例如，一個(gè)字號(hào)較小、對(duì)比度較低的移動(dòng)應(yīng)用可能對(duì)視力受損的用戶來說不易閱讀，從而給他們帶來沮喪的體驗(yàn)。

Chili's 令人失望的設(shè)計(jì)

Chili's是一家在全球各地都有分店的熱門連鎖餐廳。為了方便顧客點(diǎn)餐和點(diǎn)飲料，該公司開發(fā)了一款移動(dòng)應(yīng)用程序，允許用戶瀏覽菜單、下訂單并支付餐費(fèi)。然而，原始版本的應(yīng)用存在一些可用性問題，使用戶難以有效地瀏覽和使用。

其中最重要的問題之一是可讀性差。應(yīng)用程序的文本對(duì)比度低，字體大小小，內(nèi)容擁擠，這使得用戶難以閱讀和理解信息。這反過來導(dǎo)致用戶體驗(yàn)差和低參與率，因?yàn)橛脩綦y以有效地使用該應(yīng)用程序。

為了解決這些問題，Chili's重新設(shè)計(jì)了其移動(dòng)應(yīng)用，采用了更大的字體大小、更清晰的標(biāo)題和更好的元素間距。新設(shè)計(jì)還包括高對(duì)比度的配色方案，使用戶更容易閱讀和區(qū)分應(yīng)用程序的不同元素。公司還簡(jiǎn)化了用戶界面，刪除了不必要的按鈕和功能，使整個(gè)應(yīng)用程序更易于使用。

圖片

這些變化對(duì)應(yīng)用程序的可用性和用戶參與度產(chǎn)生了重大影響。通過提高可讀性和簡(jiǎn)化用戶界面，Chili's能夠?yàn)槠淇蛻魟?chuàng)造更加用戶友好的體驗(yàn)。這反過來導(dǎo)致了更高的參與率，因?yàn)橛脩裟軌蚋行У厥褂脩?yīng)用程序來訂購(gòu)和支付餐食。

通過重新設(shè)計(jì)其移動(dòng)應(yīng)用程序，采用更大的字體大小、更清晰的標(biāo)題和更好的元素間距，Chili's成功提高了其應(yīng)用程序的可用性和用戶參與度，使顧客更容易訂購(gòu)和支付餐食。

3. 忽視無(wú)障礙

缺乏易于訪問的設(shè)計(jì)功能，例如圖像的替代文本和適當(dāng)?shù)念伾珜?duì)比度，可能會(huì)使殘障用戶感到疏遠(yuǎn)，并違反無(wú)障礙指南。無(wú)障礙性應(yīng)該是所有設(shè)計(jì)師的首要任務(wù)，以確保所有用戶都能訪問和使用你的產(chǎn)品。讓我們考慮一個(gè)沒有替代文本描述的網(wǎng)站或應(yīng)用中的圖像，視覺障礙用戶可能無(wú)法理解圖像的上下文。

凱澤健康保險(xiǎn)公司及其復(fù)雜的用戶界面/用戶體驗(yàn)

凱澤永久醫(yī)療集團(tuán)（Kaiser Permanente）是一家醫(yī)療服務(wù)提供商，意識(shí)到了其網(wǎng)站存在的問題，并采取了措施加以解決。該網(wǎng)站缺乏易于訪問的設(shè)計(jì)功能，使得殘障用戶難以瀏覽和獲取重要的健康信息。為了解決這個(gè)問題，凱澤永久醫(yī)療集團(tuán)對(duì)其網(wǎng)站進(jìn)行了更新，改善了顏色對(duì)比度，增大了字體，并使用清晰的標(biāo)題，以便視力受損的用戶更容易閱讀和理解信息。他們還為圖片添加了替代文本，這對(duì)于依賴屏幕閱讀器獲取網(wǎng)站內(nèi)容的用戶來說至關(guān)重要。此外，他們還確保他們的網(wǎng)站與輔助技術(shù)（如屏幕閱讀器）兼容，使殘障用戶能夠輕松訪問他們的網(wǎng)站。通過解決這些無(wú)障礙問題，凱澤永久醫(yī)療集團(tuán)改善了所有用戶的使用體驗(yàn)，包括殘障用戶，使得他們的醫(yī)療信息對(duì)所有人更加易于獲取。

4. 不一致的設(shè)計(jì)元素

字體、顏色和設(shè)計(jì)元素的不一致使用會(huì)造成混亂，削弱整體用戶體驗(yàn)。設(shè)計(jì)中的一致性至關(guān)重要，通過在產(chǎn)品中使用相同的設(shè)計(jì)元素，用戶可以更容易地理解和導(dǎo)航。一個(gè)移動(dòng)應(yīng)用在不同的屏幕上使用不同的字體和顏色可能會(huì)讓用戶感到困惑，使他們難以導(dǎo)航應(yīng)用。

Uber的不一致做法：

Uber以其用戶友好的應(yīng)用程序而聞名，用戶可以輕松地通過智能手機(jī)請(qǐng)求乘車。然而，該公司因其應(yīng)用程序中設(shè)計(jì)元素的不一致使用而受到批評(píng)，導(dǎo)致用戶體驗(yàn)混亂。作為回應(yīng)，Uber更新了其應(yīng)用程序，采用了一致的設(shè)計(jì)語(yǔ)言，包括統(tǒng)一的色彩調(diào)色板、字體和用戶界面元素。這次更新幫助用戶快速輕松地識(shí)別和瀏覽應(yīng)用程序的各種功能，改善了他們的整體體驗(yàn)。一致的設(shè)計(jì)還在整個(gè)應(yīng)用程序中營(yíng)造了一種凝聚力，增強(qiáng)了品牌作為可靠和用戶友好服務(wù)的聲譽(yù)。更新的設(shè)計(jì)不僅改善了用戶體驗(yàn)，還有助于增加用戶參與度和留存率。

2011年的Uber應(yīng)用程序

圖片

Uber 應(yīng)用現(xiàn)在

圖片

5. 術(shù)語(yǔ)濫用

在不清楚解釋的情況下使用行業(yè)特定術(shù)語(yǔ)可能會(huì)使用戶感到疏遠(yuǎn)，并使您的內(nèi)容變得不太用戶友好。在撰寫內(nèi)容時(shí)，避免使用行話，使用簡(jiǎn)單、日常的語(yǔ)言，讓每個(gè)人都能理解。一個(gè)網(wǎng)站如果使用了很多技術(shù)術(shù)語(yǔ)卻沒有提供簡(jiǎn)單的解釋，可能會(huì)讓不熟悉行話的用戶難以理解。

Oracle的高度技術(shù)化方法：

在企業(yè)軟件的高度技術(shù)化世界中，很容易陷入使用行業(yè)術(shù)語(yǔ)和縮略語(yǔ)的陷阱，這些術(shù)語(yǔ)和縮略語(yǔ)可能并不為所有用戶所熟悉。這也是Oracle網(wǎng)站的情況，他們使用了行業(yè)特定的術(shù)語(yǔ)，但沒有清晰的解釋，這使得非技術(shù)用戶難以理解他們的產(chǎn)品和服務(wù)。為了解決這個(gè)問題，Oracle更新了他們的網(wǎng)站，提供了更清晰的解釋和更用戶友好的語(yǔ)言，盡可能使用簡(jiǎn)單的英語(yǔ)。例如，像“虛擬化”這樣的技術(shù)術(shù)語(yǔ)被解釋為“在一臺(tái)計(jì)算機(jī)上運(yùn)行多個(gè)操作系統(tǒng)”。通過使他們的網(wǎng)站更易于訪問更廣泛的用戶群體，Oracle能夠改善整體用戶體驗(yàn)，并吸引更多的用戶關(guān)注他們的產(chǎn)品和服務(wù)。

6. 復(fù)雜的表格

長(zhǎng)而復(fù)雜的表單和不清晰的指示會(huì)讓用戶望而卻步，不愿完成行動(dòng)，比如注冊(cè)服務(wù)或購(gòu)買商品。為了避免這個(gè)錯(cuò)誤，簡(jiǎn)化你的表單，提供清晰的指示，并且只要求必要的信息。當(dāng)用戶面對(duì)冗長(zhǎng)和復(fù)雜的表單時(shí)，更有可能退出應(yīng)用程序或網(wǎng)站。

Etsy不容易

一個(gè)冗長(zhǎng)復(fù)雜、指示不清的注冊(cè)流程可能會(huì)讓用戶感到沮喪和困惑，導(dǎo)致較高的流失率和潛在客戶的損失。在線市場(chǎng)Etsy就遇到了這個(gè)問題，他們意識(shí)到他們的注冊(cè)流程讓用戶望而卻步。為了解決這個(gè)問題，Etsy重新設(shè)計(jì)了注冊(cè)流程，注重簡(jiǎn)潔和清晰。他們縮短了表格，使指示更加明確，并引入了更直觀的設(shè)計(jì)元素。例如，他們添加了一個(gè)進(jìn)度條，顯示用戶已完成的注冊(cè)流程的進(jìn)度，并引入了有用的提示和建議，以引導(dǎo)用戶完成流程。這些改變提高了用戶體驗(yàn)，增加了注冊(cè)完成率，最終在平臺(tái)上促成了更多成功的交易。

Etsy現(xiàn)在形式

圖片

Etsy成立之前

圖片

7. 加載速度慢

用戶期望快速加載時(shí)間，如果您的應(yīng)用程序或網(wǎng)站加載時(shí)間過長(zhǎng)，他們很可能會(huì)放棄使用。慢加載時(shí)間還會(huì)影響您的搜索引擎排名。為了避免這個(gè)錯(cuò)誤，優(yōu)化您的圖片，壓縮您的代碼，并使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來加快加載時(shí)間。在設(shè)計(jì)中使用大量高分辨率的圖片和視頻可能看起來是個(gè)好主意，但它會(huì)增加加載時(shí)間，迫使人們?cè)诰W(wǎng)站加載完成之前就離開。

** blue bird 不夠快速**

慢加載速度是一個(gè)常見的問題，它會(huì)嚴(yán)重影響用戶體驗(yàn)，導(dǎo)致用戶感到沮喪和失去興趣。這是Twitter移動(dòng)應(yīng)用程序面臨的問題，導(dǎo)致用戶失去興趣并轉(zhuǎn)向其他社交媒體平臺(tái)。為了解決這個(gè)問題，Twitter優(yōu)化了其應(yīng)用程序以提高加載速度。這涉及到各種改進(jìn)，例如減少應(yīng)用程序需要加載的數(shù)據(jù)量，優(yōu)化圖像和簡(jiǎn)化代碼。此外，Twitter還添加了一個(gè)“輕量級(jí)”版本的應(yīng)用程序，專門為網(wǎng)絡(luò)連接較慢或設(shè)備較舊的用戶設(shè)計(jì)。這些優(yōu)化和更新使加載速度更快，用戶參與度提高，使Twitter成為一個(gè)更具競(jìng)爭(zhēng)力和用戶友好的社交媒體平臺(tái)。

圖片

8. 缺乏明確的行動(dòng)號(hào)召

不清楚或缺失的CTA可能導(dǎo)致用戶不知道下一步該做什么，造成困惑和失去轉(zhuǎn)化機(jī)會(huì)。CTA應(yīng)該清晰明確、突出顯示，引導(dǎo)用戶采取所需的行動(dòng)。沒有明確的CTA將會(huì)產(chǎn)生較少的潛在客戶和轉(zhuǎn)化，并造成糟糕的用戶體驗(yàn)。

亞馬遜的失敗CTA：

CTA（呼叫行動(dòng)）是任何網(wǎng)站設(shè)計(jì)中至關(guān)重要的一部分，它們引導(dǎo)用戶進(jìn)行所期望的行動(dòng)，比如購(gòu)買商品、注冊(cè)服務(wù)或訂閱新聞簡(jiǎn)報(bào)。在亞馬遜的案例中，其首頁(yè)上不清晰或缺失的CTA導(dǎo)致用戶困惑，無(wú)法采取所期望的行動(dòng)，最終導(dǎo)致轉(zhuǎn)化率和收入的損失。為了解決這個(gè)問題，亞馬遜重新設(shè)計(jì)了首頁(yè)，采用更清晰和突出的CTA，確保用戶能夠輕松識(shí)別并點(diǎn)擊。新設(shè)計(jì)采用對(duì)比色和粗體字來吸引注意力，提供清晰簡(jiǎn)潔的指導(dǎo)，引導(dǎo)用戶完成流程。結(jié)果是轉(zhuǎn)化率和用戶參與度顯著提高，最終為亞馬遜帶來了增加的收入。

9. 不為移動(dòng)設(shè)備設(shè)計(jì)

忽視移動(dòng)用戶的需求可能會(huì)導(dǎo)致令人沮喪的體驗(yàn)，并可能使用戶遠(yuǎn)離您的網(wǎng)站或應(yīng)用。移動(dòng)設(shè)計(jì)應(yīng)該是首要任務(wù)，因?yàn)樵絹碓蕉嗟挠脩敉ㄟ^智能手機(jī)訪問互聯(lián)網(wǎng)。不針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化設(shè)計(jì)會(huì)使您的設(shè)計(jì)看起來雜亂無(wú)章、無(wú)組織。

Target的僅限桌面設(shè)計(jì)：

過去，Target的網(wǎng)站沒有針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化，導(dǎo)致移動(dòng)用戶的用戶體驗(yàn)較差。該網(wǎng)站難以導(dǎo)航，按鈕和鏈接太小，不易點(diǎn)擊，圖片常常過大或調(diào)整不當(dāng)。這使得用戶在智能手機(jī)或平板電腦上瀏覽產(chǎn)品或進(jìn)行購(gòu)買時(shí)感到沮喪。為了改善移動(dòng)用戶的用戶體驗(yàn)，Target更新了其網(wǎng)站，采用了響應(yīng)式設(shè)計(jì)元素。這包括采用移動(dòng)優(yōu)先的設(shè)計(jì)方法，為較小的屏幕優(yōu)化圖片和字體，并實(shí)施觸摸友好的元素，如更大的按鈕和鏈接。該網(wǎng)站還針對(duì)更快的加載時(shí)間進(jìn)行了優(yōu)化，這有助于降低跳出率并增加用戶參與度。通過這些改進(jìn)，Target能夠?yàn)橐苿?dòng)用戶提供更好的用戶體驗(yàn)，從而增加了移動(dòng)設(shè)備上的參與度和銷售額。

10. 忽視用戶反饋

忽視用戶反饋可能會(huì)阻止您發(fā)現(xiàn)和修復(fù)設(shè)計(jì)中的關(guān)鍵問題，從而導(dǎo)致用戶體驗(yàn)不佳。用戶反饋應(yīng)該被認(rèn)真對(duì)待，并用于改進(jìn)產(chǎn)品。定期征求反饋并進(jìn)行必要的改進(jìn)，以確保用戶滿意。如果用戶報(bào)告網(wǎng)站或應(yīng)用程序的錯(cuò)誤或問題，忽視他們的反饋可能會(huì)進(jìn)一步引起用戶的沮喪和不滿。

“你最不滿意的客戶是你最好的學(xué)習(xí)資源。” — 比爾·蓋茨，微軟的聯(lián)合創(chuàng)始人

Zoom的無(wú)知：

用戶反饋是改進(jìn)任何產(chǎn)品或服務(wù)的重要方面，視頻會(huì)議平臺(tái)Zoom就是通過吃了苦頭才學(xué)到了這個(gè)教訓(xùn)。Zoom對(duì)用戶反饋的漠視導(dǎo)致了用戶體驗(yàn)的下降，其設(shè)計(jì)中存在的重要問題得不到解決。這導(dǎo)致了用戶對(duì)該平臺(tái)的不滿，從而失去了用戶的參與度。為了解決這個(gè)問題，Zoom開始積極尋求并融入用戶反饋到其設(shè)計(jì)過程中。通過傾聽用戶的需求和關(guān)切，Zoom能夠識(shí)別和修復(fù)平臺(tái)中的重要問題，從而提供更加用戶友好和吸引人的體驗(yàn)。公司現(xiàn)在定期向用戶征求反饋，并根據(jù)這些反饋實(shí)施了許多功能和設(shè)計(jì)上的改變。這種方法幫助Zoom重新贏得了用戶的信任并增加了用戶的參與度，最終使其成為一家領(lǐng)先的視頻會(huì)議平臺(tái)。

總結(jié)

通過借鑒這些例子并避免這些常見的UI/UX設(shè)計(jì)錯(cuò)誤，您可以為您的受眾創(chuàng)造更愉悅、易于訪問和用戶友好的體驗(yàn)。請(qǐng)記住，出色的設(shè)計(jì)是關(guān)于理解并滿足用戶的需求。將用戶的需求放在設(shè)計(jì)過程的前沿，您將在競(jìng)爭(zhēng)激烈的數(shù)字領(lǐng)域中創(chuàng)造出一款脫穎而出的產(chǎn)品。