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

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

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

紐約時報的失誤：

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

這對用戶來說是個問題，他們無法快速、輕松地找到他們感興趣的文章或部分。這導(dǎo)致了用戶的沮喪和高跳出率，因為他們放棄了這個網(wǎng)站，轉(zhuǎn)而選擇其他更易于導(dǎo)航的新聞來源。

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

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

2013年的《紐約時報》網(wǎng)站

圖片

2019年的《紐約時報》網(wǎng)站

圖片

2. 閱讀困難：

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

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

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

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

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

圖片

這些變化對應(yīng)用程序的可用性和用戶參與度產(chǎn)生了重大影響。通過提高可讀性和簡化用戶界面，Chili's能夠為其客戶創(chuàng)造更加用戶友好的體驗。這反過來導(dǎo)致了更高的參與率，因為用戶能夠更有效地使用應(yīng)用程序來訂購和支付餐食。

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

3. 忽視無障礙

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

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

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

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

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

Uber的不一致做法：

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

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

圖片

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

圖片

5. 術(shù)語濫用

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

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

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

6. 復(fù)雜的表格

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

Etsy不容易

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

Etsy現(xiàn)在形式

圖片

Etsy成立之前

圖片

7. 加載速度慢

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

** blue bird 不夠快速**

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

圖片

8. 缺乏明確的行動號召

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

亞馬遜的失敗CTA：

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

9. 不為移動設(shè)備設(shè)計

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

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

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

10. 忽視用戶反饋

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

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

Zoom的無知：

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

總結(jié)

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