萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 淺析提升網站首頁設計賣相的幾個方法

淺析提升網站首頁設計賣相的幾個方法

淺析提升網站首頁設計賣相的幾個方法 三聯教程

  網絡使用者就像鲨魚一樣,一定要不斷往前游,否則就活不下去;他們永遠都在浏覽,挖掘有趣的東西。

  在這個現實下,你的產品如果沒有辦法立刻引起注意,並召喚使用者采取行動,就表示這個產品的賣相不是很好。技術很優秀,服務設想很周到,但就是沒人鳥;這是一件很枉然的事情。

  這篇文章要介紹的就是提升賣相的幾個好方法,而決勝點就在你的首頁(登入頁面?第一個頁面?反正你知道這是什麼意思)。

  立刻引起注意的簡明標題

  這其實就是任何產品首頁最重要的特質。

  一句清楚、有力,又能感動人的標題,讓使用者一秒就被抓著,然後想要再逛看看;當撰寫這個標題的時候,可以用下列問題評估這句話有沒有效:

  對這個讀者而言,我們產品最重要的好處是什麼?

  有沒有包含下面這四個U:有用(Useful)、特別(Unique)、說明清楚(Ultra-specific),以及急迫性(Urgent)。

  說明好處,不要陳述功能

  特別要注意的是,好處不等於功能,例如以下的例子:

  產品:ipod 64GB。

  功能:有64GB的儲存空間。

  好處:可以在你口袋塞10000首歌,用它party一整夜。

  在首頁,應該對使用者強調的是好處,因為這才是他們真正需要的。而且,下標可以是一件相當嚴肅的事情;事實上,就算是用整個團隊的精力去brain storming,或是頻繁地分組測試(只為了一句標題),也在所不惜。

  一句話說完

  而對這個議題,UX Movement則指出,如果要建立獨特的賣點,就要在一句話把重點講完。要容易閱讀,不要咬文嚼字的,讓讀者一眼就看出訴求是什麼;例如coacademy的例子:

  圖片左邊是他們現有的標題,就是屬於咬文嚼字的那種。但事實上他們可以用一句話把事情說完,右邊的標題的確比左邊的簡單明了。

  避免使用可以用在任何人身上的模糊形容詞

  要描述你的網站其實可以有很多方式,但問題出在有些形容詞真的太廣泛了,誰都可以用,用這些形容詞不會讓你的網站特別有趣。不如使用更精准、獨特的詞描述你可以帶給使用者什麼好處。這能讓讀者對你能提供的東西有更清楚的印象,知道你的產品跟別人有什麼不一樣,進而想了解更多。

  sideTour的網站就滿特別而有趣的,但是使用者卻沒有辦法從塬本的標題中看出獨特的賣點是什麼。他們的標題使用太廣泛的形容詞,每個網站都可以用;不如仔細想想怎麼樣才最能形容你的產品,例如上圖,第二句會比第一句明確很多。

  字體真的很重要

  Oliver Reichenstein 早在2006年就提出了網頁內容有95%都是typography,字型排版學。

  選一個好看的字體,以及畫出順眼的layout都可以大幅增加網站的賣相,即便只有簡單的字體、區塊與線條,仍然很好看。

  例如Onswipe就用了一個優雅的字體達成獨特的賣點。這可以讓使用者感覺到產品是時尚而具有創意的。還有,這行字也相當清楚明確,搭配適合的字體使用,更為加分。值得注意的是,他們放的是web font,而不是用圖,不但可以增強SEO,也不會在跨裝置的時候產生解析度的問題。

  首頁引發使用者行動的訊息(Call to action)只能有一個

  所有的內容,都有一個要讓使用者采取的動作,然後要確保使用者容易采取這個動作。

  為了讓使用者順利完成動作,任何表單或連結上的按鈕都要非常清楚,要夠大、夠明顯;這同時也表示,首頁引發使用者行動的訊息(call-to-action)只能有一個,讓使用者接收一致的訊息,並且只執行一個動作。

  分歧的訊息只會讓使用者混淆,然後讓他們開始考慮;而,讓使用者考慮要不要使用是最糟的情況,他們甚至會開始想:我到底在這裡干嘛,並且打消剛剛下的購買決定。

  減少摩擦

  除了要確保call to action的訊息有經過清楚包裝之外,減少摩擦也很重要;這意思是要設法免除使用者的一些焦慮。

  可以思考到陌生頁面時,你通常會想什麼,例如:我真的需要這個東西嗎?這個對我有什麼好處?其他地方還有什麼東西可以按?還有誰會用這個?是真的有一家公司在經營這個嗎?他們會怎麼處理我的email帳號?他們會不會盜用我信用卡啊?

  仔細思考這些疑慮,可以更幫助你跟使用者有效溝通。

  使用者可能懷疑我需不需要這個或這產品有什麼好處,這個時候,就給他們實際的數據或有公信力的第三方證明,可以有效增進更深入的對話。至於信用卡相關的問題,給他們看安全措施、防詐騙措施,以及來自營運團隊的保證書等等,都會某些程度的降低使用者的焦慮。

  資料來源:Quora、UX Movement;圖片來源:Βethan,CC Licensed

  本文來源:http://techorange.com

copyright © 萬盛學電腦網 all rights reserved