January 22, 2003

[敲打鍵盤] 我的網頁哲學Alt-E

設計網頁,得用心。

大家不要竊笑,這件事恐怕不是那麼容易做到的。我在講的是那種關於 1 pixel 的執著,是那種少按一個鍵、滑鼠少移動一公分、下載少一秒鐘的堅持。

從我開始寫 blog 以來,幾個朋友(像是 acerhlbSchee 等人)先後都在探討著 Accessibility(親和力;無障礙) 跟 Usability(可用性) 的議題。這些觀念在國內似乎相當難以推廣,今天早上當我在跟研究所助理解釋我設計網頁時考量的種種細節的時候,祇換來我想都沒想過的回應,像是:

「網頁不是萬能,你不應該放太多東西在上面。」 「首頁應該祇放概要性的敘述,新聞應該放到另外的地方去。」 「應該要另外建一個分類,把所有的相關鏈結放過去。」 「可是我們不想要把所有的更動都顯示出來,祇想要公開特定的公告。」 「你應該顧及到大部分的人都用 IE ,設計網頁時應該要以 IE 為準。」

國內許多網站,尤其是這種學校單位的網站,往往都會給人家這樣死板的印象;網站上放置的都是百年不變的無用資訊,彷彿網站祇是一個空架子、祇是一種趕流行。更糟的是,有些在位者不祇是誤解了網站的奧義,更加上了自己的無限幻想,好似任何東西前面加個 e 就可以瞬間蛻變;好似說一句「弄個留言板」就是在實踐雙向溝通了。

不,事情不是這樣的。

我依然相信「網路 13 秒黃金定律」這麼一回事。這個定律是在說:

無論頻寬如何變大、無論網路如何變快,一旦載入某個頁面所需的時間超過了 13 秒,使用者就會不耐煩而按下「上一頁」。

同樣地,我相信對於一般的網路衝浪者(surfer)來說,如果某個網站在 13 秒內無法讓她找到她所需要的資訊的話,她也會跳到其他網站。這裡暗指著幾件重要的事情:

  1. 網頁不應該太大:
  2. 除了不應該濫用圖片或多媒體之外,應當盡量使用 CSS 來減少 HTML 部分的容量;同時也該提供更精簡的 RDF 版本,用最少的位元提供最多的資訊。
  3. 文字尺寸及版面配色應適中:
  4. 文字太小或配色對比不當(對比過高或對比過低)都會使得閱讀不便;文字太大卻又會讓相同單位面積的網頁所能容納的資訊過少,而且還會使得版面變得太過擁擠。除此之外,各個不同等級層次的標題、內文,也應該有一致的字形變化規則,這樣纔能夠幫助讀者迅速掌握內容的層次。
  5. 呈現資訊的層次:
  6. 雖然眾多網頁瀰漫著 Splash Screen (就是以一張不具深刻資訊內涵的圖片,消耗讀者的寶貴時間/頻寬並且花額外的體力移動滑鼠或鍵盤以取得真正有幫助的資訊)搭配不知所云的「系所概況」(真正有找過資料的人就會發現,在這裡幾乎沒有可用的資訊)來當作網站的首頁;但是這樣子的規劃顯然祇適合那種祇會來一次的讀者。對於會常常來這個網站的讀者來說,他們更關心的是「哪裡有了變更?最近有些甚麼新消息?」因此把近期內發生的、相對重要的變化呈現在網站的首頁,顯然纔是正確的作法。
  7. 謹慎分類:
  8. 祇有一項內容的分類,就失去分類的價值了;同樣地,分類過多也形同沒有分類,太多層的分類也會窒礙資料搜尋。具時間性的項目,就該善用時間的特性來編排;超文本式的媒體就不該侷限於過於線性的編排。誰說分類不是奧義的?

當我在自己的網站上貼上了 XHTML 1.1, CSS Level 2.0, WAI-AAA WCAG 1.0 的認證小貼紙時,背後在做的事情就是上述這些:我願意花上幾天的時間,跟一堆標籤奮戰,為的是讓內容更容易被取得、讓文本更容易被解讀,讓讀者可以把精力專注在她們自己真正感興趣的議題上,而無須把時間浪費在她們所不需要的部分。

然而在這些略帶技術性的事項之外,在背後其實還有更重要的指導方針。或者說,有更重要的精神不能夠被忽略。

如果說網路改變了世界甚麼,絕對不是更炫麗的聲光效果,而是他讓「文本交流」更加容易了。是的,我們在討論的是資訊的共享。在網路世界中,「說出口的寫成文字的就不算秘密」絕對是發揮得淋漓盡致;如果妳真的想保有甚麼秘密,那麼妳就該把他們放在妳心中,或者用 GPG 加密。

那麼,既然網路的優勢是建立在交換上,安排網頁內容的時候就沒有道理窒礙資訊的流通。現行的著作權法很容易限制住作者的創作權,因此我在我自己的 blog 上利用了 Creative Commons License 聲稱了開放使用的範圍。同樣地,對於這樣一個學術單位的網站來說,「開放」更應該是必要條件。把資源花在刀口上,把事務處理透明化,時時更新、常常更新,這些纔是讓網站充滿活力的秘訣。

對於做出好網站,我需要學的還很多;但是我仍要大聲疾呼,這些東西並不真的那麼不可近人,祇是需要妳(尤其是位居掌權者的人)花一點點時間去瞭解罷了。而這,也應該是這些人應該有的素養,不是嗎?

其實我記得我好像有寫過這個題目。之所以會再一次地把這個題目翻出來,主要是因為今天早上跟研究所裡的助理溝通到滿肚子怨氣所致。助理們:如果妳們祇是想要做出會淪為死水的網站,對不起,妳們找錯人了。

由 Jedi 於 January 22, 2003 06:05 PM 所發表 | 引用 (3)
迴響Alt-C
[ 1 : 靜態鏈結 ]

光看這篇文章就不會覺得jedi作為blog第一有什麼好奇怪的。這種書寫的氣魄連google都要甘拜下風。

躲同學 於 January 22, 2003 10:24 PM 所發表
[ 2 : 靜態鏈結 ]

寫得好, 給你拍拍手. 要能夠明確地把這些要點都說出來, 也滿不容易的, 但是很容易讓人理解在這麼多辛苦的背後, 所隱藏的意思到底是什麼.

挑個小錯誤, 是 pixel, 不是 pixal. :)

路人甲 於 January 23, 2003 10:31 AM 所發表
[ 3 : 靜態鏈結 ]

Jedi++ # well written
plasmabal++ # 不愧是是電漿:b

「你應該顧及到大部分的人都用 IE ,設計網頁時應該要以 IE 為準。」說這句話的人要砍頭。我以前作網頁的時候也是如此無知的想,現在知錯了。(到旁邊面壁思過)

acer 於 January 23, 2003 12:59 PM 所發表
[ 4 : 靜態鏈結 ]

plasmabal++ # 已改正 ^^
同時謝謝大家的支持與愛護:p

Jedi 於 January 23, 2003 02:53 PM 所發表
[ 5 : 靜態鏈結 ]

系所網頁, 公家網頁, 乃至於什麼數位圖書館網頁, 都應該好好想想.

hanteng 於 January 24, 2003 03:38 PM 所發表
[ 6 : 靜態鏈結 ]

回头看看,的确这样。
我基本同意,希望看到更多补充。

叶子 於 January 27, 2003 03:21 PM 所發表
[ 7 : 靜態鏈結 ]

給朋友看改版後版面,對方一直說很醜,我就問:你用 ie 嗎?結果換來一句「全世界的人都用 IE!」-______-

我連砍他的頭都懶了...

ipa 於 January 28, 2003 11:51 AM 所發表
[ 8 : 靜態鏈結 ]

我認為親和力是很重要的.
我正在學習以 HTML & CSS 寫我在電腦上的第一份日記 - 把日記從paper => computer.有這個丁算, 是受了CSS 的在網頁設計上的精簡和美觀所感動.所以開始時我是先學CSS,再學HTML.加上受到Kynn 的 LiveJournal的設計的影響, 所以我能体會到CSS 對親和力& HTML的structure 之幫助.

Aaron Law 於 April 9, 2003 05:42 PM 所發表
[ 9 : 靜態鏈結 ]

本身也是網站的維護者,你這篇大作真是讓我心有戚戚焉~~

麥克 於 June 15, 2003 02:53 PM 所發表
[ 10 : 靜態鏈結 ]

引自金紅小築

『網路上最多的是個人網站,約佔八、九成,大約可分兩類,一類是插花型,通常可能是指定學生做的作業,或是有興趣製作網頁的人所推出的成品,剛作好時很熱鬧新鮮,圖像、音樂、甚或動畫俱全,有些網頁也羅列了許多精彩的文章,但大都後繼乏力,主要的原因是站主在熱情消失後,便無心再呵護或增添新材料,於是變得跟「插花」一樣,生命非常短暫!
  另外一種是盆栽型,剛開始並不起眼,但站主持續的施肥、澆水,逐漸成長出特殊的風格,並展現出生命力,主要原因是站主有夢,把網站當作達成理想的工具,因此才會孜孜不倦地耕耘,就像最近台灣網路上,很流行的一篇文章所說:「生命是一種長期而持續累積的過程」,我覺得個人網站經營也是一樣,需要有目標和長期且持續的付出,但這類網站常是鳳毛麟角,除非有人帶路,否則不易尋找。 』

harrison 於 June 15, 2003 04:12 PM 所發表
[ 11 : 靜態鏈結 ]

:)
真是棒
狠是受用
要來努力了。:D

喵哥 於 July 14, 2003 05:48 AM 所發表
[ 12 : 靜態鏈結 ]

該是反璞歸真的時候了,別忘了要以資訊作為考量的主體.

GOOD 於 July 29, 2003 11:17 PM 所發表
給我迴響吧!