所有的趨勢都值得嗎？ 網頁設計師最常見的 5 個用戶體驗錯誤

“當所有多餘的東西都被丟棄，人類發現簡單和專注時，優雅就實現了：姿勢越簡單，越清醒，它就會越美麗。” -保羅·科埃略

網頁設計師的使命是創造引人入勝的用戶體驗，幫助網站訪問者完成任務，並提高轉化率。 在這個過程中，他們往往只注重美學，走捷徑，最終依賴於各種常見的設計模式和趨勢。 這樣做的危險在於，它們可能會被流行趨勢所左右，因此，由於趨勢部署不當，會導致常見的用戶體驗錯誤。

當談到網絡時，人們不想學習東西，他們想做事情。 網絡上有很多例子，設計師選擇只關注視覺吸引力，這樣做犧牲了可用性。 他們認為推動設計的“令人驚嘆的時刻”本身就足以吸引用戶。 但可悲的是，用戶很難理解 UI，使用網站確實有困難，而且網站的跳出率飆升。

正如 Kate Rutter 所說，“醜陋但有用勝過漂亮但毫無意義。” 有效使用網頁設計模式和趨勢的關鍵是在美觀和增值之間找到平衡。

讓我們看看一些常見的用戶體驗錯誤。

網頁設計常見的 UX 錯誤 1：大而固定的標題

在網站上可以看到越來越高的粘性標題。 具有固定位置並佔用大量空間的“品牌塊”和導航菜單。 它們始終粘在瀏覽器窗口的頂部（“粘性標題”），並且經常在內容滾動到它們下方時阻止內容。

大品牌網站上的一些標題高度超過 150 像素。 他們的價值在哪裡？ 固定元素，例如粘性標題可以帶來真正的好處，但網頁設計師應該小心使用它們——有幾個重要的用戶體驗問題需要考慮。

粘性導航標題可能太大而無法舒適

如果已經決定使用粘性導航標題，最好與用戶一起測試。 過度使用內容並在粘性導航標題中填充內容是一個常見的 UX 錯誤。 使用固定的標題，瀏覽者應該仍然感到舒適。 未能找到適當的平衡可能會導致為主要內容留下少量空間，並為訪問者帶來令人窒息、幽閉恐懼的網站體驗。

有時使用 CSS 有一個簡單的解決方法：通過使粘性標題略微透明，人們在滾動時仍然能夠通過它看到內容，這使得內容區域感覺更加充實。

下面是一個高粘性頭球的例子： ATP 在 Roger Federer 上的球員資料頁面。

該網站的置頂標頭高度超過 180 像素！ 在某些筆記本電腦上，這超過了整個頁面高度的 30%：這是可以避免的糟糕的用戶體驗。

不考慮移動設備上的粘性導航標題 UX 問題

有些人可能正在使用大型高分辨率計算機顯示器，其中粘性導航標題可以加速交互，但移動設備呢？ 毫無疑問，大量的網站訪問者會從移動設備訪問該網站，因此固定標題可能不是最好的主意。 幸運的是，響應式設計技術可以為不同平台設計不同的解決方案，並堅持使用用於桌面瀏覽器的粘性導航標題（雙關語）。

Coffee with a Cop 網站也有一個固定的標題，但要小得多——不到 80 像素高。

在這種情況下，標題導航可以說是高分辨率屏幕的正確解決方案，因為它可以實現更有效的導航。 在較小分辨率的屏幕上，標題也是固定的，但會佔用大量空間。 移動設備上粘性導航標題的絕佳替代品是永遠存在的漢堡菜單。 儘管這種模式不是通用的問題解決方案，但它確實釋放了大量空間。

網頁設計常見的 UX 錯誤 2：薄而輕的字體

如今，輕薄的字體在眾多移動應用程序和網站上無處不在。 隨著屏幕技術的進步和渲染的改進，很多設計師都在使用它們，因為它們優雅、乾淨、時尚。 然而，細字體會導致可用性問題，從而阻礙用戶體驗。

網站上所有文本的目標都是清晰易讀，而細字體會嚴重影響可讀性。 並非所有訪問者都會在能夠很好地呈現薄型的顯示器上查看網站。 在配備 Retina 顯示屏的 iPhone 或 iPad 上閱讀某些燈光類型具有挑戰性。

最重要的是，文本必須清晰易讀。 如果用戶無法閱讀您的應用程序中的文字，那麼排版的精美程度並不重要。

Apple 人機界面指南

蘋果指的是移動應用程序，但同樣的原則也適用於網站。 易讀性是強制性的，而不是為了良好的可用性而可選的。 如果內容不可讀，則將內容放在網站上是沒有意義的。

在使用瘦類型之前，需要考慮以下一些常見的 UX 錯誤：

使用輕薄字體，因為它很時髦

字體不僅要好看，還要清晰易讀。 為了達到適當的對比度和易讀性，設計師應該在他們的設計中爭取最佳組合：尺寸、重量和顏色。

最好在各種設備和屏幕尺寸上測試網站，以確保所有網站文本清晰易讀。

這導致我們出現下一個常見的 UX 錯誤：

未在所有主要設備上測試文本易讀性

輕薄型在許多設計師昂貴的微調顯示器上可能看起來不錯，但也必須考慮經常在更便宜、不合格的顯示器上看到我們設計的普通用戶。 最佳做法是檢查字體在所有主要設備上的外觀：台式電腦、筆記本電腦、平板電腦和智能手機。

例如，在測試移動設計時，讓參與者在白天在移動設備上使用該網站——現實世界的用戶並不總是擁有完美的瀏覽和照明條件。 如果在網站上使用細字體，有一個簡單的方法可以適應移動用戶：在移動設備上指定較粗的字體以獲得更好的可讀性。

網頁設計常見的 UX 錯誤 3：低對比度文本

在現代用戶界面設計中，使用低色彩對比度元素也變得很流行。 它源於極簡設計趨勢，因為通過減少某些區域的對比度，設計會顯得“極簡”。 設計師無法減少需要呈現的信息的複雜性，因此他們在設計中使用了低對比度。

我們已經介紹了細字體，但還有一個更大的陷阱：淺色字體與低對比度的結合，由於可讀性差而嚴重阻礙了用戶體驗。 設計師應該盡其所能避免這種可用性陷阱。

正文中的文本對比度低

Cool Springs Financial 在其網站上使用 Helvetica 的精簡變體作為正文。 雖然它看起來很優雅並且有助於提供美觀的 UI，但在多個平台上很難閱讀。 雖然低對比度不一定是壞事，但它會使文本難以閱讀，從而對網站的可用性產生負面影響。

不測試文本對比度

有一個用於在 Web 上進行對比度檢查的漂亮工具，稱為 Colorable，它將幫助設計人員根據 Web 內容可訪問性指南設置正確的文本對比度。 一旦設計師知道他們使用了正確的文本對比度，他們就可以在他們的網站上調整其他顏色，並進行快速的多設備/用戶測試，以確保文本可讀。

網頁設計常見的 UX 錯誤 4：滾動劫持

另一個在網絡上流行的高風險趨勢是“滾動劫持”。 實現這一趨勢的網站會控制頁面滾動（通常使用 JavaScript）。 當人們遇到它時，他們不再能夠控制頁面滾動並且無法預測它的行為，這很容易導致混亂和沮喪。 這是一個冒險的實驗，可能會損害網站的可用性，最壞的情況是引發“計算機狂暴”。

有些網站可以逃脫滾動劫持，但這並不意味著每個人都可以。 例如，許多網頁設計師使用滾動劫持、視差效果和各種產品的高分辨率圖像來跟踪 Apple 的網站。 Apple 有自己的目標市場、獨特的概念和網站的獨家內容。 由於每個站點都有獨特的問題，它還必須有針對這些問題量身定制的獨特解決方案。

不與真實世界的用戶進行測試

在藉鑑流行的想法或 UI 模式時，最好在真實用戶身上測試網站原型，以避免 UX 問題。 例如，簡單的可用性測試將揭示滾動劫持的實現是否可行。 如果沒有測試，設計人員無法知道滾動劫持是否會起作用，而且做出假設通常代價高昂。

流行的個人博客網站 Tumblr 在其主頁上使用滾動劫持。 雖然這樣做可能會有風險，但可以肯定地假設他們非常了解目標受眾以及他們想要呈現的酷炫時尚的用戶體驗。 當站點訪問者開始滾動時，滾動被劫持，人們被帶到下一個部分。

長滾動頁面分為幾個部分，可通過大量飽和顏色和窗口左側突出的指示點來區分。 結果，Tumblr 的主頁感覺就像一個巨大的垂直輪播，訪問者可以控制，而不是一個令人不快的、有自己想法的實驗性網站。

網頁設計常見的 UX 錯誤 5：輪播

輪播——一種用於輪播各種內容的幻燈片——在網絡上非常常見，尤其是在登錄頁面和主頁上。 雖然它們可能很有用，但它們有許多可用性問題，因此有資格成為另一個常見的 UX 錯誤。 根據 Nielsen Norman Group 的說法：“人們經常會立即滾動瀏覽這些大圖像而錯過其中的所有內容。” 它可能會對用戶體驗產生負面影響，因為訪問者可能在某些旋轉幻燈片中看不到有價值的內容。

網站輪播可能無法為用戶提供價值

如果做得好，輪播可以用醒目的大圖像吸引用戶。 問題是，旋轉木馬通常不會增加任何附加值，而只是用於裝飾，只是因為其他人都在使用它們而被包括在內。 一種測試網站輪播是否有意義的方法：寫下輪播為訪問者提供的三個好處。 如果找不到三個有意義的好處，它不會增加任何價值。

上一個和下一個箭頭的可發現性較低

如果無法發現下一個和上一個箭頭，則網站輪播中的重要信息可能會保持隱藏狀態。 這些控件還應該與移動設備兼容。

通常沒有箭頭來控制旋轉木馬； 僅包含幻燈片指示點以推進幻燈片。 但是，它們通常對比度低，可發現性低，並且缺乏足夠大的可點擊或可點擊區域。 小的可點擊目標可能會導致糟糕的用戶體驗、沮喪的網站訪問者以及快速退出網站。

例如，Floresta Longo 基金會網站在其主頁上有一個旋轉的圖像輪播。 它設置為自動播放並在五張照片中旋轉。 然而，上一個和下一個箭頭很小且透明，這使得它們很難被發現並且難以點擊。 沒有顯示幻燈片訪問者的指示器，也沒有標籤來表示圖像所代表的內容。 這些圖像不是鏈接，而是純粹的裝飾。 雖然這種類型的輪播可能對吸引訪問者有一定的價值，但總的來說它還有很多不足之處。

結論

網頁設計趨勢，如果不仔細考慮和謹慎實施，可能會導致幾個常見的用戶體驗錯誤。 UX 設計師應該運用他們最好的判斷力，不要害怕創新，但為了確保網站的可用性，最好讓他們與真實世界的用戶一起徹底測試他們的設計。

在瘋狂氾濫的網頁設計趨勢中，流行的事物來來去去。 在這種混亂中，美學、效率和可用性的平衡使用在區分已被證明是最強大並獲得最多用戶接受度的 UX 趨勢方面發揮著重要作用。

網頁設計師可以想出最酷的配色方案，最華麗的滾動動畫，或者最夢幻的視差效果，但如果人的交互因此受到影響，那麼用戶體驗就會很差，人們會很快繼續前進。 另一個網站只需點擊一下即可。

進一步閱讀 Toptal 設計博客：

• 響應式設計——最佳實踐和注意事項
• 從瀏覽器接近網站設計過程
• 設計師編碼——我們應該知道多少？
• UI 設計最佳實踐和常見錯誤