第 6 集：讓用戶發瘋的網站用戶體驗

大多數網站所有者都試圖創造他們想要體驗的用戶體驗，但有時業務和/或營銷目標會創造出讓用戶發瘋的體驗。 在今天的節目中，Hannah、Ben 和 Kathy 向 Kadence Beat 表達了他們的不滿，但也提供了一些替代解決方案，這些解決方案可能有助於網站所有者避免用戶體驗決策的陷阱，同時仍然滿足他們的業務和營銷目標。 我們還回顧了 Kadence Blocks 的後續功能，包括 Meta Box 支持、Show More 塊等。

通過下面的控件收聽，或將我們添加到您最喜歡的播客應用程序中。

在新窗口中收聽。

時間戳和鏈接

0:00 介紹

0:54 沒有在客戶所在的地方遇到客戶的彈出窗口

2:50 難以消費內容的食譜網站。 食譜盒

7:30 設計不佳的網站

10:26 為什麼圖片對您的網站如此重要

11:26 Craigslist，你怎麼這麼復古？

13:34 應用無法與網站連接的身份驗證問題

16:28 單點登錄

17:48 沒有有意設計的聯繫表格

19:05 支持對小型企業至關重要

19:36 訪問 theworldsworstwebsiteever.com 笑一笑

21:15 Kadence 和 Kadence Blocks 即將推出什麼

The Kadence Beat 第 5 集的成績單

凱西：歡迎來到 The Kadence Beat 的第六集。 這是關於使用 Kadence 創建有效網站的播客。 但是對於第六集，我們將進入顛倒的世界。 我們將扭轉一切，我們將談論我們曾經擁有過的最糟糕的網站體驗。 也許我們可以通過一些方法來幫助正在創造網絡體驗的人，而不是犯一些這些錯誤。

你怎麼看，漢娜？

漢娜：我是為此而來的。

凱西：我們有幾分鐘討論我們將在這一集中談論的內容，有點像展前談話。 我們馬上就進入了內容。 我想我們已經為此做好了準備。 我認為我們都有一些很好的網站示例，但我們遇到了一些問題。

我想先去，因為我對互聯網上的網站有一些節日級別的投訴。 我想談談那些通過彈出窗口讓我加入他們的列表的網站，或者更糟糕的是，當我在網站上停留不到五秒鐘時，我會問我是否會將它們推薦給朋友。

本：我感覺到了。

漢娜：這是一個非常有效的抱怨。

Kathy：我想指出 Williams-Sonoma、Pottery Barn，他們所有的品牌，他們都這樣做。 現在他們要我的電話號碼，雖然我喜歡他們的品牌，也喜歡在這些網站上購物，但我不一定希望被彈出窗口擊中。 首先，他們已經有了我的電子郵件地址。我以前從他們那裡買過東西，我們已經有了關係。 但是，每次我訪問他們的網站時，他們都想與我交流，就像我以前從未去過那裡一樣，而且我不在他們的名單上。 這很煩人。 我只想看看家具和家居用品的精美圖片。

漢娜：我認為這很公平。 雖然我會說如果彈出窗口為您的電子郵件提供 20% 的折扣，但我可能會這樣，這是一封舊電子郵件，是的，我將享受 20% 的折扣。 但我確實覺得他們應該給你時間先看看他們提供了什麼。

凱西：你會給你的電子郵件百分之多少？

漢娜：你知道，這可能不會花太多時間，但這取決於我是否正在瀏覽一個我真的不知道你是誰並且我不知道你在賣什麼的網站，那麼我就是很生氣，我可能會離開該網站。 但如果你喜歡一個大品牌，如果我要去 Patagonia 的網站，我知道我想要一件夾克，他們會說，這裡有 15% 的折扣。 我開始覺得，好吧，生病了，因為我來這裡是為了一件夾克。 但如果你是一個我喜歡的網站，我不知道你在賣什麼。 我什至不確定我是怎麼找到你的。 現在你給我這個彈出窗口，我很生氣。 那麼我可能只是要離開了。 而且可能大多數聽的人都不是巴塔哥尼亞。 所以也許你應該聽從凱西的建議，對彈出窗口冷靜一下。

凱西：是的，我希望世界上少一些彈出窗口。 本，你呢？ 當您訪問網站時，真正讓您感到厭煩的是什麼？

本：肯定是彈出窗口。 讓我比他們想要你的電子郵件地址更多的是彈出的廣告。 因此，我正在調用互聯網上的每個食譜網站。 我不需要命名任何名字，因為它們都是這樣的，尤其是在你的手機上。 就在最近我煮了卡津蝦，因為我想吃一些卡津蝦。 所以我上網查找了卡真蝦的食譜。 當然，您訪問的每個網站都單擊它，您就會知道，當您真的想查看食譜時，有五頁介紹瞭如何烹飪卡津蝦。 當你試圖滾動瀏覽時，你會被彈出窗口擊中，因為他們製作卡真蝦的視頻以及其他食譜和其他一切的大量廣告。

只是試圖找到食譜，然後你把它坐在那裡，你就像，好吧，我可以看到食譜。 然後一個彈出窗口發生整個頁面移動並且該食譜向上或向下滾動。 是的，這是一個，這是一個悲慘的經歷。 所以，嘿，給大家的專業提示，Recipe Box 是一個免費的應用程序，我喜歡它。 您可以訪問您嘗試從中獲取食譜的網站，複製 URL 並將其放入食譜框中，它實際上會抓取實際的食譜和說明，並將其轉換為易於閱讀的格式。

漢娜：太棒了。 幾個月前，Ben 告訴我這個應用程序，我一直都在使用它，因為即使你在食譜頁面上並且你喜歡向下滾動並且試圖截取食譜，到那時你實際上做了截圖，彈出了八個視頻。

然後視頻太小了，您甚至無法退出。 然後你炸毀了視頻。 然後到那時，我想，我只是要編一個食譜，因為這太煩人了。 所以食譜盒是合法的，但也許你會，不應該在他們的食譜頁面上放這麼多廣告。

凱西：他們為什麼這樣做？ 為什麼有所有的廣告，為什麼有所有無關緊要的東西，為什麼不直接給某人食譜呢？ 你有沒有搜索過另一個食譜並說，哦，上帝，又不是那個網站。

漢娜：實際上不僅僅是廣告。 這就像，當你試圖找到你的食譜時，你必須滾動瀏覽整個人生故事。 然後你必須聽說他們的姑姑在他們叔叔的葬禮上做了這個食譜，就像，等等，等等，等等。 我想，我只想要食譜。 我不需要知道這一切。

凱西：嗯，他們一定有一些業務需求，這導致他們……

本：你可以和食譜網站交談，他們會說，嗯，我們必須以某種方式賺錢。 我們做所有這些工作來創建所有這些內容，獲取這些食譜，獲取圖片，獲取視頻。 就像我們必須以某種方式賺錢，沒有人願意為食譜買單。

我們不是。 如果有人對食譜收費，而不是展示廣告，我們不會，我們絕對不會去他們的網站。 我們會說，你正在為一個食譜收費。 這就像收費閱讀他們的文章的新聞網站。 這就像最簡單的點擊一樣，哦不，有一百萬個新聞網站。 我不需要你的。 除非它像，我們可以叫紐約時報，因為他們的設計很糟糕。 他們是非常優秀的記者，對，值得訂閱，但伙計，他們的應用程序和他們的網站，就像，呃，無論如何。

我認為如果您的網站上有廣告，因為如果有人在聽一點，我，我，我必須獲得廣告收入，有兩種方法可以接近它。 就像一個一樣，我需要獲得盡可能多的廣告收入。 所以我必須在這個網站上加載廣告，我會一直這樣做，直到“他們只是憤怒地離開”的滋擾之前。”所以這對用戶來說將是一個主要的滋擾。 而且我想知道是否沒有一種方法可以製作不令人討厭的廣告。 這會讓我回到你的網站，或者如果沒有策略，因為就像我不去食譜網站搜索食譜，我搜索谷歌然後我看到結果是什麼。

但如果我知道有一個食譜網站，我喜歡這些食譜及其設計，而且他們沒有投放一百萬條廣告。 也許那是一個我會去看看的網站，“嘿，他們有食譜嗎？”或者它甚至可能是我去的一個網站，我想訂閱它，這樣我就可以看到有什麼新食譜出來了和。 然後還有更多的方法，也許如果您正在運行一個食譜網站，您可以創建一本電子書，然後以幾美元的價格出售。 就是這樣，如果它的價格足夠低，而且我已經看過你的一些食譜，我真的想要那個卡真蝦食譜，你展示一張漂亮的照片，然後我可以看到這是一種也賺取收入。

所以，我的意思是，我認為其中一些是有創意的，而最簡單的方法就是放入谷歌廣告，然後說，是的，折磨我的用戶。

凱西：當然。 漢娜，你有沒有讓你在網上發瘋的網站或真正影響你的網站體驗？

Hannah：我不知道有什麼特別的網站，但在過去的八年裡我一直在做支持。 因此，我看到了許多需要大量幫助的網站。 所以當談到喜歡的設計時，我想這會讓我很反感。 就像我去你的網站，你知道，有人問，我怎樣才能讓我的標題更大？ 而且，然後你就得到了這張背景照片，就像完全分散了內容的注意力，或者你的顏色消失了。 我們在一頁上使用了八種不同的字體。 我不會給你很多信任，因為我只是被你的設計關閉了。

Ben：我經常用背景圖像捕捉到人們，尤其是在他們上面有文字的地方，他們已經為特定的屏幕尺寸設置了它，而這是他們碰巧看到的屏幕尺寸。 他們就像，嗯，你知道，就像，你可以閱讀這個屏幕大小的文本。

漢娜：哦，我見過這麼多。

本：是的，炸掉屏幕。 突然之間，文字覆蓋了圖片的黑暗部分，它根本不起作用。 這是一個非常常見的新手錯誤，我在這張對比度太大的圖像上得到了這個漂亮的文字。 如果您要在圖像上放置文本，請不要使用高對比度的圖像，但是，呃，它們可以在它們的一個屏幕尺寸上工作。

然後，你知道，他們沒有把它放在其他人身上，這就是它真正崩潰的地方。

漢娜：我特別記得一個人，我們愛我們所有的支持者。 對。 我們非常感謝做我們所做的事情，但有一個人特別與我們一起工作了大概六個月，他的網站非常糟糕。 我的意思是，由於很多原因，這很糟糕，但我們幫助了他，他希望它看起來像這樣，我們將幫助他讓它看起來像這樣。 但也很難忍住，實際上，你應該改變一些事情。 我們確實做到了。 希望他有一個網站。 這不僅是他想要的，而且是有效的。 但這很有趣，人們來找我們的那種東西，我想，啊，你在這裡錯過了一個大問題。

Ben：我想通過 Kadence 為您提供構建精美網站的工具。 我想為您提供構建有效網站、構建快速網站、構建可訪問性網站等合規性網站的工具。 但是通過為您提供這些工具，這意味著您可以構建不合規、速度不快的非常醜陋的網站，所有這些事情都可能反過來發生，因為我們正在嘗試創建我們的工具，我們並沒有鎖定您這就是它的本質，我們將強迫您擁有一個漂亮的網站。 即使你想要一個非常醜陋的。 這不是 Kadence 的目標。 我們只是想讓您建立一個漂亮的網站。 所以這意味著我們已經授權人們建立很多非常不漂亮的網站。

漢娜：我們提供幫助，我們盡力提供幫助。

凱西：特別是，像入門模板這樣真正幫助人們開始使用設計師實際上花了很多時間思考的東西。 只需更改這些品牌顏色和所有內容，您就可以朝幾個方向前進。 但這有點讓你在線條中著色，可以這麼說，而不是，你知道，轉向荒野。

本：是的。 是的。 這就是其中的一部分。 我認為人們必須意識到的部分內容是，即使他們正在使用入門模板，圖像對於您的設計來說也如此強大。 它們對於用戶如何了解他們的感受以及他們對您的網站的看法意義重大。

所以我們談論的是糟糕的體驗，比如當你進入一個網站時，圖像顯然不合適。 他們只是沒有，他們的大小不穩定，他們拋棄了佈局，或者他們只是，背景有太多的對比。 所以你很困惑，或者你有競爭的東西，你的圖像中有競爭的顏色。

這類錯誤真的很容易，因為你會說，“嗯，這些是我的照片。”而且沒有多少人有預算，我們要去為我們的網站拍攝專業照片或我們的業務或其他任何東西。 前幾天我和一位設計師開玩笑。 我當時想，你一半的時間都花在搜索圖像上。 設計是一回事，但獲得正確的圖像對於製作它、讓它發揮作用非常重要。

說到設計，我想扔掉一個網站，每次我去那裡，我最近都在那裡尋找山地自行車。 我想，為什麼他們仍然是這個設計，那就是 Craigslist。 如果你曾經在 Craigslist 上過，你就會確切地知道設計是什麼，因為自 Craigslist 推出以來它一直是一樣的，他們採用了這種方法，我想，我們不會使用 CSS，因為我可以不知道你最終會如何得到這個設計。 但是，就像這裡一樣，他們就像獲得瞭如此多的流量。 他們一直在獲得如此多的流量。 人們可能會說，嗯，它奏效了，但我不知道。

像我一樣，Craigslist 是一個很容易解決的問題。 就像沒有很多事情需要做一樣。 就像我們需要讓網站響應式一樣，我們只需要稍微清理一下 UI，使其更易於導航、更易於查看。 相反，它只是一長串鏈接。 這太奇怪了。

凱西：就像九十年代的雅虎一樣。 它仍然具有相同的氛圍。 對。 它震撼了復古場景。 這對我來說很瘋狂，我只是在他們的維基百科上，截至 2017 年他們有 50 名員工，但仍然有 50 名員工，他們在 2016 年的收入：6.94 億美元。

本：天哪。

Kathy：不過，他們不會為 CSS 付費，對吧 Ben？ 這是本的笑話，我在偷它。

漢娜：當你在他們的網站上時，你會覺得你就像在某個老人的車庫裡購物，這有點怪異，也許他們希望你有那樣的感覺，我不確定. 這很奇怪，但仍然有很多人使用它。

本：我，我們剛剛做到了。 我剛在 Craigslist 上買了一輛山地自行車。 我想，我正在使用這項服務，我想，只是修復你的設計。 是的，很狂野。 我的意思是，難怪他們也會因為這種粗略的購買方式而獲得代表。 就像，它只是得到了這個……

漢娜：這個老人的車庫感覺。

凱西：這是一個無意識的警告。

本：好的。 好吧，在這裡我得到了另一個例子，就在那天發生在我身上。 善良。 所以我們得到了一台惠普打印機。 我們決定註冊他們的即時墨水服務，本質上你就像使用打印機的應用程序一樣，該服務會監視打印機中的墨水量，當你的墨水量變低時，他們會向你發送更多墨水。這非常令人困惑，因為他們實際上並沒有每月向您發送墨水，但您每月支付。 您根據要打印的頁數付費，並且那裡有一些翻轉。 這些都沒有任何意義，因為他們不會每個月都給你寄墨水。 所以這不像他們給你每頁一定數量的墨水。 但無論哪種方式，這都是他們的服務。 我之所以參加，是因為我們實際上從未從他們那裡得到任何墨水。

我們已經六個月了，我們的打印機需要墨水。 我當時想，他們為什麼不給我們寄墨水？ 就像現在我們必須去商店買墨水。 所以我正在瀏覽他們的應用程序，然後將我發送到他們的網站。 當然，我已經登錄了該應用程序。

現在我在他們的網站上，他們要求我再次登錄，因為他們沒有製定出身份驗證部分，而且他們的應用程序有大約三頁的內容，而不是其他所有內容基本上都會將您發送到他們的網站。 所以我想看看，他們有沒有運送過任何東西，或者他們正在運送一些東西，任何那些東西？

網站和應用程序一直在我現在在網站上來回踢我，不是在應用程序中，而是在瀏覽器上。 而且我已經登錄了四次，我登錄了應用程序，然後登錄了瀏覽器，然後它被踢回了應用程序。 然後我回到瀏覽器，不得不再次登錄，然後我被踢了回來。

然後再次返回瀏覽器，再次登錄，只是為了了解運輸狀態。 因此，對於如此大的公司，我會將其列為同類中的一個，哇。 這是惠普，沒有這個。 他們通過即時墨水服務賺了很多錢。 令人驚訝的是，他們沒有弄清楚登錄身份驗證，特別是如果您要構建一個應用程序，無論如何都要將所有人發送到您的網站，這似乎是一個關鍵部分，但是，是的，我登錄了四次並且我終於放棄了，就像，我將不得不在桌面上執行此操作，他們不再在應用程序和瀏覽器之間來回踢我。

凱西：幾乎聽起來組織中有兩個團隊。 網絡團隊與應用團隊在完全不同的建築中工作，他們彼此不交談。 組織中可能有類似的規則，即安全規則，阻止這兩個團隊實際相互通信。

本：有趣的是，我結束了試圖聯繫聯繫人。 也許我可以聯繫他們，然後我點擊它，它說我需要登錄才能進行即時聊天。 我當時想，我完了。 我沒有再次登錄，因為我知道一旦我登錄它就會把我踢回應用程序。

因為它會像，哦，你在應用程序上。 所以我們只會讓你回到應用程序，然後我會再次點擊聯繫按鈕。 它會帶我回到網站並說，你想登錄嗎？

漢娜：必須登錄是最煩人的事情。然後重新登錄，當人們記得我的登錄時，我很高興，但是為了一個站點上的一個需求而不得不一遍又一遍地登錄是很煩人。

本：是的，這很棘手。 您對使用 Google 帳戶有何看法？ 或者讓我們說您的 Apple 帳戶或任何要登錄的東西，例如這些隨機商店或您使用的東西，您會這樣做嗎？

漢娜：我願意。 是的。

凱西：是的，我經常這樣做，顯然在任何類型的單點登錄類型的情況下，這是你必須注意的事情。 你把所有的雞蛋都放在一個籃子裡，有人入侵了你的電子郵件帳戶和你的…… 基本上一切都妥協了，對吧？ 因此，如果您使用單點登錄，它肯定會節省時間，而且要容易得多。 我不必加載 LastPass 或 1Password 即可輸入另一個密碼。 但是，出於同樣的原因，您必須確保無論您使用什麼，無論是 Google、Facebook 還是 Apple 或其他任何東西，該帳戶都受到嚴格保護。

您在網上看到的任何其他問題。 我有一個完整的洗衣清單。 我的意思是，我可以永遠抱怨一切。

Ben：我肯定看到的常見問題，即使在高度專業的網站上也不清楚。 我不知道你賣什麼，做什麼，或者這對我有什麼幫助。 我環顧四周，然後離開。 或者就像你有一個五分鐘的視頻來解釋一個非常簡單的產品，除非他們觀看那個五分鐘的視頻，否則你不會解釋那個簡單的產品。

凱西：我有一個關於聯繫表格的，尤其是聯繫表格 7，我知道很多 WordPress 領域的人都在使用它。 聯繫表格 7 的確認信息可​​能會被忽略很多次，因為它只是一小行表明您的聯繫表格已提交。

但它太小了，並沒有真正給用戶一個聯繫表單所經歷的視覺反饋。 我只是提出了聯繫請求，三天沒有收到任何回复。

他們得到那個聯繫了嗎？ 我是否應該嘗試尋找其他方式聯繫這家公司，因為我有一個需要解決的問題？

因此，這類似於有人走進您的店面卻沒有人與他們交談。 他們只是四處走動，看東西，而您的樓層工作人員就像在角落裡，看著他們的手機，他們只是無視客戶。 您不希望在您的網站上出現這種體驗。

因此，確保您的網站以客戶為中心可確保有一種有意義的聯繫方式。 很多人不希望這樣。 對。 他們想減輕支撐負荷。 因此，他們製作聯繫表格或一種聯繫方式，實際上與一個人交談變得更加困難，因為他們不想給他們的支持人員增加更多負擔。

但是，但是你在那裡失去了一些東西。

本：是的，我看到很多大公司都在這樣做。 這很令人沮喪。 如果您是一家小公司，那麼支持就是人們選擇小公司的一切，因為他們希望能夠接觸到一個人。 嗯，是的。 專業提示：Kadence 塊。 我們有一個合同塊和一個表單塊。 在 Kadence pro 中，您可以將它們保存到數據庫中。 您還可以直接從該聯繫表中進行自動回复。 所以他們抓住那封電子郵件並發送回复。 嘿，我們得到了你的票。 已提交。

我認為，我認為每個人都應該做最後一件事來讓他們的日子過得更好。 那就是去worldsworstwebsiteever.com。 只是笑一笑。 它非常出色。 你會在網頁上看到世界上最長的數字。 這將使您的滾動條正確運行一段時間。 這個網站有很多不錯的、隱藏的小東西，呃，只會讓你發笑。

漢娜：這非常了不起。 我認為熱狗背景圖像是真正從我這裡得到的。

漢娜：只是一個很好的接觸。

本：選框比賽也非常棒。

漢娜：我想知道這在手機上是什麼樣子的。

Ben：我從這個網站開始使用移動設備，它，是的，它看起來就像只是在移動設備上。

漢娜：太棒了。 我們喜歡那個。 對於不該做什麼的終極指南。 這就是你要去的地方。 別客氣。

凱西：漂亮。 有人可以用 Kadence 構建這樣的東西嗎？

Ben：你可以這樣……如果你願意，你可以。 我不知道其中一些，我想。 因此，您需要一些自定義 CSS 才能真正有效地強制它不響應。 就像這個網站一樣，文本永遠不會折疊。 沒有最大寬度。 但是你可能可以用 Kadence 做到這一點，所以。

Kathy：顯然，Kadence 中沒有任何東西阻止任何人使用漫畫 Sans 或眨眼標籤。

本：是的。 或選框標籤。 是的。

凱西：太好了。 好的。 嗯，這是一個有趣的討論。 Kadence、Ben 即將發生什麼，人們應該注意哪些內容以更新他們的更新？

Ben：是的，快想想，有很多內部更新正在進行，但是我們應該有一個 Kadence Blocks 和一個 Kadence Blocks Pro 更新，希望在接下來的幾天裡，我會這麼說，並且這將為 pro 帶來一個新塊，這是一個動態列表塊，允許您根據當前帖子的內容來獲取分類或其他內容。

因此，如果您想顯示這篇文章屬於哪些類別，您將能夠做到這一點。 您可以通過某些方式對其進行樣式設置，但您也可以使用您創建的高級自定義字段或元框等複選框列表，以列表格式顯示哪些已被選中。 所以這會有所幫助，它有助於構建自定義模板，您需要在 Kadence 中顯示不同的東西。 這是一個新的專業版塊。 我們還添加了對 Meta Box 的全面支持，這有點像高級自定義字段，它非常受歡迎。 然後免費，我們添加了一個顯示更多塊和一些更新，比如你將能夠動態地獲取畫廊。

然後有一些針對不同事物的內部修復。 但最終就像我們這樣做的大多數事情一樣，就像，嗯，不，我們需要解決這個問題。 而且我們有，這些最終將是相當大的更新，因為我們必須在結構上設置多少，部分原因是5.9出現的一些錯誤看起來並不就像我們要在 6.0 中修復一樣，所以我們要繼續修復它們。

就像，如果您在塊上打開了一個面板，然後切換到平板電腦視圖，則該面板將關閉。 所有核心塊都會發生這種情況。 你可以稱它為錯誤，因為它不應該發生，但它也比這更具技術性。 所以像這樣的事情，我們正在為此創建解決方案。

所以這些是接下來的大事。

凱西：令人興奮。 是的。 前幾天你給了我們一些預覽，我很高興能將所有這些介紹給 Kadence 社區。 我認為人們會對其中一些新增功能感到非常興奮。 非常非常酷。 好吧，我想這就是我們今天為 Kadence Beat 所擁有的一切。

我們希望這是一個有趣的，但也有關於一些讓用戶發瘋的錯誤的信息豐富的討論。 希望您可以從中學習，並開始使用 Kadence 創建更有效的網站。