想要提高網頁轉換率?試試這 16 個 UI 祕訣

評論
評論

kuba_photo

本文原作者加拿大 UI 設計師 Jakub Linowski

優異的 使用者介面(user interface,UI)讓使用者用得順心,從而提高轉換率(conversion rate),換言之,好的 UI 在使用與銷售層面上形成雙贏。UI 設計師 Jakub Linowski 列出 16 點改善 UI 的訣竅 1,而這份清單仍在繼續累積,有興趣的讀者可以 訂閱 他的電子報,隨時獲得最新的 UI 祕訣。

單欄型式優於多欄

單欄型式讓你更能掌握自己的內容,從頂部到底部一氣呵成,用故事引導讀者,最終是要誘引他們「採取行動」(call to action,下稱 CTA,意指下載或消費等目的);而多欄反而可能導致讀者分心。

idea001

不要劈頭銷售產品

「略施小惠」給使用者,販賣的意圖不要設計得太明顯。小小的優惠或禮物,對未來的銷售會帶來大大的幫助。

idea002

統一相似的功能,避免支離破碎的 UI

瀏覽網站時,我們很常看到琳琅滿目的元素或特色,但它們的功能毫無二致,而相似的選項太多,只會提高讓使用者無所適從。倘若發現自己的網站內有以不同型式重複相同功能的狀況,不妨考慮重新設計 UI,把類似功能整合起來。譬如圖中「Customer Service(客服)」、「Contact Us(聯繫我們)」其實是一樣的意思,應當保留一個選項就好。

idea003

使用者見證或提出銷售實據

「社會認同」(social proof)是刺激轉換率很好的策略,自己再怎麼天花亂墜終究只是自吹自擂,請使用者見證或數字實據才有效。

idea004

主要目的請反覆強調,別只提一次

希望使用者點擊的連結或按鈕(比如購買或下載),別只出現一次,可以考慮放在單欄網頁的頂端與底部,或在多個頁面呈現。

idea005

清楚區別三種功能性(可點擊、已點擊、純文字)元素

可點擊的元素(連結、按鈕)、已點擊的元素、純文字三者彼此應該以顏色、深度或對比等各種設計技巧清楚區隔,讓使用者瀏覽網站暢行無阻。例如左圖,藍色字體是連結,黑色字體是使用者點擊的選項,或者是使用者正在瀏覽的頁面。

idea006

突顯推薦方案

如果服務有多種選擇,請把最推薦的方案強調出來,如左圖就將「product X」特別放大,Y、Z 縮小。

idea007

善意提醒 vs. 突兀確認

如果使用者更改了某個選項,用一行文字提醒他們可以「復原」就好,無需大費周章設計「再次確認」的跳出視窗。因為多數時候使用者的動作都具有意識,後者太突兀,可能讓使用者覺得被糾正而產生被冒犯的感覺。

idea008

清楚闡述目標客群

描繪適合使用你服務或產品的客群,可以連結到更多相似特質的人,同時也讓他們感受自己的獨特性。

idea009

肯定,避免猶豫不決

語氣應該直接且肯定,優柔寡斷是大忌,訊息中如果出現「也許⋯⋯」、「有趣嗎?」、「想要嗎?」等疑問字眼,在顯示自信與強調權威上可能還有進步空間。

idea010

採用強烈對比

CTA 應該與眾不同。運用色調、深度、互補色等方式,將 CTA 跟其他網頁元素區隔開來。

idea011

產品的誕生地點

說明你、你的產品或服務來自何處,就像在自我介紹一般,賦予人性化的親切感受,而且強調產地或許也會帶來品質保證的效果。

idea012

表單問題愈簡化愈好

註冊表單太雜,使用者往往容易不耐煩而半途放棄,問題盡量少而精簡。

idea013

別把選項藏起來

下拉式選單雖然不佔空間,但卻讓選項更難被察覺。適合下拉式選單的問題是可預測性的或者人人皆很熟悉的時間(如出生日期)或地理位置,跟產品或服務有關的重要問題選項,最好並列在頁面明顯的位置上。

idea014

連貫順暢的頁面

不要讓使用者產生「已經捲完頁面」而實際上根本還未看到底部的錯覺。製造一種視覺型式或節奏,令使用者得以順利瀏覽完整個頁面,才不會白費苦工。

idea015

不要分散焦點

如果你的網頁唯一目的是要觸發使用者捲到底部時「採取行動」,那中間安插的任何連結都可能導致他們分心,甚至將他們帶離你的網站,因此必須小心謹慎的安排連結數量與位置。

idea016

相關文章

別用瞎扯倡導對的事!104 實驗影片如何誤導人資專業?

廣告很明顯是在「陰」那七個主管,讓他們成為有眼無珠的笑柄。許多網友也留言嘲笑他們「狗眼看人低」之類的言論。說真的,他們真的有做錯什麼嗎?在職場選才的制度發展有一定的成熟度與專業度,根據一個人的過往學經歷去推測他「近期的可能性」何錯之有?

組織變大也要保持效率!Airbnb 打造跨部門團隊 DesignOps,搞定內部溝通

最近 Airbnb 的設計維運總監(DesignOps) Adrian Cleave 在官方部落格上發表了一篇關於建立設計維運制度的文章,介紹如何在大規模的產品下,繼續保持設計效率以及有效地協同團隊。

國際食物外賣巨頭 Delivery Hero 宣布買下線上訂餐美食外送平台 foodpanda

總部位於柏林的國際外賣巨頭 Delivery Hero Holding GmbH 週五宣布買下線上訂餐美食外送平台「foodpanda 空腹熊貓」,此併購案可謂是兩家均來自德國、均從事食物外送的新創公司終極結合。

評論