
都 2016 年了,為什麼網站的使用者經驗還是這麼糟?

原文為《It's 2016 already, how are websites still screwing up these user experiences?!》,作者為程式學習網站 Pluralsight 作者暨微軟資安及企業軟體交付流程顧問 Troy Hunt。Inside 獲授權編譯。
進入新年已經一陣子了,不過網站的基本設計和實用性還是讓我不敢恭維,我們的網路體驗其實可以不用這麼痛苦的。對我來說,沒有一個網站有達到「喔,這個網站能做到這樣啊,真不錯。」的標準。這些悲哀又不知所云的設計不過是把網站拋到了谷底。
這時候有人會說,「你可以安裝一些外掛來改造網頁,還能順便改變使用者行為,」這是搞錯重點了,外掛不會也不能解決問題。我們應該從頭開始檢討,別再把網頁弄得這麼不舒適。
容許我稍微失控一下,來談談現在的網頁有哪些毛病:
霸佔我畫面的東西:問卷還有一堆垃圾訊息
像這個就沒什麼好說的:

舉例來說,我想瀏覽這個 富比士頁面 ,然後他就告訴我,「先等一下,這裡有每日一句,你還可以順便看一下廣告。」莫名其妙,沒有人會看完這句話,然後就覺得自己重獲新生,此舉毫無意義。
讓上一頁按鈕做好自己的工作
各大銀行網站有這個毛病已經很久了,想要回到上一頁,網頁又會自動轉回原本的頁面,讓人動彈不得。你要知道,按了「上一頁」以後還出現這種畫面真的不行:

為什麼我的「交易已結束」?使用者不過是按了瀏覽器最基本的功能按鈕,而你們大概只想敷衍過去。我知道你們不想要出現重複交易,不過要避免重複交易並不難,別再用這種雙手一攤,毀掉整個頁面的方式了,好好修理一下你的網站。
請把文章放在同一頁
別再把文章分成多頁了:

你讀了一部份文章,但頁面放不下,所以往下捲動就能看到下一段,這就是捲軸的用處。也許這樣一來你就不能在每一頁用廣告轟炸大家了,不過反正我們本來就不喜歡那些鋪天蓋地的廣告。
讓我設定自己想要的密碼
如果密碼設定不支援某種字符,那容許我合理推測:你的輸入限制和查詢參數爛透了。你的系統一團亂,你怕如果不阻擋這些字符,就可能發生 SQL 隱碼攻擊。就像這樣:
Oh, TWC pic.twitter.com/zbrZy2tMk9
— Rod Trent (@rodtrent) 2016 1 月 3 日
更糟的是,我也能合理懷疑你並沒有雜湊加密(hash),而直接用純文字儲存密碼。或者也很有可能,這個網站程式沒有把密碼處理成穩定狀態就存進資料庫了。
全螢幕蓋版廣告

沒有最慘只有更慘:延後彈出廣告

封鎖不實的廣告
這些「推廣連結」(總之就是廣告)雖然已經貼心地針對我的所在地量身打造,不過我們先來算算買這台藍寶基尼要花多少錢:
These ads may be somewhat misrepresenting the level of income required to buy a Lamborghini or Rolls Royce... pic.twitter.com/WvLtqcrgbh — Troy Hunt (@troyhunt) 2015 12 月 25 日
在澳洲最便宜的 藍寶基尼 Aventador 也要 65 萬澳幣(約 1500 萬台幣),最貴的大概 1 百萬澳幣(2300 萬台幣),當你付清所有款項,加上維修、損耗、保險和使用成本,需要將近 6 位數澳幣的花費,此時每週 3500 澳幣的收入一年下來大約累積 12 萬澳幣淨收入,所以就算樂觀估計,扣除名車的各項費用,那你還剩下 3 萬澳幣。除非你想一輩子跟父母住,不然這個廣告實在沒什麼道理,而且也不應該再出現。
累贅的 Cookie 警告

Cookie 相當常見,沒有 cookie 的話,很多東西都不能用,或者又要犧牲安全性來代替(例如透過網址持續開放授權),那為什麼要特地警告呢?當然, cookie 可以用來追蹤使用者,但這不需要 cookie 也能做到,就像這個 瀏覽器指紋 測試一樣,想知道使用者之前有沒有造訪過網站,並不需要透過 cookie 。這項警告沒什麼實際用處,只會被忽略而已。
綁架捲軸
這個毛病就像是設計師在炫耀,「媽,你看我會做這個!」,卻惹惱了在場許多人,如果這樣很難懂的話,看看 Mac Pro 的官網:

當你往下捲動,頁面不會隨之滾動,只是不同的內容會在上面浮現,經過上千網頁的訓練,我們已經習慣捲動就能看到接下來的內容,然後往回捲動就能看到先前的內容,蘋果在這個例子中,就好像取用了一項常見的使用者互動工具,卻胡亂使用,讓人不知所措。
用標題騙點擊
我在 Facebook 上常看到這樣的文章:

為什麼不在標題就告訴我法國人做了什麼,好讓我決定要不要花時間讀這篇文章?你大可在標題放上「他們通過了一項法案,禁止丟棄食物,」難道這樣會讓我像跳過其他垃圾訊息一樣放棄點擊,所以你就沒有收入?我認為廣告真的毀了網路,而我們一個都逃不掉。
千萬不要自動播放
當我進入網站想要讀一篇文章,最不想碰到的就是:

這是 CNN 上的自動播放廣告,好像花俏的彈跳廣告還不夠,現在還要加入聲音。所以當我想要安靜地讀一篇文章,比如說舒服地躺在床上看 iPad 的時候,這個網頁就推給我戒煙廣告影片,然後又自動播放關於這篇文章的新聞片段,雖然這稍微好一點,不過我得再次強調我是來閱讀的,這個網站又不是 YouTube,如果真的想聽,我會自己點播放。
向付費牆(Paywall)說不
有時你會碰到標題看來不錯的分享文章,點下去以後卻看到:

這個經驗之所以糟糕,是因為你已經短暫看到了文章,然後它又被奪走了。你可以在背景看到內容就在那裡,但是有一大張付費方案擋在前面,要是點了右上角的 X,希望它發揮功能把這個礙眼的付費牆關掉,但網頁卻跳轉回到首頁,然後你在首頁看到許多有趣的內容,點進去卻又是一片付費牆。
強迫下載行動版 App
在手機版網站閱讀文章已經足夠了,你卻看到這個:

為什麼下載這個 app 能帶給我更好的閱讀體驗?當下我只因為下載提示佔去一大塊空間拉低了閱讀體驗,這還是在 iPhone6 Plus 上,要是其他螢幕更小的手機,可能就會佔掉 1/4 的螢幕。手機螢幕寸土寸金,你卻拿來叫我下載一個三顆星的 app。
我不想分享行動版網站
另外當我想用 iPhone 分享上面的 NRMA 網站,
What I'm looking forward to re digital drivers licenses is how easy it'll be for kids to share them via social media https://t.co/56wtxZLlLp
— Troy Hunt (@troyhunt) 2016 1 月 4 日
這個網站很貼心地幫我在網址前面加了「m」,分享出去就變成手機版頁面,就算是用電腦開也一樣。我現在用電腦點開網頁,就看到大約 80% 的空間是浪費的,一個按鈕寬度竟然有 1850 畫素。這就是為什麼我們需要 響應式設計 ,它可以偵測你的裝置,然後自動調整適合的顯示方式,而非把你丟到另一個頁面,然後換成大螢幕的時候就變得亂七八糟。
不讓我用自己的公司信箱

阻擋廣告攔截軟體

What's a good example of a website hitting you with a full screen ad as soon as you load it? — Troy Hunt (@troyhunt) 2016 1 月 4 日
看一下大家對蓋版廣告的態度如何,我也貢獻過很多篇文章給富比士,也和其中許多頂尖人士合作過,不過負責這部分廣告的人,拜託讓你們主管看看上面的回應。
難道我們不能處理好這一切,讓網路回歸它該有的樣貌嗎?
有沒有漏掉什麼?
這些東西卡在我心裡很久了,一口氣說出來之後的確好多了,不過一定還有很多我沒注意到的。你最近有沒有看過哪些煩人的網站讓你不吐不快呢?
歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息
