為了更好的用戶體驗設計:我可以點擊這個嗎?

已發表: 2020-02-05

細微的變化如何提高您的點擊率

每個人都想要更多的點擊。 更多水龍頭。 更多用戶說“是的,我喜歡你給我的任何東西。” 我們想看看一些真正讓用戶想要點擊更多的方式,這就是用戶體驗設計的用武之地!

它在整個網絡上都貼得很好:當你讓用戶點擊時,一個微妙的變化可能會有很長的路要走。 我們研究了這些細微的變化究竟是什麼以及它們可能對您的轉化產生的影響。

字體

字體可以產生瘋狂的巨大影響。 例如,2009 年,Tropicana 大刀闊斧地更名,其中很大一部分是重做字體。 請記住,Tropicana 字體也是他們的標誌。

tropicana 品牌重塑

圖片來自重要設計

銷售額迅速下降了 20%。

當你讓人們點擊時,字體也是你可以依賴的最穩定的東西之一。

通常,具有高對比度的粗體無襯線字體會做得很好。

為什麼? 這是最容易閱讀的。 這方面的例子遍布互聯網。 Basecamp、BaseCRM、Evernote、mHelpDesk——所有這些公司都有相同的 CTA——高對比度、粗體無襯線字體。 很容易看到,很容易閱讀。 這就是為什麼公司傾向於使用它而不是襯線字體。 (海報也是如此——你可以從很久以前就讀到它)。 此外,無襯線字體更容易在計算機上閱讀,這就是為什麼當您希望讀者點擊時要使用它的原因——他們需要先知道您在說什麼。

印象筆記免費試用按鈕綠色大本營免費 2 個月幫助台

陰影+ 3D效果

令人驚奇的是,投影和製作 3D 東西可以讓人們點擊它。 這確實是扁平化設計的一大缺點。 (目前。另一個是,最終,它會過時。)當事情真的很平坦時,它們看起來很棒,但它們並不那麼容易知道什麼是可點擊的,什麼是不可點擊的。 Jakob Nielsen 在 2012 年評估 Windows 8 時討論了這一點。

因為當事物實際上看起來像按鈕時,人們點擊的次數更多,圓角邊緣或陰影可以很容易地知道什麼是可點擊的,什麼是不可點擊的。

(專業提示:這些被稱為信息亭風格的按鈕)。

按鈕 這實際上提出了一個有趣的問題。 亭式按鈕最初用於拱廊和其他地方。 因此,當我們走向數字化時,這種規範得以延續。 這是有道理的,但在某些時候,它們變成了斜角和 3D 按鈕,因為它們是斜角 3D 按鈕,而不是因為任何人都記得它們來自哪裡。 就像軟盤上的保存圖標一樣——擬態根最終會變得任意,不再是擬態。

所有這一切都表明人們現在更願意點擊信息亭式按鈕,但如果扁平化設計可以再堅持幾年,我們可能會看到穩步遠離。

移動

很多人將移動與製作可點擊 3D 的東西混為一談,但我認為它本身就足以保證一個類別,首先從用戶體驗的角度來看,其次是因為它對平面設計意味著什麼。

從用戶體驗的角度來看

用戶需要對他們的行為進行反饋。 這是幫助用戶了解他們在哪里以及做什麼的第一方法。

使某些東西可點擊的首要任務是告訴用戶它可以被點擊。

例如,當涉及到按鈕時,只需最輕微的漸變變化就可以創造奇蹟。 例如,Eventbrite 主頁在其圖標上使用輕微的漸變變化來顯示它們是可點擊的,並強化用戶所在的位置:

Eventbrite

另一個很好的例子是 eTecc/Interactive 的網站主頁。 他們實際上使用 aa 填充來讓用戶知道某些東西是可點擊的。

這是一種非常簡單的方法來弄清楚如何通知用戶什麼是可點擊的,什麼是不可點擊的。 隨著事情變得越來越平坦,這種視覺反饋變得越來越重要。 奇怪的是,這是蘋果可以改進的地方。 查看 Apple.ca 主頁。

看起來頂部的鏈接是可點擊的,確實如此,並且有一個小的漸變變化來重申用戶的知識。 我們還可以假設查看畫廊選項也是可點擊的,並且再次有顏色變化來加強這一點。

蘋果主頁2

但問題是整個屏幕實際上是可點擊的! 這對用戶來說非常不直觀,作為碰巧點擊很多的人,我花了一段時間才弄清楚為什麼頁面不斷變化。 它根本不是一個直觀的 UI。

可點擊的屏幕蘋果

從平面的角度

只是有創意 因此,儘管 Apple 並沒有 100% 地做到這一點,但它們已經非常接近了。 移動可以讓設計師構建他們想要的平面界​​面,同時讓用戶知道什麼是可點擊的,什麼是不可點擊的。 注意到所有的例子都是非常扁平的設計嗎? 完全披露是我計劃的。 它說明了扁平化設計可以用於按鈕,只要有反饋。

這是一個沒有反饋的扁平(ish)設計的例子——雖然我很清楚它是一個按鈕,但沒有反饋它確實感覺有點像我的電腦不工作。

對比度+顏色

可悲的是,沒有一個特定的 RGB 代碼可以保證人們點擊。 但是有一些很好的規則可以幫助你。 如果您希望用戶點擊某些東西,您希望它能夠脫穎而出。 這意味著您需要它與周圍的任何其他事物形成鮮明對比,即使這意味著打破品牌的調色板。

例如,David Hamill 建議對不用於其他任何內容的超鏈接使用顏色。 在他的網站上,每個鏈接都是粉紅色的。 用戶很容易知道什麼是鏈接,什麼不是。 結合將鼠標懸停在其上時的更改,當您可以單擊某物時,對用戶來說非常明顯。

大衛·哈米爾

這種顏色和對比度問題最常出現在號召性用語 (CTA) 和按鈕上,顏色的微小變化可以帶來巨大的利潤變化。 例如,Vibethink 撰寫了有關 CTA 和按鈕的文章,並報告說更改按鈕的顏色和形狀可將轉化次數(閱讀:點擊次數)提高 35%。 他們認為增加的對比度使用戶更容易點擊。

氛圍思考

但是他們改變了兩件事,所以這不是絕對科學的。 Hubspot 在 2011 年發布了一些對紅色和綠色按鈕的 A/B 測試結果,發現紅色按鈕的性能比綠色按鈕高 21%。

中心點

因此,顏色和對比度可以在讓用戶點擊內容方面發揮重要作用。

包起來

魔鬼在細節中。 作為設計師、開發人員、UX 人員和營銷人員,每當我們製作可點擊的東西時,我們都是在要求用戶做某事。 點擊這裡。 提交申請表。 聯繫我們。 立即購買。 不管是什麼,這是我們需要的他們擁有的東西。 那麼為什麼不簡化呢? 幫助您的用戶點擊(並因此可能對您有所幫助)的最佳方式是使其易於點擊。 通過使按鈕符合信息亭風格設計的期望,通過使字體在屏幕上易於閱讀(即使它們很小),並通過提供有關按鈕和可點擊內容的反饋,您可以讓用戶的生活更輕鬆。

就是這樣,真的。 當您製作可點擊的內容時,同時讓用戶的生活更輕鬆。

喜歡這篇文章嗎? 您可能還想閱讀我們的了解您的用戶以改善您的網站 UX 設計帖子或我們的每個 UX 設計師都應該擁有的偉大產品