首先,是明確的目標。
在委託者覺得應該找人來設計網頁並付諸行動時,心中已經思考過網站的大致方向,包括目的、針對對象、主要的資訊等等,這是設計的大綱。一般來說,和設計公司洽談時,往往就是以公司類型為基礎,再逐一討論各項大綱。但這並不夠明確。仔細琢磨委託者的需求,我們應該進一步思考:
- 網站要服務的對象是那些人?現有客戶?潛在客戶?一般大眾?同好?
- 這些人需要那些資訊、服務?誰提供?方式?
- 他們拿這些資訊的目的?有沒有後續動作?為何?
- 委託者的組織架構、業務運作、人事編制、文書作業,和上述的資訊有何連動?
- 同業或競爭對手的作法、強項。自我期許?
再者,是適合的風格。
風格的設計除了特殊的網站需求之外,大抵以美觀、舒適為基本要件,但除此之外也應該考量:
- 符合公司、產業、產品或業務的形象。
- 瀏覽時的情緒氛圍與網站目的一致。
- 清楚勾勒出資訊的舖陳脈絡、輕重緩急。
- 具備資訊延展性、風格一致性、設計替代性。
這其中前二項的形象勾勒和氛圍舖陳較為主觀,在溝通上可以透過一些經典的作品來建立共識,消弭雙方的認知落差。後二項的資訊陳列和版面配置就客觀得多,其主要關鍵在於閱讀習慣。
舉例來說,由於電腦的設計使得內容以橫式陳列、由左到右為主,而雙眼的構造讓人覺得寬螢幕遠比窄螢幕舒服。在這些因素之下,使得絕大多數的網頁,以選定適當的寬度為基準,然後將延伸的部份採用由上而下的方式發展。同時,大抵都將公司標誌放置於左上角位置,然後依資訊的功能性由左而右,由上而下依序舖陳。
第三是流暢的動線。
所謂的動線就是訪客的瀏覽過程,這可能包括連續性的閱讀過程或跳躍式的搜尋過程。不論是那一種情況,規劃動線的基礎就是模擬情境,而情境則是來自於網站的目的。舉購物網站的例子來說,網站的主要目的在於展示、介紹商品並且盡可能促成交易。那麼基本的情境包括:
- 搜尋模式:任一頁面之搜尋欄位→商品列表→瀏覽→追蹤。
- 促銷模式:受促銷訊息吸引,進入特定網頁瀏覽→追蹤。
- 陳列模式:依照網站管理員所設定的分類方式進行瀏覽→追蹤。
- 比價模式:由訪客所追蹤之商品,依其特性提供比價資訊。
- 訂購模式:從訪客將商品置入購物車、指定數量、輸入訂購資訊到送出的過程。
規劃動線時,必須以訪客在情境中的感受和需求為主,檢視提供的資訊是否清楚、詳實,流程間切換的動作是否明確,務必讓訪客清楚了解其動作的目的和結果。同時介面功能的陳列位置應保持其一致性以利操作。
第四是適量的資訊。
網站應該提供多少內容、產品資訊應該多詳細,考量關鍵在於網站提供資訊後預期訪客進作的動作。
以外銷廠商為例,網站的主要目的之一在於透過網路收到訂單,資料多寡便以訂購者需要知道的範圍為準。因為廠商間的訂單必須透過雙方的洽詢、議價、協定出貨付款方式、....等交易細節後才算完成,因此網站資訊只為達到買賣雙方的接洽、互動,而非直接在網站上收單。過少的資訊容易讓買家難以理解商品是否符合需求,而降低洽詢的意願,值得計算一下客戶發出詢價訊息後,多久會得到回應、解決問題,這可以明確突顯出足夠的資訊能產生多少價值,節省多少人力、時間。
而,太過繁瑣的資訊也有缺點。包括:增加資訊建置、維護的人力成本、浪費買家的瀏覽時間、增加網頁設計的難度。因此,資訊的陳列應該以促成訪客的預期動作為主,而重要性較低的資訊則可以精簡、省略或以較不佔版面的方式呈現。
最後則是完整的設計。
評斷網頁設計是否完整的因素很多,但仍離不開網站目標。對照上述關於網站目標和風格設計的切入點,這點可以再列出一些延伸思維:
- 網站要服務的對象是那些人?現有客戶?潛在客戶?一般大眾?同好?
設計中是否有足以引發訪客共鳴的因子:照片、圖示或用詞,好讓訪客在第一時間對網站、企業產生親切感 - 這些人需要那些資訊、服務?誰提供?方式?
訪客需要的資訊、型式是否方便取用,是否提供必要的協助,能否簡化?後續追蹤?延伸資訊? - 他們拿這些資訊的目的?有沒有後續動作?為何?
由完成閱讀→進行動作之際,是否清楚的引導;訪客執行動作後,是否清楚的顯示並提供方便的檢視、確認方法。 - 符合公司、產業、產品或業務的形象。
是否在網頁的細節處,巧妙地突顯公司或產品。例如量身訂作的圖示、照片或圖案。 - 瀏覽時的情緒氛圍與網站目的一致。
是否針對情緒氛圍規劃呈現方式及內容,例如眾多網站慣用的手法,在節日前後數日內以節慶風格呈現。 - 清楚勾勒出資訊的舖陳脈絡、輕重緩急。
資訊的陳列依訪客的瀏覽狀態而異,卻不會限制訪客。例如購物網站上常有複雜的分類選單,顯示狀態若能突顯訪客的瀏覽狀況將可減輕訪客的瀏覽記憶壓力,同時透過動態的呈現方式,也不致於限制訪客轉換瀏覽路徑的需求。 - 具備資訊延展性、風格一致性、設計替代性。
網站運作隨著時間推移,總是需要隨之修正,以免給人感覺僵化、沒生氣的感覺。但修正的目的在於氣氛、情境的調整,而非網站架構的變更,因此在網站風格的佈建和設計替代性的規劃就非常重要,才能讓網站隨時轉換情境來服務訪客。
以上提到很多網頁設計的重點,似乎非常複雜,但其實不然。網路發展十餘年來,陸續出現許多技術來解決各種需求。因此,要達到上述的理想狀況並非難事,只要掌握網路的趨勢、善用技術優勢就能發揮最大的效益。下一篇,筆者將說明目前網路的趨勢,敬請期待。
