43 點設計網站時應避免的錯誤

久違的翻譯文又來了:P
這次是翻譯DailyBlogTips這個網站的文章。
此篇剛好也是他的熱門文章,我覺得寫的也不錯,所以這邊跟大家分享^^

原文出處:
@43 Web Design Mistakes You Should Avoid / dailyblogtips

1.你必須要讓讀者在第一時間瞭解你的blog在幹麻:在Internet裡頭,要吸引別人注意力是個重要的課題,如果讀者沒辦法在第一時間知道你的部落格主題,他可能就會按上一頁離開了。所以你的blog要讓讀者願意花時間閱讀、拜訪,另外讀取速度也不能太慢。

2.讓文章容易閱讀:請注意這是網路上的blog,他不是市面上的書籍,所以忘了那些冗長的文字段落吧。讀者可能是邊工作邊看你的blog(也可能在做其他的事情),所以讀者希望可以快速的掃過你的文章內容。所以一篇文章要有好的標題、次標題、項目清單…等可以讓讀者容易看到他想要的文章

3.不要用一些不容易閱讀的花俏字型:你的blog是否會因為使用某些字型,而讓網誌看起來有複雜絢麗的效果???但是換個角度想,他們容易閱讀嗎?如果你blog的重點是希望傳達某些訊息給讀者,並且讓讀者閱讀你的文章,就必須讓介面看起來舒服易閱讀。

4.不要使用過小的迷你字體:這個前提之下,是你真的希望你的blog讓讀者看起來容易閱讀。我的火狐瀏覽器是有讓文字放大的效果沒錯,但如果我真的使用了這個功能,那你的blog可能也是我最後一次的拜訪。

5.不要設定開新視窗:用這個簡單的邏輯思考: 如果我所有的外部連結都用開新視窗的方式,那讀者就不會離開我的網站了,這個觀念是錯的!!!請讓讀者自己控制他是否要開新視窗。這也是所有瀏覽器都會設置「上一頁」按鈕的原因。不用擔心你會將讀者送到其他網站,如果他喜歡你的網站,他就有回來的一天。

6.不要改變讀者視窗的大小:讀者可能已經替瀏覽器設定好大小了,如果你改變了大小,他的習慣可能會被你弄的一團糟,也會失去他對你的信賴。

7.除非需要且必要,否則不要強制讀者註冊:單純的去思考,當我們在瀏覽網站找資訊的時候,是否也不希望被強制註冊會員並且填寫任何資料呢(除非註冊有好康的東西)

8.請勿未經過他人同意發送訂閱給他:讀者註冊你的網站之後,不要自動發送訂閱給他。沒有經過同意就隨便發送,不是交朋友的好辦法。

9.Flash不要使用過度:flash會增加你網路的載入時間,也會干擾其他讀者。如果你blog的靜態頁面沒辦法表現出網誌的特點,這才是使用它的最好時機。

10.不要自動播放音樂:早期的網路年代,網站製作者都希望將音樂融入自己的網頁,但結果如何?他們失敗了。別放音樂,請終止他!

11.如果你必須要放影音,請預設關閉,讓讀者選擇要不要播放:有的時候可能有必要狀況,你要放這些東西,例如你的一段演講or導覽,這些是ok的。不過請加上play的按鈕,讓使用者自行點選。

12.不要因為部落格掛件而干擾你的主頁面:首先,網路上的部落格元件會讓這個網站看起來非常的不專業,如果你要放的是統計資料或是一些得獎的元件,請放在「關於我們」這個分頁

13.不要用個只有「enter」的首頁,直接進入你真正的網站:讀者總是希望可以花最短、最少的時間進入你真正的首頁。

14.確定blog有包含聯絡我的細節:沒有什麼比少了聯絡我還糟糕的事情了,不只對讀者不好,對你自己也不好,你可能會少了很多讀者的回饋

15.確定你的網站能使用「上一頁」按鈕:這是個非常基本的功能,不要因為任何原因導致他不能使用,當然,你開新視窗就不能使用它,另外舉個例子,有的javascript也會擋住這功能

16.不要使用閃爍的文字:除非你的讀者來自1996年,就這樣

17.避免複雜的網址結構:一個簡單,以關鍵字為基礎的網址不僅可以幫你做好SEO,以及pagerank,他也提供讀者還未看你文章時可參考的依據

18.使用css取代html的table語法:以前大家習慣用table作頁面的規劃,現在的趨勢則是改css,沒有任何的理由可以反對這點。css除了可以更快讀取,也可以做出更多的特色。

19.確定讀者可以搜尋到你整個網站(blog):為什麼搜尋引擎改變了網路生態?這邊有個理由(你也可以猜猜看),因為他讓網路上的使用者可以更快找到文章。不要小看了搜尋。

20.避免使用下拉式選單:所有的導覽選單,都應該以直線條呈現給使用者觀看。使用下拉式選單可能會讓讀者疑惑,或者還要花一點時間尋找這些隱藏的資訊。

21.選單儘量使用文字:用文字不僅快速也不會失效,舉例來說,有的使用者使用圖片如果連結失效就….

22.如果你有連接PDF檔案,請顯示他們:以往的PDF連結,讀者點下去之後會凍結你的瀏覽器(?),同時Acrobat Reader 會顯示是否打開來歷不明的檔案?對讀者來說很煩,所以要妥善的指向PDF連結,讓讀者方便掌握。

23.不要讓讀者干擾了你製作網站的版本:避免讓使用者給你不必要的困擾。連接速度如何?我要選擇56k還是128k的讀者為主?用flash還是html呈現?別逗了,只要給我內容!!!!!

24.不要把廣告跟你的文章內容參雜在一起:短期內這種混合式的廣告(例如.google adsense)可能會增加你的收益,但長期來看,可能會失去許多讀者。讀者被干擾一次,就有一個讀者跟你說掰掰

25.使用簡單的導覽結構:有時候少就是多。這個規則也適用在人們的選擇。確定你的blog有簡單明瞭的導覽列

26.避免「向內發展」:在讀者還沒看到想要的東西時,不要強迫他看其他文章,只要你提供的文章是獨一無二的,他就會繼續看下去。

27.不要使用FrongPage:這是一個非常基礎的html編輯器,使用FrontPage雖然可以讓編輯變的很簡單,但是輸出的程式碼非常糟糕,在不同的瀏覽器觀看都會發現bug

28.確定你的blog兼容於每種瀏覽器:不是每種瀏覽器都長的一樣,他們所解析出來的css也不盡相同。不論你喜不喜歡,最多人使用的瀏覽器你一定要兼容,否則你會長期失去這些讀者

29.確定包含錨文本連結:儘量不要在連結的地方寫「連結這裡」,這非常的沒效率。確保你的連結也包含了確定的文字(錨文本),讓讀者很清楚的知道他會連到哪。同時這對你的SEO也有幫助

30.不要把連結藏起來:當你有了29點的錨文本連結後,使用者可以知道他要連的地方,同時有的使用者也會看他瀏覽器的狀態列,以得知將要連向的網址為何。如果你把它隱藏起來,可能會讓讀者不信任你。

31.讓讀者可以清楚看到連結:讀者必須要的辨識哪些是連結,哪些不是。確保你的連結跟普通的文字顏色不同,如果可以的話也多使用底線標記

32.不要對文字作底線及顏色的標記:不要對文字作底線,也不要使用顏色。因為這樣可能會讓讀者判斷錯誤,誤以為是連結。

33.已經拜訪過的連結設定其他顏色:這點非常的重要。這個設定可以幫助讀者知道,哪些網站他已經拜訪過。

34.不要使用動畫圖檔:除非你的廣告有動畫圖檔,否則請避免使用,動畫圖會讓網站變的不專業,而且會讓讀者從文章轉移焦點。

35.在圖片的設置多使用alt以及title的屬性:同樣是對SEO有幫助,可以讓你的圖片容易被搜尋

36.不要用刺眼的顏色搭配:如果讀者看完你的網站連續10分鍾感到頭痛,你可能要考慮重新配色。可以對目標設計一個調色板(例如傳遞一個情緒,讓使用者專注在文章..等)

37.不要用跳出視窗:這邊是指任何會跳出視窗的東西。即使是讀者要求的,也是一個壞主意

38.避免java script的連結:請遠離這些java script,因為它可能會對讀者造成不良影響。

39.在blog的頁尾放上網站的訊息:如果讀者在你的blog找不到一些特別的資訊,他們通常會看頁尾。所以頁尾的部份至少要包括一個連結到首頁,最好再加上「聯絡我們」

40.避免過長的頁面:如果讀者總是要用滑鼠滾輪觀看你的文章,他可能會快速掃瞄而非仔細閱讀,儘量把你的網站頁面縮短一些,重點是導覽結構的完整性

41.不要出現水平捲軸:垂直的捲軸可以被容忍,但是相同的容忍度卻不適用於水平捲軸。現在最多人使用的解析度是1024*768,確保你的網站在這個大小裡頭。

42.不要有拼字和文法的錯誤:這不是網站設計的問題,但是他卻是影響你網站質量的重要因素之一。確認你在送出文章的時候沒有這些問題。
(muki註:對國人而言,就是不要有錯字以及注音文)

43.如果你有使用圖片驗證機制,請確保這張圖片可以讓讀者很清楚的閱讀:有一些部落格會使用圖片驗證來阻擋垃圾留言。這邊只有一個小問題,就是留言的人可能需要叫所有兄弟姐妹一起來解密你這張圖片。

-

終於…翻譯完了(汗
有幾篇我是用自己的話下去撰寫,因為有的我大概瞭解作者的意思。
另外,作者也有幾點理論我不能苟同啦…

像是第五點:不要開新視窗。
我個人的習慣都會確保連到其他網站都使用開新視窗。
因為我覺得這是對連結網站的一個尊重:)

他提出的這43點大家可以參考就好,你無法做到的就不要硬逼著自己去改變。
但是最重要的「不要自動播放音樂」,大家真的都要做到啊
我覺得國人最不好的習慣就是這點。真的吵死了><…….

還有國人的部落格有的也很花俏,看得受不了,側邊欄長的跟什麼一樣,通常都是華而不實的資訊。
(咦,好像在說我自己:P )

總之好的閱讀環境需要大家一起養成
從今天起加油吧!!!!!

You may also like...

11 Responses

  1. mion 說道:

    妳真是太有心了…我今天除了睡覺還是睡覺…

    唉,雖然我也很想振作…
    誰來督促我一下ˊˋ 喔不不不,是誰可以在我旁邊跟我一起做!!?
    因為我不喜歡一個人做(某時候又喜歡耍自閉喜歡一個人就是 囧!!)

  2. muki 說道:

    睡覺也不錯,讓你一整天有精神XD
    我是偶爾要翻譯一下,不然腦袋會太久沒動QQ。

    你是要大家去學校一起做嗎?
    雖然我不清楚你要做什麼
    網路行銷還是amigo ?

  3. muki 說道:

    是啊,雖然不知道這樣講會不會得到使用無名的朋友,
    但是我覺得他那邊真的是部落格的亂源orz….

    其實我自己在翻譯的時候也有一個一個去思考
    不過有的東西他可能寫的過於激進?也可能和台灣的部落格文化有一點點不同
    因為有的項目我蠻不能接受的
    所以就照自己想改善的再去做修正囉:)

  4. mion 說道:

    我昨天睡了午覺
    (但是一直被挖起來….動不動就被打斷,今天睡一小時也被打斷2次…打爽的喔!)
    當然是Amigo!!!因為這比較重要啊!!!
    我積了一堆事沒做(like…網路行銷的文章啦…amigo啦….)
    我很心虛耶。

  5. 熱血布力安 說道:

    側邊欄長的跟元宵節花燈一樣熱鬧的blogger,不在少數喔。這似乎變成一種特色了。凱特打結就是最熱鬧的元宵花燈blog。希望凱特不要記恨。

  6. Sango 說道:

    原來你傍晚plurk上說得翻譯就是指這個啊!真有心!

    我是反無名的,但我覺得說他們是「亂源」也是沒辦法的;任何東西只要普及化之後整體水準一定往下掉,但你不普及的話參與的人又不會多。這可能也是部分蘋果使用者不願mac太多人用的原因吧!

    少數人有,才顯的珍貴啊!(嗯!?好像扯遠了?)

  7. sky37042 說道:

    我也超討厭背景音樂的
    每次開啟無名時都會被嚇到 ((因為音樂都是中間開始 正激烈的時候
    所以阿 真的不要放音樂 ^^
    *********************************
    不知我BLOG有沒有要改的地方 ??
    看完這篇文章開始擔心自己的BLOG

  8. muki 說道:

    看到好的文章就會手癢來翻譯一下!!
    恩…說的沒錯啦,無名真的是太多人用了
    而且現在使用blog的年齡層降低,大家一開始幾乎都是接觸無名
    對我來說,也許是好的,因為不用去淌無名這塊渾水XD

  9. muki 說道:

    請問凱特打結是什麼意思@@"?

  10. 徵信社 說道:

    慢慢地,我都學習避免啦!

  1. 2008.11.26

    […] 翻譯原文: 43點設計網站時應避免的錯誤 – MUKI space […]

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>