〔UX〕連續性 Call for action 網頁設計案例

In 設計

前陣子把 Nowill 的「好感度 No.1 的網頁設計:RWD 不出槌法則,網站在任何裝置都完美呈現」給讀完了,是一本 4.5 顆星好看的書,裡頭提到的 web font 解決方案我有去試,其中一個就是 Fonts.com,因為 Fonts.com 裡頭有繁體中文的網頁字體,只可惜速度很慢就是了,並不實用。

在測試 Fonts.com Web Fonts 的過程中,我發現他們的 call for action 設計非常有趣,請留意下圖中那些「Start a free plan」按鈕所出現的次數:

ux-design-trends-call-for-action-fonts-com-web-fonts

令人驚訝地,Fonts.com Web Fonts 的 call for action 按鈕在同一個頁面竟然出現到 9 次這麼多,每一個 section 都有 call for action。

我回想當時自己的這段 user journey,我就是進入 Fonts.com Web Fonts 的首頁之後,沿著 section 往下看,看到中段時,開始發現有「Start a free plan」按鈕,再幾個 section 之後,我又看到「Start a free plan」按鈕,當時我的心動指數是不斷提昇的,在瀏覽的這個過程中,一連串的 call for action 按鈕,彷彿有個人在我耳邊不斷地慫恿我「快行動吧!快行動吧!」

然後我就真的行動了!真是個成功的設計。

也許 Fonts.com 就是如此堅信 user 會有這種跳躍式的捲動掃視行為,所以才不願意錯放任何一個可以說服 user 採取行動的機會。我認為這種連續性的 call for action 設計,不光是從行銷面有實質幫助,從 UX 面也是另一種思維,我的角度是:

Fonts.com Web Fonts
Fonts.com Web Fonts

從上圖中你可以看見,在觀看這個 section 時,你的眼球很自然地會先落在左上角的標題和右方的圖示上,接著才是左邊的內文,而且我相信大部分的「網路逛街者」都是視覺動物,更不用說那些不諳英文的人,更是只看圖和找按鈕,以 Fonts.com 是做全世界的生意來說,把 call for action 按鈕放到圖示的下方,我覺得是很合理的設計。

若你又仔細看上圖的話,Fonts.com 的 section 左側下方其實也是有個按鈕,叫做「Learn more」,這個位在段落尾巴的「Learn more」並不屬於 call for action,而是使用者閱讀文字動線的一環,有點類似 Apple.com 那種一直不斷在每個 section 給你「進一步了解」的設計手法:

Apple.com – MacBook Pro
Apple.com – MacBook Pro

前面提到,Fonts.com 選擇將 call for action 放在圖示的下方,將 read more 放在段落的下方,這種切分的手法,等於同時滿足了這兩種 user 的需求:一個想好好看,一個急著找解決方案。

---

除了 Fonts.com 有這種連續性 call for action 設計之外,我也在 responsive CSS framework Gumby 的網站上看到同樣的手法(Gumby 我是經由樂在設計才知道的):

ux-design-trends-call-for-action-gumby

上圖「Download Gumby」的按鈕出現了 6 次,而且很棒的是 Gumby 有加 icon,不但可以讓 user 潛意識覺得網站整體比較有質感,而且還盡可能地讓網站跨越語言的限制,讓不諳英文的 user 也能輕易發現 download 按鈕的位置。

提醒:切圖已死,用 Font Awesome 做 icon 就好囉!

---

有連續性 call for action 設計,當然也有不連續性的,像 KKBOX 就是只放頭尾:

ux-design-trends-call-for-action-kkbox

中間 4 個 section 都沒有任何的 call for action,我覺得算是「特別」的設計,也許人家有人家的考量,不想讓按鈕去破壞畫面之類的。也也許他們相信如此的 section 安排,是會讓 user 一口氣捲到底然後按下 call for action 的。

另外一種 call for action 位置設計,則是像 Spotify 把它固定在 navigation bar 上面,無論 user 瀏覽到哪裡,call for action 也總是在上面等你:

ux-design-trends-call-for-action-spotify

除此之外,call for action 當然也會在頭尾出現。但我覺得這種 nav bar 的 call for action 設計在動線上比較「不順眼球」,因為眼球總是由上而下地看,把重要的 call for action 放在最上面的位置,是否會因此錯失掉一些機會了呢?也不一定。我現在反而認為,按照 user 掃視瀏覽的習慣,call for action 就是多多益善。

反正從來沒有 user 會把你的網頁給從頭到尾看一遍,還倒不如珍惜每個相聚的機會。

Facebook Comments


Submit a comment