By

使用者體驗-頁面名稱的重要性

使用者體驗-頁面名稱的重要性

頁面名稱 – 網站的路標

頁面名稱是使用者體驗中相當重要的一環,聽起來好像是理所當然的事情,但是,你的網站中的頁面名稱都有好好的思考過嗎?

在頁面中頁面名稱代表的有二個:

  • Title – 它是一整個頁面中最重要的標籤之一,也是使用者在搜尋引擎搜尋時影響點擊與否的一大因素!
  • 標題 – 在HTML中即是每一個頁面「只能」設置一個的H1一級標題,它應該是放置在「網頁」一進來最顯眼的位置及設計。

住在台灣的你,只要有開過車就會知道,在世界地圖上小小的台灣,高速公路的建立是我們交通順暢相當重要的一環,在台灣的高速公路上:

  • 路標很大,很容易就能看清接下來的高速公路出口是那裡。
  • 路標都放在駕駛人的頭頂上,所以只要略抬頭就能看到。

但是,所有的地方都能如此嗎?尤其是當你在鄉下地方,當我在白紙上畫旅行地圖前往出遊時,你是否會跟我一樣往往會看到一些現象:

  • 看不到路牌。
  • 路牌設置的地方是你騎車(開車)看不到字的方向。

因此呢,在交通號誌良好的區域,要去那兒都比較容易不容易迷惑,當在高速公路上開車時,你還會有餘裕去注意交通狀況、多聊天以及多聽喜歡的音樂。


網頁名稱就像是網站上的路標。與路標一樣,當一切順利時,我可能不會注意到網頁名稱。但是只要我開始感覺自已找不到方向,我就可以從網頁名稱輕鬆得知自已所在的位置(如果有加上導覽的麵包屑就更好了對吧?)。

對於網頁名稱,你必須瞭解以下四點:

每一頁都要有名稱

就像每一個路口都要有路標,每一頁也都該有名稱。

設計師有時會想,「嗯,我們已經在導覽列上標示出頁面名稱了,這樣應該夠了吧。」這是個很吸引人的想法,大為此舉可以節省空間,而且在頁面版型上還可以少做一個元素,但這樣並不夠,你還是需要一個頁面名稱。

名稱必須放在正確的地方

在網頁視覺皆層結構中,網頁名稱應該要放在頁面內容的框架之外。(但這仍是網頁名稱,並非導覽或者廣告,那些都只是結構的一部份。)

名稱必須要顯著

你需要位置、大小、顏色與字體的組合,使名稱能夠表達出「這是整頁的標題。」通常來說,名稱必須使用整頁最大的字體。

名稱必須與點選結果相符

即使沒有人會特別提及這一點,但每個網站都會與訪客進行一些隱性的社交接觸。

換句話說,如果我點了一個寫著「台中網路行銷」的連結或者按鈕,網站就應該帶我進入一個名稱為「台中網路行銷」的網頁。無論是使用者體驗的「合理性認知」或是SEO搜尋引擎自然排序,如此才是一個合情而合理的一件事情。

 

在SEO中,點擊「台中網路行銷」的連結或者按鈕,出現的是跟它無關的內容,會導致什麼呢?必然是使用者立即關閉頁面,亦即增加網頁的跳離率,一個使用者一進去都會馬上關掉的頁面,你認為搜引擎會讓它有好的排名嗎(當然有某家搜尋引擎結果往往頗爛.. = = )?這看起來很簡單,但卻是很重要的一件事情。每當網路違背了這一原則時,我都會被迫思考,即使思考時間只有百分之一秒,如果連結名稱與網頁名稱差異很大,都會讓我有一種衝突感以及不舒服感,一般的使用者不會去怪做網頁的人,他只會去怪這個網站的品牌。

 

 

當然,有時候你必須做出妥協和因應情況的對策,通常是因為空間的限制。如果我點選的文字與網頁名稱不完全符合,那至少要讓他們儘量相符,以及讓出現的結果造成差異的原因要顯而易見。

 

例如,我在Lativ的網站中,上面的選單是「MEN」、「WOMEN」、「KIDS」,點進去後不會有任何的標題,而是進入了男裝、女裝、兒童服飾等區域。文字上並不完全符合,但是讓人有相同一致的感覺,所以我並不會花腦筋去思考其中的差異。

但坦白說,我第一次進入Lativ網站中的確稍微疑惑一下,為什麼呢?因為我進去時是在Yahoo首頁,看到女裝想挑一件送朋友,但是看看,還想看看男裝,但是,咦..怎麼側邊欄都是女裝,大概再花個五秒鐘才發覺上面頂部的英文選單,也只能說英文不大好的客人不是他們很重視的客群吧..XD


經營網站SEO的排名只能當作是網路行銷中重要的一塊但不是全部

最重要的還是在於改善使用者瀏覽的體驗,

從而提高成交率,降低跳離率

當然,我也還在學習當中

之後會試著多分享一些經營上的心得以及數據

你若有任何的疑問及意見都非常希望能在下面討論或來信指教!

(Photo via LeeLiu, CC License)

 

 

 

 

 

 

 

 

 

 

 

 

魔鬼,就藏在細節之中

留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top