全球資訊網網頁介面的設計

 

全球資訊網是一個比較特殊的資訊系統,在設計其網頁的時候其實也就是在設計一個資訊系統的界面,以下我們分為幾個方向來說明設計全球資訊網的網頁時所需要注意的事項:

網頁設計的基本原則

網頁設計的檢查指標

頁面設計範例

網頁設計格式參考資源

頻寬的影響

互動性的要求

安全性的要求

 

 


網頁設計的基本原則

 


 

網頁設計的檢查指標:

 

設計目標

設計原則

了解使用對象及經驗
  • 是否有新拜訪者到你的網頁
  • 先前的拜訪者是否重返網頁
  • 使用者是否有任何先前的網頁經驗
了解網頁設計及使用者之目的
  • 搜尋資訊
  • 學習產品使用方法
  • 訂購產品
  • 追蹤產品使用狀況
  • 與客戶服務代表聯絡
  • 與公司雇員通訊
  • 取得技術支援
  • 給予回饋
  • 下載產品型錄
  • 下載驅動程式並更新
協助使用者操縱與搜尋
  • 提供清楚的、直覺的網站組織資訊 (超連結目錄表格、索引表格、新訊息)
  • 提供可了解的、明顯的視覺導覽設計 (按鈕、文字、影像地圖)
  • 提供網站內標題、關鍵字詞、名稱的搜尋
  • 在每一個網頁上提供導覽援助 (讓使用者能夠從任一網頁上找到搜尋引擎或是回到主網頁)
  • 讓使用者知道任一超連結或是導覽連結將帶領他們前往何處
  • 避免使用者必須使用回上一頁的無雙親連結,提供至少一個回到前一個網頁的方式
  • 定期確認是否網頁中所有的連結仍然有效
  • 使用標準的文字連結色彩及標示重點的色彩
設法讓使用者快速地執行任務
  • 減少尋找某一資訊的時間
  • 減少載入網頁與影像的時間
  • 減少網頁中的捲軸 (降低網頁的篇幅)
  • 限制同一層中的選項數目
  • 將重要的選擇群集在一起
  • 組織網頁內的訊息
  • 提供網站上資訊的全景
  • 使用熟悉且可辨別的導覽控制
  • 不要過度使用先進的技術 (例如:使用VRML)
  • 不要過度使用刺激視覺的動畫和色彩
  • 維持簡單的目錄:盡量讓每一個網頁上僅含一個標題
  • 提供快速連結目錄:放置重要的導覽連結於頁面上固定的位置
  • 使網頁上的資料容易閱讀:使用簡單、不突出、不會與文字及按鈕衝突的背景圖片
  • 使用空格及適當的編排敘述來調整使用者的注意力與閱讀動線
  • 使用標準的調色板和字型:不要使用特殊的顏色和字型
  • 使用夠大的字體
  • 使用相對的字體大小
  • 使用足以與背景對照的文字型態
維持使用者介面的一致性
  • 使用圖形、影像、色彩、字型及版面設計建立一個共同的統一性界面使其貫穿整個網頁
  • 建立一個網頁設計版面模板並沿用於所有網頁
  • 使用一致的標題、用語、連結及導覽名稱並用於所有介面
  • 提供製作者背景資訊 (URL、版權、電子郵件信箱等等)
  • 使你的導覽設計一致
  • 設計多數瀏覽器與平台易取得的、使用方便的介面
  • 不嚴格限定使用者或瀏覽者能夠控制或改變的介面元件 (如:文字、色彩…)

 


 

頁面設計範例:

請依照上面所說明客觀的人機介面要求來評論下面這些網頁:

單位 網址
教育部 http://www.edu.tw
國家圖書館 http://infotrip.ncl.edu.tw
中央圖書館台灣分館 http://www.ncltb.edu.tw
歷史博物館 http://www.nmh.gov.tw
教育資料館 http://www.nioerar.edu.tw
科學工藝博物館 http://www.nstm.gov.tw
海洋生物博物館 http://www.nmmba.gov.tw
自然科學博物館 http://www.nmns.edu.tw

 

 


 

網頁設計格式參考資源:

下面這些網站上可以找到比較有系統地討論如何建立一個大家都喜歡去逛逛的網站:

網頁設計格式資源

URL

Apple Web Design Guide http://www.geologie.tu-freiberg.de/docs/
apple/web_design/web_design.html
IBM Human-Computer Interaction:UI University http://www.ibm.com/ibm/hci/designer/
uides/webdesign.html
Sun Microsystems:Guide to Web Style http://www.sun.com/styleguide/
http://www.sun.com/columns/alertbox
Web Style Manual, YaleCenter for Advanced Instruction Media http://info.med.yale.edu/caim/
StyleManual_Top.HTML

http://www.cis.yale.edu/webguide/

HCI Resources:
WWW-related Issues
http://www.ida.liu.se/~miker/hci/www.html

 

 


 

頻寬的影響:

全球資訊網上的資訊系統基本上把整個區域網路 (LAN) 或是整個 internet 當作是資訊系統的硬體,也就是把整個網路以及上面所有的電腦資源當成一個大的電腦。

人機界面的首要目標就是希望使用者能夠借助電腦系統方便而且有效率地來完成他的工作,在方便性上我們可以說使用者能夠由不同的地理位置,在不同的時間來使用這個電腦化的資訊系統,至於前面所提到的所有人機界面應該要注意的事項,其實也都在進一步輔助使用者迅速地建立正確的心智模型,讓使用者很快地可以來猜測到你這個資訊系統的功能,進而可以針對他自己的需求來評估他應該由什麼地方切入來使用你的資訊系統;

另一方面由於大部分資料的呈現需要透過網路來傳送,必須考慮傳送的時間延遲,例如:你播放一段旁白,由使用者下命令後一直到使用者聽到聲音可能有一段時間的延遲,這個時間又可能和配合影像傳遞的時間延遲不太一致,因此你在設計介面的時候必須考慮到時間的延遲,除了像前面所說的必須預估使用者的反應之外,還必須要預估網路的反應,如此設計出來的人機介面才能夠達到你所要的目標。在這樣子的情形下,通常我們在設計的時候不會考慮將影像和聲音旁白分別用不同的媒體來存放,因為此兩者的網路傳遞時間差異很大,很難預估其效果,我們會採用影像和聲音合併的方式,也就是視訊的方式來同時地傳送兩者,另外一種方式是使用像 JAVA Applet 這樣子的程式化環境來來將所有的媒體事先下載到操作者的機器上,然後再精確地控制各種媒體呈現的時間與效果。

 


 

互動性的要求:

瀏覽者與維護者以及瀏覽者與瀏覽者之間的互動是網頁內容不斷成長的最佳途徑,下列是增加網頁互動性的一些標準技術:

電子郵件

表單與 CGI

JAVA Script

VB Script

Plug In

Active X

JAVA

 


 

安全性的要求:

全球資訊網上安全性的要求一般談的是下列幾種問題:

  1. 瀏覽一個網頁的時候瀏覽者電腦上的資源會不會被不適當地利用,或是不適當的觀看以及破壞?
  2. 提供資訊的網站上會不會被故意侵入的使用者破壞?
  3. 瀏覽者在觀看一個互動式的網頁時,如果要填入一些資料時會不會被第三者不當地觀看或是竄改?
  4. 瀏覽者在觀看一個網頁時,所看到的資訊是不是原版,會不會被竄改?
  5. 網站上提供的執行檔案是不是安全的,有沒有病毒,執行起來會不會造成瀏覽者資料或是電腦資源的破壞?

網際網路的設計上本來是以迅速正確地傳遞資訊為主,並沒有考慮到人為惡意破壞的問題,但是在全球資訊網迅速的流行,工商產業界逐漸運用全球資訊網來增進企業運作的效能、提昇商業的便捷性時,少部份不務正業的電腦玩家也藉此機會大肆破壞,希望謀取不當的利益,因此安全性的重要性日益增加。

首先,瀏覽純粹以文字及圖片來傳遞資訊的網頁是很安全的,這只是一些整理過的資料透過網路這種媒介來傳輸,不應該會毀壞瀏覽者所使用的電腦,有些使用者因為怕電腦中毒,完全不去使用全球資訊網的資源,這有一點因噎廢食;但是就像前面列舉的第四點,網頁上面所提供的資訊必須由瀏覽者自己來驗證其正確性,瀏覽器和全球資訊網系統並無法保證其正確性。

同樣地在網站上所提供的下載程式或是瀏覽器的 plug in 功能擴充模組也是使用者自己必須透過網路上基本的常識以及掃毒程式來驗證其安全性的,不能期待瀏覽器提供什麼特殊的功能來檢驗。

在透過瀏覽器來瀏覽一個網頁的時候,瀏覽器會提供最基礎的保護,例如觀看某一個具有 JAVA Applet 的網頁時,JAVA Applet 程式是在瀏覽器的監督下使用瀏覽者的機器來執行的,雖然使用瀏覽者的 CPU 以及記憶體資源,但是瀏覽器可以保證 JAVA 程式不會讀寫瀏覽者機器的檔案系統,確保瀏覽者機器上資料的正確性。

一般全球資訊網的伺服器只能允許瀏覽者讀取網站上公佈的一些網頁資料,但是為了增加網頁的互動性,伺服器也提供所謂的 CGI 程式讓瀏覽者可以透過它來即時地依照需求存取一些伺服器上的資料,這些 CGI 程式是在伺服器上執行的程式,有的是網頁設計者自行撰寫的程式有些是伺服器提供的公用程式,有些駭客會利用這些可能未完整測試的 CGI 程式來造成伺服器主機上的資料流失或是伺服器主機的不正常運作,因此網頁設計者在設計相關的 CGI 時需要小心的設計,全面性的測試才可以。

最後,在運用全球資訊網進行電子商業的運作時,常常需要瀏覽者提供一些個人的資料,甚至是信用卡號碼或是密碼等等,在網路上傳遞這些重要的資料時都可能會被有心人竊取,因此有所謂的資訊保密的研究,目前在電子商業的應用上比較常用的是所謂的 SSL (Secure Socket Layer) 的傳輸協定,可以確保第三者不會任意地竊取他人的重要資料。