如今，網站看起來不可思議，但我們仍然在互聯網上看到一些令人沮喪的設計模式。 必須同意兩次條款，即使一個複選框就足夠了，或者滾動到無限遠甚至更遠而沒有到達任何頁腳，這只是錯誤行為的兩個例子。

幸運的是，所有這些模式都可以在設計的幫助下得到解決，因為與其他形式的自我表達或藝術不同，設計是解決問題的支持。

對於本次網絡研討會，我們邀請了 Smashing Magazine 的聯合創始人兼主編 Vitaly Friedman，他在過去幾年中一直致力於解決複雜的用戶體驗、前端和性能問題。

Vitaly 接受了我們的邀請，來告訴我們如何製作更好的用戶界面，並讓人們在訪問我們的網站時有更高的控制感。

您將在下方找到書面形式的網絡研討會，但對於視聽學習者，您可以在此處按需訪問錄音。

現在，讓我們開始吧。

1.輪播
2. 漢堡菜單
3.無限捲軸
4.冷凍過濾器
5. 總結
6.問答

1.輪播

先說第一個經常遇到的設計問題：輪播。 設計輪播時沒有錯誤的 UI 組件，但牢記上下文很重要。

輪播的低效使用

以聖母大學的網站為例：主頁曾經有一個不需要的輪播，最後被刪除了。 正如您在下面的屏幕截圖中看到的，在輪播下方，有可點擊的點和箭頭可以在幻燈片之間移動。

如果你查看該網站的數據，你會發現 82% 的訪問者看到了幻燈片的第一張圖片，而其他圖片位置只有 2-3% 的人看到了。

旋轉木馬下方的點表示進度，但沒有提供下一步應該發生什麼的上下文。

要創建更好的輪播，您可以以土耳其新聞網站為例。 他們沒有在轉盤下方使用圓點，而是使用為幻燈片提供一些參考的數字。

當然，在移動設備上，仍然會有很多點，但並非總是如此，也並非無處不在。 在旋轉木馬的左側或右側垂直顯示幻燈片編號是一種從點切換到數字的移動友好方式。

如您所見，輪播可以在著陸頁上發揮作用，具體取決於它們的使用位置和使用方式。

另一個低效使用輪播的例子是下面這個電子商務網站。

它的側面有一個欄，表明它是一個旋轉木馬。 但是如果你要瀏覽它，你會點擊哪裡？ 在數字上，在黑點上，還是隨機在線？ 有許多不同的選擇。

好吧，令人驚訝的是這些都不起作用。 您需要做的是向右或向左滑動。 一點都不直觀。

當您的滑塊方向與您應該期望的實際移動不匹配時，它會產生令人沮喪的體驗。

同樣的挫敗感出現在梵高博物館網站的另一個例子中。 在右下角，它說scroll for more ，但動作並沒有像你期望的那樣垂直發生，而是水平發生的。

輪播應該用於非常具體的目的，例如產品頁面。 假設您想突出不同的酒店特色，因為人們會好奇地在預訂前了解房間、餐廳和其他設施的情況。

如果輪播中有大約 40 張幻燈片，您可以預期查看增量輪播幻燈片時會出現衰減。 這是什麼意思？ 第一張和最後一張幻燈片受到更多關注，因為人們通常從左到右或從左到右查看圖像，但中間部分受到的關注較少。

如何讓人們瀏覽輪播的更多幻燈片？

• 添加標籤

您可以刪除這些點並用滑塊替換它們，或者更好的是添加標籤。 這提供了更多的選項卡體驗，而不是輪播體驗。

將人們在點擊輪播時應該期待的內容放在滑動條上，可以讓他們有一種控制感。

• 添加暫停按鈕

如果你想要一個自動前進的輪播，你必須有一個暫停按鈕； 否則，人們會開始忽視它。

幻燈片之間通常有 5-7 秒的延遲，但如果輪播變化太快，人們只會向下滾動而忽略它。

• 使用 hallo 預覽

如果您不想使用標籤，可以使用 hallo 預覽。

在 creativedenmark.com 上，他們有一個懸停突出顯示預覽將向您顯示的內容，如果您將鼠標光標懸停在標籤上，標籤會出現和消失。

• 顯示縮略圖

增加幻燈片視圖的另一件事是使用人們應該看到的縮略圖。

如果您提供更多上下文，用戶將更願意點擊輪播。

幻燈片圖像的小縮略圖的替代方法是使用具有代表性的圖標，就像菲利普斯在其網站上所做的那樣。

創建輪播時要記住的重要一點是，如果人們關心某事，他們就會點擊。

如何組織輪播？

添加箭頭是必不可少的。 它告訴人們輪播是如何運作的，這是非常重要的。 但問題是，您如何組織箭頭，尤其是在移動設備上？

使用箭頭的選項有很多，那麼您如何知道哪種選項更適合您的網站？ 表現更好意味著什麼？

當提到輪播時，表現更好意味著人們高度參與幻燈片導航，更少意外點擊錯誤的東西，然後返回。

為了讓人們參與進來，他們需要清楚地了解他們面前的內容，這意味著任何東西都不應掩蓋他們想要消費的內容。

回到箭頭，有兩個問題需要避免。

當您將箭頭分開時會出現一個問題，因為人們會點擊錯誤的位置。

如果他們不小心點擊了幻燈片的圖像，他們將被帶到特定的網站頁面。 然後他們將不得不返回，轉到輪播的第一張圖片，如果他們想看更多，請滑動。

每次發生這種情況時，他們都必須重新聚焦並重新校准他們的手指，以便導航而不是再次犯錯。

第二個設計問題是箭頭在右上角分組。 單擊箭頭時，用戶會用手指覆蓋頁面，然後必須移動手指才能看到內容，必須重複這些步驟才能繼續導航。

如果將分組箭頭放在旋轉木馬下方，它們會很棒。

它使人們能夠更好地控制動作，類似於電視遙控器，上下左右彼此靠近，相距不遠。 像這樣，人們來回移動得更快更容易。

一個很好的例子是 Ritual.com。 在桌面版上，箭頭位於右上角，但在移動版上，它們在輪播的底部組合在一起。

2. 漢堡菜單

另一個令人沮喪的設計模式是漢堡包。 不是那些你可以吃的，而是那些幫助你在網站上選擇你的旅程的。

那麼，挫折從何而來？

以下面的咖啡店網站為例。 您可以打開四種菜單。 它們都稱為菜單，並非都包含您所期望的內容。

當打開漢堡菜單時，您會看到許多帶有許多箭頭的項目，這讓用戶不知所措。

另一個低效漢堡菜單的例子可以在下面的沃達丰網站上看到。

打開漢堡菜單後，您會看到帶有不同箭頭的手風琴。 指向右側的箭頭會將您帶到一個頁面，而指向底部的箭頭會打開另一個手風琴。

如果您單擊向下的箭頭，則會顯示另一個列表，其中包含向上、向右和向下的不同圖標。

這會給用戶帶來極大的挫敗感，因為很難理解您在這裡看到的內容以及您應該做什麼。

不需要那麼多箭。 他們本可以使鏈接看起來像鏈接，以提高清晰度。

另一個例子是 LCFC 足球俱樂部的網站，它在移動設備上具有以下導航。 當你打開漢堡菜單時，它會顯示一些部分，當你點擊其中一個部分時，你會看到一個垂直分割。 它同時顯示多個級別的導航。

您可以通過多種不同方式應用分屏，例如用於過濾。

印度一家零售商的電子商務網站有一個過濾器可以做同樣的事情。 您在垂直部分打開漢堡包菜單並將菜單一分為二。 它比您可能擁有的任何其他過濾體驗都要好，因為它也非常緊湊。

您可以在金融時報網站上看到相同的內容。 您從菜單中選擇您想要查看更多信息的部分之一，在該部分中，您有一些區域包含一些值。 他們構建了您的過濾體驗。

如果您想為您的網站添加過濾功能，您可以通過這種方式拆分來更好地利用空間。

如何讓漢堡菜單變得更好？

• 使用廣告牌模式

優先考慮重要的事情並降低無關緊要的事情的優先級。 這需要您了解人們最關心的是什麼，並突出顯示這些事情。

廣告牌模式還提高了活動或產品等基本項目的可發現性。

但是，你是怎麼做的？

看看下面這個韓國郵政局網站的例子。 在第一個電話屏幕上，他們突出顯示了一些對人們來說很重要的東西，以便於訪問。 一旦您開始使用漢堡包菜單進行導航，您就會看到這些帶有手風琴的常規內容。

主要思想是突出重要的事情，主頁類似於儀表板。 這也可以應用於電子商務。

德國主要零售商 Otto 的網站並未向您展示所有內容。 相反，它會向您展示最重要的事情，提示您選擇一個。 做出選擇後，您將進入更深層次的架構。

您可以在許多不同的網站上找到廣告牌圖案，因為它對訪問者非常有幫助。

• 使用導航查詢

導航查詢使人們更快地訪問相關信息。

Marcin Ignac 在推特上寫道：“搜索是現在 UI 中最大的騙局。 它很少起作用。 你如何找出不在你的迷你片段的前 10 個結果中的東西？ 我們需要更多利用上下文和關聯的探索性界面。”

這有很多道理。 我們只需要知道我們上下文中的上下文和關聯。

例如，在 Commonbond.co 上，您可以選擇要在網站上執行的操作。 您有這個小預覽，您可以從不同的選項中進行選擇。 之後，它將帶您到您要查找的頁面。 它就像一個信息系統，您可以在其中提出幾個問題並將用戶帶到感興趣的特定頁面。

另一個例子是杜塞爾多夫的網站，你可以在其中插入你想在城市和地點做的事情，它會以驚人的速度告訴你你想知道的事情。

導航查詢有助於縮短相關時間。 您可以在不到 10 秒的時間內到達您需要的特定頁面。

您如何將其應用於電子商務網站？

如果您查看來自德國的零售網站 AO，您會在主頁上看到輪播和“你想在這裡做什麼”部分。 在那裡，您可以選擇要購買的設備、類型、價格範圍等。 給出所有這些答案後，您無需過濾、搜索或排序即可在不到 10 秒內獲得相關結果。

• 使用麵包屑

另一個通常被遺忘的重要事物是麵包屑。 麵包屑導航很棘手，因為它們不一定代表用戶走過的路徑； 它們代表網站的信息架構。 不過，在導航的上下文中，這確實很有幫助。

為什麼？ 因為它們可以幫助您更快地導航。

查看這個屬於德國一家保險公司的網站，您可以在頂部看到一個小下拉菜單。 當你點擊它時，你會看到這個頁面的鄰居，所以這是一種網絡導航的替代品。 我們通常將它作為一個單獨的東西接收：我們有主導航、麵包屑，也許還有一個側邊欄。

如果您出於某種原因無法使用側邊欄，這是一個很好的網絡導航替代品，但最重要的是，您也可以更換整個大型菜單。

如果您訪問瑞士聯邦統計局網站，他們會使用麵包屑導航但沒有大型下拉菜單。 相反，一切都在使用這種動態下拉列表之類的東西。

瑞士的另一個網站也是如此，他們在那裡出售門票。 一切都是麵包屑； 您甚至不需要大型下拉菜單。 在移動設備上看起來也很好用。

3.無限捲軸

無限滾動是那種你滾動、滾動、再滾動的模式，如果幸運的話，你會到達頁腳，否則……不會。 如果您碰巧在銷售頁面上，祝您好運！ 您可能再也看不到頁腳了。

通常，人們不喜歡無限滾動，因為它很難管理，而且他們很難發現頁面上的新內容。 正因為如此，大多數時候，他們只是簡單地放棄了具有這種設計模式的頁面。

如何改進無限滾動？

• 添加“加載更多”按鈕

您可以加載一些項目，然後到達從無限加載更改為“加載更多”按鈕的位置，而不是無休止地向下滾動。 如果單擊該按鈕，則添加更多項目。

• 添加獎勵

通過在用戶到達“加載更多”按鈕時添加激勵來改進無限滾動，例如如果他們輸入電子郵件地址就有可能贏得禮品卡。

您還可以聲明您在電子郵件中包含一個鏈接，以便稍後從他們離開的地方繼續滾動。 這也允許用戶在設備之間切換，而不必稍後重新開始搜索。

營銷團隊也喜歡這個想法，因為它可以幫助他們增加電子郵件列表。

• 寫下看到的產品數量

打破無限滾動的另一種方法是寫下總看到的產品數量，並在單獨的頁面上添加打開這些項目的建議。 您還可以添加一個“稍後在這裡繼續”按鈕，允許用戶返回到他們停止搜索的地方。

使用已經看到的項目和後續項目之間的空白讓人們處理他們看到的內容，並讓他們自由決定下一步要做什麼。

• 製作粘性頁腳

如何製作粘性頁腳？ 以馬來西亞的這個送餐服務網站為例，您可以通過單擊“城市、語言等”按鈕打開頁面右下角的頁腳。

• 添加更多控件

人們需要有一種控制感，這是使用無限滾動很難獲得的。 但是，您可以效仿吉他電子商務零售商 Thomann.de 的示例。

在產品列表的末尾，有一條消息說您已到達頁面底部。 接下來，您可以通過選擇每頁要顯示的產品數量來加載更多項目。 或者，您可以繼續分頁。

這樣，您就可以完全控制看到的產品數量並始終看到頁腳。

• 將無限滾動與分頁相結合

另一種選擇是結合無限滾動和分頁。 在來自波蘭的電子商務零售商 Pepper.pl 上，當您滾動時，URL 會發生變化，您還會在頁面底部看到一個圖層，允許您跳轉到頁眉、頁腳或瀏覽頁面。

如果你想跳轉到一個特定的頁面，你也可以從那個底層跳轉。

你怎樣才能使無限滾動更相關？

您可以在分頁旁邊添加一些標籤，以提示用戶在那裡應該期待什麼，類似於輪播。

人們可以按評級、位置、字母表或價格進行排序。 無論選擇哪個選項，標籤都會為他們提供線索，讓他們知道在接下來的頁面上應該看到什麼。

另一種提供更多上下文的方法是向無限滾動添加帶有標籤的欄。 這讓人們非常自信地意識到他們想去哪裡。

如果你想要無限滾動，為什麼不讓人們為多個位置添加書籤，幫助他們更舒適地導航。 他們可以很快地在它們之間跳轉，找到他們感興趣的產品。

4.冷凍過濾器

凍結的過濾器正在成為用戶實際存在的主要痛點之一。

這來自 sears.com 等網站。 每當您單擊左側邊欄中的一個過濾器時，整個 UI 就會凍結。 在它復活之前你不能做任何事情。

此外，人們通常希望選擇多個過濾選項。 不幸的是，一些過濾器一次只註冊一個輸入，導致之前的選擇丟失。

如何正確過濾？

一個積極的例子來自斯德哥爾摩大學網站，他們在該網站上將過濾器與搜索結果分離。

您可以根據需要選擇任意數量的過濾器，而無需凍結或刷新。 在右側，他們會向您顯示結果，您可以過濾甚至通過搜索關鍵字進行過濾。

另一個例子來自 Galaxus.ch。 您在頂部有過濾選項，您可以根據需要添加任意數量的過濾器，而在後台，沒有任何變化。

只有當您單擊顯示按鈕並應用過濾器時，您才能真正看到事物發生變化並獲得結果。

在手機上，我們也有很多過濾問題。

看看沃爾格林網站。 您會看到過濾選項； 每當您單擊一個屬性時，UI 都會凍結，並且只有在它帶您到結果之後才會凍結。 如果您想按多個屬性進行搜索，只需再次單擊過濾器並重複該過程即可。

您將不得不為每個屬性一遍又一遍地執行此操作。

在第二個示例中，過濾時，您會看到背景上出現模糊，每次選擇屬性時都會發生變化。

然後，當然還有 Crutchfield 網站，過濾佔據了整個屏幕。 但是當你點擊任何過濾器時，屏幕上會出現加載動畫，表明網站正在處理你的操作。 每次看到這個，都會很煩。

如何改進過濾？

• 佔據整個屏幕

過濾覆蓋整個手機屏幕會更好。 如果你需要滑入和滑出，你可以用過濾器來完成，儘管手風琴是過濾器更好的替代品，因為它們更快。

最重要的是這裡沒有什麼是冰冷的，沒有任何挫敗感。

• 分屏

以來自印度的時尚零售網站 Mint 為例。 過濾將屏幕一分為二，讓人們可以輕鬆地在過濾器之間導航。

• 使用自動完成

另一個非常常見的過濾示例是當您開始鍵入並獲得旁邊帶有垂直箭頭的自動完成選項時。

單擊關鍵字和單擊箭頭之間存在差異。

單擊關鍵字將帶您到搜索結果，但如果單擊垂直箭頭，您編寫的文本將被自動完成中提到的關鍵字替換。

為此，您可以在搜索欄下方添加一些小提示，以幫助人們構建他們的搜索結果。 請記住建議將要顯示結果的事情。

5. 總結

人們欣賞按預期工作的東西，您可以做很多事情來消除 Web 上的挫敗感。

Vitaly Friedman 從事 UI 工作超過 15 年，人們在瀏覽網頁時想要的東西一直沒有變。

看看下面的圖片，看看哪些設計模式有助於提供愉快的用戶體驗。

如果您想了解更多有關如何改進界面設計的信息，可以轉到智能界面設計模式。 你會在那裡發現很多有趣的東西，包括 Vitaly 在網絡研討會上談到的一切等等。

6.問答

問題：當你設計著陸頁時，是先文案再設計？

回答：對我來說，是的。我會花大量時間查看錯誤消息和標籤等內容。大多數時候，我的工作是最大限度地提高清晰度並儘量減少錯誤。這通常意味著要努力確保我使用的標籤清晰，並且我們的成功率很高。在設計時，我們通常有兩個主要指標。一種是當我們試圖確定人們所做的主要任務時。另一種是當我們試圖了解人們在完成這些任務時的成功程度以及他們需要多少時間來完成這些任務。

其他矩陣是人們犯錯誤或錯誤的頻率，如果他們確實遇到錯誤，他們從這些錯誤中恢復的速度有多快。

我們不僅在談論結帳流程，而且還在談論更好的搜索，跟踪人們在網站上搜索的內容，前 100 個搜索。然後，在此基礎上，您可以與內容策展人討論它，看看人們會得到什麼結果。我們衡量人們得到的東西是否相關。

相關的時間也很重要。如果您在 10 秒內根據自己的興趣選擇了非常相關的項目，那將是非常強大的。

問題：您最引以為豪的設計問題解決方案是什麼？

答：解決無限滾動問題一直很困難。有很多問題，包括可訪問性和適當地宣布新內容。從技術上講，無限滾動管理起來相當複雜。但它也有它的好處。在我從事電子商務項目時遇到無限滾動問題的許多情況下，它確實增加了可發現性。問題是你不想讓人們不知所措並讓他們控制他們會看到多少。

他們需要能夠到達頁腳並為某個位置或類似的東西添加書籤。這是一個棘手的實現，也是棘手的設計。 這是一件需要牢記的複雜事情。

最後的想法

我們希望本次網絡研討會能幫助您更多地了解令人沮喪的設計模式、如何避免它們，以及您可以做些什麼來改善您的電子商務體驗。

如果您想了解 Vitaly 提供的其他示例並發現本次網絡研討會中的其他問題和答案，請在此處按需觀看。

下次在我們與 Jacob Cass 的網絡研討會上見，內容是關於如何創建可轉化的零點擊廣告。