您是否已經建置行動網站?
您的行動裝置網站的選單是否採用可側邊收合選單-俗稱漢堡選單?
網路科技的發展日新月異,三年前當道的設計,今天可能已經成為過時的老招。
網頁必須透過瀏覽器才能呈現在螢幕之前,Google Chrome的使用率已經超過Internet Explorer獲得壓倒性的勝利(出處)。
Google Chrome每6週都會更新版本,瀏覽器技術持續進化,因此給網頁設計帶來更大的可能性。
欣賞巴黎走秀時,是否常看到讓行動很不方便的攏長包身窄裙或又高又細的高跟鞋?
網頁設計師也容易犯下重看不重用或自我感覺良好的毛病,嶄新吸睛的網頁設計不見得對用戶體驗(UX)帶來正面效益,本文就是要向讀者介紹:千萬別再用這5個方式做網頁設計。
自1995年誕生Internet Explorer以來,就一直在上演瀏覽器市佔率的爭奪戰。在2002年Internet Explorer擁有高達95%的使用率,後來漸漸地被Firefox、Google Chrome瓜分掉,目前Google Chrome已經以壓倒性之姿君臨瀏覽器使用率首位的寶座。
至於網頁設計技術的進化,除了HTML・CSS・JavaScript之外,jQuery這一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作,讓網頁設計的可能性更寬廣。但,「網頁設計可以做到的」與「用戶想要得到的體驗」往往不是一致的。
以下就是在網頁設計時必須要避開的五個方式:
千萬別再用這5個方式做網頁設計
綁架捲軸
自2016年起捲軸樣式的網頁設計大行其道,在網頁靠上方的明顯位置(above the fold)放一張精美主圖,隨著滑鼠滾動在同一位置呈現不同的內容。
one page scrolling
如果網頁設計師只是在炫耀,『看!這個cool吧!』,將捲軸式網頁玩到走火入魔,使用者就會遭遇到『綁架捲軸』的危機。例如 Mac Pro 的官網,當你將滑鼠滾輪往下滑動時,頁面不會隨之滾動,只是在同一位置(above the fold)呈現不同的內容。歷經上千網頁的試煉之後,大部分的用戶已經習慣捲動就能看到接下來的內容,然後往回捲動就能看到先前的內容,但Mac Pro在這個例子中,顛覆了大家的使用習慣,讓人不知所措。
Mac Pro
濫用網頁字型
網站完成後,大部分客戶會向我們反應,『可不可改變字型?』。
在Google font 尚未問世之前,通用字型(例如:細明體(MingLiU)、標楷體(DFKai-sb)、微軟正黑體(Microsoft JhengHei)是保守的選擇,因為您挑選的特殊字型,用戶使用的電腦未必支援。
字型的選用也是網頁設計的重點之一,自從Google font為字型提供了多樣化的選擇,讓您的網頁更能展現個性化的魅力。但千萬別用盡所有的字型,把網站搞成“字型博覽館”了。
• 濫用字型,網頁將失去整體性的美感
• 網頁使用特殊字型時,若沒有另外為網頁字型做設定,就需要花更多的時間下載,造成用戶的不便,不但不利於SEO,還可能遭到搜尋引擎的處罰。
• 網頁字型的使用,最好限制在2〜3種類以內,同時要考慮到網頁的下載速度。
各種字型用到爆的案例:The Sprawl |HEIMER (笑)
水平(橫向)滾動的網頁
距今16年以前的一篇報導:Top 10 Web Design Mistakes of 2002 (發生在2002年的網頁設計十大錯誤),其中包括「不標示價格」、「常見問題裡面夾雜著不常見的問題」,這是網際網路黎明期經常發生的錯誤,「URL網址長度超過75字」、「瀏覽器無法改變字型大小」等錯誤,到2018年的今天還是在被檢討的問題。
在「用戶體驗」這個詞彙尚未被普遍使用的年代,「水平(橫向)滾動網頁」被選為第三大網頁設計的錯誤。
也許是因為比較常見的關係, 一般用戶接受垂直滾動,但不習慣標新立異的水平(橫向)滾動。
插頁式廣告
有道是『己所不欲,勿施於人』,有誰喜歡被那些鋪天蓋地的廣告虐待?
全螢幕蓋版廣告是多麼令人厭惡,多麼干擾著使用者的體驗!
尤其是有些彈跳式蓋版廣告還找不到關閉鈕,真的會氣死人!
PopUp overlay animation

Google有交代:搜尋引擎會懲罰那些妨礙用戶體驗的各種要素。
betterads.org對超過25,000名消費者的綜合研究,發現有12種插頁廣告最不受歡迎。(參考:Least preferred ad experiences for desktop web and mobile web)
怪獸級高解析度圖片
在幫客戶做網站改版時,往往發現有些客戶將寬度超過3,000pix、容量超過1M的原圖沒經過優化(縮小圖片尺寸並壓縮圖片)就直接上傳到網頁。
最大的電腦螢幕不會超過1920 pix,若希望圖片滿版呈現,圖片寬度要是超過1,920pix就是大而不當。
Yoast等SEO外掛插件建議文章搭配圖片使用,但圖片往往是讓網頁速度變慢的最大”兇手”,圖片上傳之前,最好裁切到適當大小,然後再做壓縮。(參考:6個好用的免費線上圖像壓縮和SEO優化工具)
總結
您的網站是否太在乎獨樹一格的設計而缺乏實用性?
您是否堅持使用特殊字型導致網站下載數度變慢?
是否濫用蓋版廣告,讓用戶的體驗痛苦不堪?
上傳的圖片未經優化而影響了下載速度?
希望這文章能提供給您重新檢視您的網站是否犯了以上的錯誤。
延伸閱讀
43 web design mistakes you should avoid
1. 用戶必須在幾秒鐘內知道該網站的內容
2. 幫助客戶篩選網站內容
3. 不要使用無法讀取的花俏字體
4. 不要使用微小的字體
7. 除非必要,否則不要逼用戶註冊
8. 不要在未經同意的情況下將用戶成為訂閱者
9. 不要過度使用Flash(到2020年完全無法使用)
10.不要播放音樂(小編常在沒有心理準備的情況下被音樂驚嚇到)
11.如果您真的很喜歡播放音樂,請讓用戶啟動它
14.確保您的網站有『聯絡我們』頁面
16.不要使用”一閃一閃亮晶晶“的文字
17.避免複雜的網址結構
18.在HTML表格上使用CSS(參考:如何在WordPress文章插入表格)
19.確保用戶可以在網站搜尋
20.避免使用“下拉”選單(除非網站內容很多)
22.如果要連結PDF文件,請不要對PDF加密
23.不要讓訪客選擇版本。(56Kbps?還是128Kbps?,Flash?還是HTML?,有完沒完!直接給我內容!)
24.不要將廣告與網頁內容混在一起。(內容穿插著廣告真的讓人惱火)
25.少即是多,讓網站的導航結構更簡單
26.不要讓用戶必須經過『迎賓頁』才能達到的主頁
28.確保你的網站可跨螢幕瀏覽(Google推薦使用RWD響應式網頁設計)
29.確保所有連結網址設定錨文本(請參考:如何製作錨本文)
30.不要隱藏連接(否則你的網站將失去信譽)
31.讓用戶清楚識別哪些文字是可以連結(以不同的顏色顯示,或使用底線)
32.對於無法連結的文字避免使用其他顏色或底下(否則訪客會誤以為可以點擊到其他頁面)
34.不要使用動畫GIF(本文為了加強說明,用了幾張GIF圖檔)
35.確保為圖像使用ALT和TITLE屬性(除了具有SEO優勢之外,圖像的ALT和TITLE屬性對於盲人用戶將扮演重要角色)
36.不要使用刺眼的顏色(參考:什麼?顏色也會影響SEO優化?)
37.不要使用彈跳視窗(小編真的很討厭)
39.在頁腳(footer)設定功能連結(如果用戶沒有找到特定的信息,他們就會習慣向下滾動到網站的頁腳)
42.避免錯別字
43.如果您使用驗證碼(CAPTCHA),請確保字母可閱讀