September 12, 2008

傳送至 Kindle
互動式隨選列印/另存成 PDF

[敲打鍵盤]親和力的設計花樣──打造有力的首頁

這一篇是我給自由軟體鑄造場電子報的稿件,刊登於第九十六期 (2008/01/13)。

親和力的設計花樣──打造有力的首頁

「設計花樣」是我們在做各種設計時所使用的術語,前一期我們介紹了「多重導覽途徑」這個設計花樣,本期則讓我們來看看跟「首頁」有關的設計花樣。

每個網站都會有首頁,首頁就像報紙的頭版、雜誌的封面、公司的門面,要說一個網站給人的第一印象如何,首頁絕對是佔了相當重要的地位。當我們考慮網站親和力──這個網站是否能帶給訪客親切和善的感受──的時候,首頁自然也會是重要的指標。

前一期所提到的多重導覽途徑,自然是首頁所能運用的設計花樣,但是這還不夠,因為首頁往往是網站的主要入口,不但要能吸引訪客(如果連這一點都辦不到,又怎麼能說有親和力呢?),同時還要能在許多其他因素間取得平衡,包括像是商標識別、內容的安置等等。

說到吸引訪客,有不少人相信首頁的第一個可見範圍又尤其重要;第一個可見範圍的意思是說,當訪客用瀏覽器來到首頁時,在不捲動瀏覽器視窗的前提下,所能看到的局部。想像一下,當你在便利商店看到一疊疊的報紙,通常你不會看到完整的頭版,因為報紙的折法,所以你祇能看到頭版的上半部,對折線以下的部分得要把報紙攤開來了纔能看到;既然網站的首頁猶如報紙頭版,因此首頁的第一個可見範圍也就有了個來自報紙的說法,叫「折線以上」。當然,網頁不是報紙,瀏覽器沒有固定的尺寸,「折線」更不是在正中間把整個網頁平分為二,甚至可能會有左右分的垂直折線;如果訪客用的是螢幕朗讀軟體,或者是其他的「線性」瀏覽器,那麼折線可能會以更為抽象的形式存在,例如「第三十秒」或「第 1024 位元」之類的。

確實折線以上是首頁的第一印象,但是並沒有必要把整個首頁的各個部分都塞進那個空間;一般說來,祇要折線以上/以前的內容,能誘使訪客將瀏覽器視窗捲動到其他部分,也就功德圓滿了。在這個區域中,唯一非要有不可的,大概要屬網站商標吧。你可能會問,為什麼這會跟親和力有關?

因為商標是網站識別的重要依據,而明確的網站識別對使用經驗來說,可以塑造一致的觀感與信任。當訪客感受到自己身處同一個網站,對該網站的使用經驗、情感、信任就會接續傳承而跟著累積。當他們感受到這一點時,就會預期網站的設計哲學、服務條款、隱私權政策等的一致性,也就更能掌握整個網站──網站也就更具親和力了。

雖然商標背負著這麼艱鉅的任務,但是可也別顧著把商標做得又大又明顯,反而佔掉了所有的空間。人們是來網站完成某些目的的,而不是單純來欣賞你的商標設計;如果首頁是個斗大的商標,那麼你的確能建立鮮明的網站識別──人們將會記得你的網站使用不便,如此就跟親和力背道而馳了。

運用前一期所介紹的設計花樣,讓你的首頁跟其他網頁具有一致且合乎邏輯的網頁架構,做出容易使用的導覽工具,這些都是增進親和力的要旨。接著,別忘了網頁的主角是「內容」,所以在規劃了網頁架構、導覽工具後,還得對首頁的內容下點功夫。

首頁是網站的入口,不但要能吸引訪客,還要把他們帶往正確的方向,因此有些增進親和力的手段可以派得上用場。首先,首頁的內容應該要鮮明活潑,讓訪客感受到網頁的更新與生氣,如果這些內容帶有強烈的線索與暗示,就能讓訪客祇消簡短的篇幅,猜到網站的目的與內容,並且能藉此迅速地導覽到想去的網頁;另外,如果還能根據使用者提供客製化的首頁內容,就再好不過了,因為這樣子可以幫助訪客精簡例行公事,而專注於他們覺得重要的任務。

既然說到首頁內容應該要鮮明活潑,還有一個要點一定要強調一下,就是首頁不宜使用過多的內容,或過於花俏華麗的效果;因為首頁是入口,所以必須要確保初次來訪的訪客就算在相當受侷限的條件下,也能順利取得首頁內容。這裡並不是要禁止你把首頁打扮得漂漂亮亮的,而是要各位確保首頁不應該要花上幾分鐘纔能載入完畢,或者得安裝特殊的外掛程式纔能順利一窺其廬山真面貌。華麗、新潮、豐富的媒體內容,得在訪客願意期待的前提下,纔有出場的機會。

像這樣的設計花樣,看起來主要是在增進網站的可用性,不過同時也會增進網站的親和力,讓訪客感到自在,並且祇需較少的資訊就能完成目標。

前述的「首頁入口」要讓訪客能立即明白網站目的,這還需要另一個設計花樣,那就是「預先提示價值所在」。這個設計花樣所要解決的問題很直接:有太多網站讓人們無法一目了然,看不出網站到底是為什麼而存在著的。網站的首頁必須要建構網站價值、營造第一印象並提出承諾,這正是親和力所在,因為這麼一來,訪客將能在最短的時間內,知道自己為什麼要來這裡、來這裡能完成甚麼、可以期待甚麼。

要滿足這個設計花樣,基本上會需要:

  • 一個具說服力的承諾
  • 一項獨特的提案
  • 易於迅速理解的文案、圖樣或媒體

等等,這三件事還必須結合在一塊兒。網站的提案──用來說明網站的價值所在──必須要強而有力,並以此建構出網站的獨特性;然後這樣的提案還得用易於迅速理解的簡短文字或簡潔圖片等形式,加以表達在首頁上。

舉例來說,愛印網的首頁映入眼簾的九個大字:挑產品、改造型、送到家,就充分說明了整個網站的目的,並且以俐落的風格,加深了「明天立刻為您寄出」的迅速處理印象。更棒的是這九個字還擔任了訪客操作流程的指示器,讓人們知道自己已經做了甚麼、正在做甚麼、接下來還會需要做甚麼。再看看 blogger.com 首頁:尚未登入的訪客,馬上就會看到相當簡潔有力的四組圖說,解釋了部落格到底是怎麼一回事、可以怎麼玩,接著提示祇需要三個步驟即可建立部落格。

這些設計都讓訪客能一眼明白這裡是在做甚麼的,並且能預期接下來會發生甚麼事,而樂於參與及使用。用我們一貫的說法來講,這般首頁大大地增加了整個網站的親和力。

最後讓我們再回顧一下本期所介紹的兩個設計花樣:

1. 首頁入口

脈絡背景:
  • 任何類型的網站
所要處理的問題:

網站的首頁乃是多數訪客來訪的入口,因此必須要能吸引訪客,同時還要能在商標、導覽、內容及載入速度等許多不同因素間取得平衡。

相關外力影響:
  • 建立網站識別與商標。
  • 以正確的觀感營造正面的第一印象。
  • 用內容吸引人。
  • 盡可能提供客製化的內容。
  • 在商標與導覽區佔據的位置間取得平衡。
  • 創造易用的導覽工具。
  • 提供強而有力的資訊線索。
  • 提供一致且具邏輯的網頁佈局。
  • 讓首頁能迅速載入。
其他可能會有相關的設計花樣:

預先提示價值所在、網站商標與識別、隱私權政策、個人化的內容、多重導覽途徑、導覽列、動作按鈕、內嵌的鏈結、較長的描述性鏈結標題、明顯的鏈結、頁面模版、格線佈局、折線以上、釐清第一印象、減少檔案數量、能迅速載入的圖片……。

2. 預先提示價值所在

脈絡背景:
  • 網站入口
所要處理的問題:

人們往往無法初到某個網站時便能迅速得知其目的。

相關外力影響:
  • 需求。
  • 整合。
解決方案:

用易於迅速理解的簡短文字或簡潔圖片等形式,在首頁上強而有力地表達網站的價值,並以此建構出網站的獨特性。

其他可能會有相關的設計花樣:

網站商標與識別、釐清第一印象……。

首頁祇是個開始,別忘了網站的內容纔是主角。下一期我們將開始說明,關於撰寫及維護網頁內容時,有哪些與親和力相關的設計花樣。

(+) 於 所發表 | 顯示版本變更: 1.2 |
[創用 CC 授權條款]
親和力的設計花樣──打造有力的首頁〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
歷史上的今天:
迴響
給我迴響吧!
個人資訊








是否記住個人資訊?



請依上圖輸入檢核碼:
迴響





Jedi.org: 部落格 | Weblog | 三太子 | 討論 | MTBook | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | + | @ | Flickr | Lytro | tumblr | NSFW