網站設計實務-網頁設計的核心議題
Fred Wang 2002/04
參考書籍
• 1. Tomas A. Powell, “Web Design設計實務—徹底研究”
• 2. Jakob Nielsen, Marie Tahir, “Homepage完全解構—50個知名網站設計詳析”
Agenda• 什麼是網站設計
• 網站設計流程
• 使用者介面設計
什麼是網站設計Homepage常見的角色
• 雜誌封面
• 對世界展現的面貌
• 藝術品
• 會客廳
• 接待人員或服務人員
• 書本的目錄
• 報紙頭版
• 小手冊
手冊網站與介紹網站評論
• 使用大量的圖檔及Flash動畫造成下載時間過長
• 目的在給客戶良好的第一印象
– 雖然創造第一印象是吸引使用者的重要因素, 但不方便需要時常, 多次使用的客戶
技術優先網站評論
• 技術導向的網站提供友善極多樣化的指引, 這是一個好網站的必要因素, 但過多的輔助工具會造成介面混亂
• 往往使用最新的的Java applet, plug-in, DHTML, XML or CSS格式, 造成瀏覽器的限制, 無法廣泛使用於不同瀏覽器的使用者網站的範圍
網站設計重要信條 • 你不是使用者：直接詢問使用者
• 使用者不是設計者：使用者會有不切實際的期望與需求,他們不會考慮到反應時間,記憶體等
• 針對一般使用者設計,但將差異列入考慮：無法同時滿足一般及特殊的使用者,確定網站的使用對象的種類及比例
• 同時考慮實用性與可用性:實用性(Utility)是符合使用者需求的功能,可用性(Usability)是使用者操作網站功能的能力
• 執行必須接近零缺點: 不要有無法使用的link及“404:Not Found”訊息
• 瞭解並重視web and Internet的媒體限制: 瞭解network, server and protocol; browser, bandwidth到programming技術及演進
• 遵守GUI的原則: 例如藍色及畫底線是可以click的
• 導覽以讓使用者快速找到資料為目的: 成功的網站需要持續提供有價值的資訊及有效的導覽工具, 如search engine, site map, index…, 但是不要過於複雜
• 外觀可能影響使用者對網站價值的首次觀感甚至信任: please see next page
• 對網站最後印象受視覺外觀,內容,技術,可用性及是否成功達成目標的影響：Why Gopher,bbs漸為Web取代
• 以產品及服務本身的獨特性來建立品牌,而非發明獨特的網站介面
– 使用者不是去欣賞您站上的按鈕形狀,顏色或動作的
• 沒有一定的設計適用於每種網站
– 科技網站不同於娛樂網站: please see next 3 page, 選對您的方向
• 控制權應該盡量給予使用者
– personalization的趨勢
網站設計流程Problem Definition and Concept Exploration
• 設定清楚的目標：訂出可測量的目標
– 如：建立一個客戶支援網站,並藉由提供全天候的FAQ來增進客戶的滿意度,且減少25%的電話支援
– 加上期望的訪客數
• 設定特定的用戶群及特定的一組任務
• 腦力激盪
– 發展一份願望清單來涵蓋網站內所有的想法,再根據用戶群的需求納入,以縮小目標
• 對每一用戶群指定百分比,在評估時加權,以比例設計
Requirement Analysis/Specification• 簡短的目標陳述
• 詳細的目標討論
– 包含可測定的目標已檢查網站的效益
• 用戶群討論
– 用戶特性及他們會在網站上完成的功能
• 使用場景討論
– 不同使用者造訪的各種Scenarios包含如何進入,瀏覽到離開
• 內容需求
– 需求規格表,含所需的文字,影像及媒體清單
• 技術需求
– 根據使用者的能力提供HTML,Javascript, Java,Plug-in等
• 視覺需求：草圖,應提供使用者在螢幕大小,頻寬等限制提供指標
• 傳送需求：網站使用量及網頁大小提供Server及頻寬需求的分析
• 網站結構圖：將不同的場景組織成網站結構圖
• 網站的組成 ：規劃執行網站所需的資源,以工時計算, 應包含內容,技術,視覺設計及管理的資源
• 時間表
• 預算
Design Prototyping• 紙上或螢幕區塊圖：
– 由首頁到子網頁, 由上而下方式進行, see next 4 page
– 依需求規格描繪出網頁內各種區塊內的按鈕, 頁首及特徵, 並寫明提示文字
– 不要急於用程式實做, 經過使用者看過後, 此prototype 隨時可能修改
– frontpage, dreamweaver 是不錯的數位雛形工具
Implementation and Unit Test• 模擬網站(alpha website)
– 將構圖分成各部分以HTML,CSS來組合網頁
– 此時先不要放入內容,讓使用者試用看看是否容易使用
– 互動性網頁用假的結果來模擬
– 儘量使用template
• Beta Site實作
– 放置真實內容, 後端元件及互動式元素實作及與前端整合
Integration and System Test • 測試除了視覺外觀正確外還包含內容,功能及用途
• 視覺及接受度測試:
– 用不同的browser及解析度(網站需求規劃時就已經確定使用的browser)
– 與使用者接近的環境來測試,
– 列印出來效果如何,
– 每個網頁版面設計,顏色及形式是否一致
• 功能測試
– 測試所有的連結是否正確
– 測試所有的互動元素,如form, shopping cart,用明顯的錯誤狀況來測試是否會造成故障
• 內容檢驗:
– 內容的時效性(是否及時更新),正確性
– 拼字是否正確(印出來逐字檢查)
– 內容是否合法,合乎公司規定
– 文字使用的一致性
• 傳送測試
– 以測試軟體模擬遠端使用者實際使用的狀況, 及尖峰時段使用的情況
Release, Operation and Maintenance• 持續觀察網站的運作：以維持網站的運作及可用性
– 運用監控系統及即時警報系統
• 開發是持續的過程:規劃,設計,實作,測試,發行,規劃…
• 內容需持續維護,更新
• 網站應適時調整
– 根據業務,行銷等需求
– 根據客戶需求,客戶習慣改變,客戶群改變
– 根據使用人數的增加
• 不要輕易更改網站結構：因為有些使用者會直接使用此網站的某網頁作為連結
• 互動式網頁更新應慎重：因為有些使用者會直接運用此頁面作為業務流程的一部份(B2B)
使用者介面設計可用性• 可用性取決於存取網站的使用者
– 使用者的背景是甚麼?
– 使用者每天必須依賴的網站與只拜訪一次的不同
• 可用性取決於使用的媒體
– 一般電腦,PDA..,會需要列印?
– 需線上瀏覽不要用太小的字型
• 可用性和使用者滿意度有直接關係
– 使用者會因該公司的品牌而信任其網站
• 防止或修正錯誤
– 提供選擇以避免輸入錯誤
– 檢查使用者的輸入,使其知道錯在哪裡,及可能的解決方法
• 誰是使用者
– 是人在使用網站而不是browser,不要為特定瀏覽器及頻寬設計
視覺• 避免使用色調接近的文字,圖形和背景：如深藍色背景與淺藍的文字
• 避免結合飽和度相似的文字,圖形和背景：如玫瑰色背景與灰藍色的文字
• 避免使用亮度差不多的文字,圖形和背景：如淡黃色背景與淺藍色的文字
• 避免使用太過熱鬧的背景圖案
• 讓用來區分項目的顏色其中兩種以上的屬性有很大的差異,如色調及亮度
記憶• 保持不同網頁的操作介面一致性
– 使用者只要學一次就可以
– 使用者不會花時間去學習你的網站,除非能得到甚麼報酬：Don’t let them think!
• 顯示所有的選項：使用過程不要隱藏選單項目
– 不要強迫使用者去記憶,記憶是困難的
• 別假設使用者會閱讀操作指南
– 請確保他們不需接受訓練或需文件才能使用功能
• 拜訪過與為拜訪的連結色彩不要相同
• 製作視覺與其他網站不同的首頁
• 有組織的方式將連結選項分組,如用字母排列
• 連結選項的群組限制在五至九項
處理刺激(stimulus) - Threshold• 網站上文字,連結,圖形,動畫等,都會產生各種刺激,人們過濾這些資料的三種基本方式: Threshold, Cocktail-party effect, Sensory adaptation
• 臨界值(threshold)
– 若網頁上的元素是不同的, 應該讓使用者容易看得出差異
– 心理狀況不佳時, 造成辨識差異的能力降低
處理刺激(stimulus) – Cocktail-party effect 盡量將網站及網頁簡化
– 簡單性讓使用者更容易瞭解網站
– 看看統計日誌來決定哪些網頁不需要
– 試著將內容區分, 讓使用者專注在他們感興趣的部分
– 類似的項目放在同一組以空白區隔
– 文字上以引號或背景色將重要的部分凸顯
– 限制網頁上的干擾, 將版面上雜亂的東西移除, 使它們在不會在視覺上彼此競爭, 如太吵雜的雞尾酒會
處理刺激(stimulus) – Sensory adaptation適當並謹慎的使用驚喜
– 使用者習慣於web上某些廣告,就不會再注意它因此若要吸引使用者注意,必須常常做變化
– 但過度的變化會打擾使用者,他們可能因厭煩而離開
– 大幅更改操作習慣也會產生挫折感
回應與反應時間• 重點放在速度上
– 首次使用者會對網頁下載的等待叫有耐心,但是其他的使用者就不會（人對新奇的事物有好奇心)
– 使用者所能等待的時間與所得的代價成正比
– 有經濟價值的廣告,標誌及技術不可因為可用性而移除
– 10秒是使用者集中注意在網頁的上限值
• 提供回應
– 網頁下載超過30秒應提供回應,如下載時間的進度指示
– 如過有錯誤要提供清楚的訊息
• 影像檔用alt來顯示檔案意義及大小
• 利用使用者思考的時間下載(preloading), 可產生近乎不可思議的速度
– 根據使用者使用紀錄,preload下一個會瀏覽的網頁
移動能力• 將鍵盤存取做最佳化:
– 有人會喜歡用鍵盤在網頁上的項目移動間
• 按鈕越小,距離愈遠執行動作要花更長的時間 （費茲定律)
– 連續選擇的選項應該靠在一起, 減少滑鼠移動的距離
– Browser上的“上一頁”(back)是最常用的按鈕, 主要的導覽按鈕應與它距離最小
– 可按的區域要夠大, 且按鈕間適當的間隔, 使用者可以很快的移動過去, 且正確的按到
使用者的世界• 將網站帶入使用者的世界,而不是相反
• 將使用者可能上網的環境考慮進去
– 辦公室: 一般的電腦, 速度快
– 會議室等非辦公區域:PDA,Cell phone or notebook, 速度及品質可能較差, 以顯示為主
– 家中：一般的電腦, 速度不一定
– 運輸工具上: PDA,Cell phone or notebook 速度及品質較差, 以顯示為主, 不容易集中注意力
– 室外： PDA,Cell phone 速度及品質較差, 以顯示任務導向的重要資訊為主
使用者的一般類型• 網站應建立新手,進階者及高階使用者均能適用的介面
– 有些人喜歡用site map有些人喜歡用搜尋引擎
• 若無法建立適用所有人的介面那就針對進階者(或常用者)來設計
• 盡量遵循Web and GUI常用的慣例
– 使用者會帶著真實世界, 軟體, 及其他網站上的使用經驗來到您的網站: 請不要偏離那些有很多用戶的網站如Amazon,Yahoo) 所建立的介面慣例, 看下頁
– 你的客戶群常上的專業網站,AMD,Intel,TI.. 也參考看看
Web慣例• 左上角的標誌表示回到首頁
• 文字導覽連結會在網頁底部重複
• 較長的網頁上會使用一個連結回到頂端
• 提供大量列印內容的網頁上會使用特殊的列印表單(常稱之為“友善列印”)
– 內容是精簡過的HTML or PDF格式
– 可以按的項目是藍色且畫底線
– 不可按的內容及圖案盡量避免使用藍色
• 次要的導覽元素如sitemap或搜尋應與主要導覽分開呈現
可存取性(accessibility)原則• 別忘了您的使用者可能有不同性別,年齡,文化,也要注意某些人有聽障,視障等,因此您的網站應該避免特定使用者操作受限:
– 無法使用滑鼠:mobile phone,肢障者
– 無法聽到語音訊息:聽障,嘈雜的環境,無音效設備
– 無法辨別顏色:黑白螢幕,視障
– 只能顯示文字,螢幕太小,或連線太慢等狀況
經營電子商務網站-學學Las Vegas• 實施賭城式的網站設計,提供使用者一個充滿額外好處和無限制選擇的幻覺,但要時時嚴格地控制住情況
