前陣子把 Nowill 的「好感度 No.1 的網頁設計：RWD 不出槌法則，網站在任何裝置都完美呈現」給讀完了，是一本 4.5 顆星好看的書，裡頭提到的 web font 解決方案我有去試，其中一個就是 Fonts.com，因為 Fonts.com 裡頭有繁體中文的網頁字體，只可惜速度很慢就是了，並不實用。
在測試 Fonts.com Web Fonts 的過程中，我發現他們的 call for action 設計非常有趣，請留意下圖中那些「Start a free plan」按鈕所出現的次數：
令人驚訝地，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
從上圖中你可以看見，在觀看這個 section 時，你的眼球很自然地會先落在左上角的標題和右方的圖示上，接著才是左邊的內文，而且我相信大部分的「網路逛街者」都是視覺動物，更不用說那些不諳英文的人，更是只看圖和找按鈕，以 Fonts.com 是做全世界的生意來說，把 call for action 按鈕放到圖示的下方，我覺得是很合理的設計。
若你又仔細看上圖的話，Fonts.com 的 section 左側下方其實也是有個按鈕，叫做「Learn more」，這個位在段落尾巴的「Learn more」並不屬於 call for action，而是使用者閱讀文字動線的一環，有點類似 Apple.com 那種一直不斷在每個 section 給你「進一步了解」的設計手法：
Apple.com – MacBook Pro
前面提到，Fonts.com 選擇將 call for action 放在圖示的下方，將 read more 放在段落的下方，這種切分的手法，等於同時滿足了這兩種 user 的需求：一個想好好看，一個急著找解決方案。
－－－
除了 Fonts.com 有這種連續性 call for action 設計之外，我也在 responsive CSS framework Gumby 的網站上看到同樣的手法（Gumby 我是經由樂在設計才知道的）：
上圖「Download Gumby」的按鈕出現了 6 次，而且很棒的是 Gumby 有加 icon，不但可以讓 user 潛意識覺得網站整體比較有質感，而且還盡可能地讓網站跨越語言的限制，讓不諳英文的 user 也能輕易發現 download 按鈕的位置。
提醒：切圖已死，用 Font Awesome 做 icon 就好囉！
－－－
有連續性 call for action 設計，當然也有不連續性的，像 KKBOX 就是只放頭尾：
中間 4 個 section 都沒有任何的 call for action，我覺得算是「特別」的設計，也許人家有人家的考量，不想讓按鈕去破壞畫面之類的。也也許他們相信如此的 section 安排，是會讓 user 一口氣捲到底然後按下 call for action 的。
另外一種 call for action 位置設計，則是像 Spotify 把它固定在 navigation bar 上面，無論 user 瀏覽到哪裡，call for action 也總是在上面等你：
除此之外，call for action 當然也會在頭尾出現。但我覺得這種 nav bar 的 call for action 設計在動線上比較「不順眼球」，因為眼球總是由上而下地看，把重要的 call for action 放在最上面的位置，是否會因此錯失掉一些機會了呢？也不一定。我現在反而認為，按照 user 掃視瀏覽的習慣，call for action 就是多多益善。
反正從來沒有 user 會把你的網頁給從頭到尾看一遍，還倒不如珍惜每個相聚的機會。
歡迎留言，我都會回