多數人心裡對「好設計」的第一印象，大概離不開配色順眼、字體時尚、動畫流暢這幾件事。網站一打開，先評斷的往往是好不好看，好不好用反而是後來才浮現的問題。這個直覺乍看合理，卻正是網頁設計常見迷思裡最容易被誤判的一條。一個介面看起來美，不代表操作起來真的順手。
1995 年，日立設計中心（Hitachi Design Center）的研究者 Kurosu 與 Kashimura 做過一場後來被反覆引用的經典研究，針對 ATM 介面設計出 26 個版本，找來 252 位受測者，同時對「美觀程度」與「好不好用」評分。結果發現，使用者對美觀的評分，跟他們主觀覺得好不好用的評分高度相關，但跟實際操作測出來的好用程度，相關性弱得多。看起來好用，跟真的好用，是兩件不一定同時成立的事。
接下來要拆穿的，就是網頁設計裡五個看起來合理、卻在使用者研究裡站不住腳的常見迷思，先從「好看」與「好用」的落差講起。
誤解一：畫面好看，使用者就會覺得好用
這個現象有個正式名稱，叫美觀可用性效應（aesthetic-usability effect），指的是使用者會不自覺地認為，外觀好看的介面「應該」比較好用，即使操作起來未必如此。這個效應有清楚的邊界，好看能讓使用者對小瑕疵更寬容，卻補不了大問題。
Nielsen Norman Group 這幾年重新做可用性測試，也驗證了這個邊界。測試顧問公司 Arcadis 的網站時，受測者一開始盯著頁面上那張色彩繽紛的大圖讚不絕口，說「打開這個網頁，我第一眼看到的，就是這張美麗又有色彩的圖片」；可是接著要完成好幾項操作任務時，卻一路卡關，事後才改口說「整個畫面被這張圖佔滿，第一次看可能還覺得不錯，但第二次大概會覺得很煩」。測試 FitBit 網站時也出現類似狀況，受測者購物過程中遇到不少問題，最後仍勉強完成任務，事後問卷卻打出高分，理由只落在配色上，形容「用的顏色很好看，像海洋一樣，給人平靜的感覺，照片也拍得很漂亮」。
兩個案例的共同點是，使用者的評分容易被視覺體驗牽著走，跟他實際操作時卡不卡關，其實是兩回事。這是你檢視自己網站時值得放在心上的提醒，畫面好看確實有實際效果，能讓使用者對介面更寬容，也墊高第一印象的分數，但它換不了真正的易用性測試，上線前該做的可用性驗證，一項都不能省。
誤解二：畫面特效與動態效果做得越多，越能留住使用者
美觀值得投資，不代表就該無限往上疊加視覺效果。轉場動畫、進場特效、大圖背景輪播，很多人相信這些做得越多，網站越用心、使用者也越捨不得離開，問題是這些效果幾乎都要用載入速度去換，速度一旦變慢，先掉的往往是轉換率，不是視覺體驗。
Google 與 Deloitte 聯合發布的「Milliseconds Make Millions」研究，分析了 37 個品牌、為期四週、約 3000 萬次工作階段的行動網站數據，橫跨零售、旅遊、名單開發等產業，每個係數都要達到 95% 的統計顯著水準才列入分析。結果顯示，行動網頁的載入時間只要加快 0.1 秒，零售業的轉換率就平均提升 8.4%、平均訂單金額提升 9.2%；旅遊業的轉換率提升 10.1%；名單開發網站的表單提交率更提升 21.6%。這份數據鎖定的是行動網站，但道理不分裝置，0.1 秒短到使用者幾乎感覺不到，換算成業績的影響卻不是小數目。
這不是說你的網站不能有任何動態效果，而是要分清楚哪些動畫在幫使用者、哪些只是在拖時間。按下按鈕後的即時回饋、表單送出後的提示動畫，這類微互動能讓操作感覺更順，值得保留；至於進場時的大型動畫、自動播放的背景影片，多半只是裝飾用途，一旦拖慢載入速度，犧牲的效益通常大於它帶來的視覺加分。
誤解三：留白就是浪費版面，內容要塞好塞滿
把不必要的特效拿掉之後，版面上難免會多出一些空間，而這些留白，很多人的直覺反而是想把它填滿，尤其是想在同一頁塞進更多商品、更多按鈕、更多訊息的電商網站，總覺得留白等於浪費寸土寸金的版面。不過學術研究給出的答案剛好相反。
Coursaris 與 Kripintris 在 2012 年發表於《International Journal of E-Business Research》的研究，做出留白比例分別為 25%、50%、75% 的電商網站版本，讓不同組的受測者分別對每個版本評分。結果發現，留白比例跟使用者感受到的美感、以及感受到的易用性都呈正相關，但這個正相關不是沒有極限，一旦留白比例超過版面的 50%，可用性的評價反而開始下滑。
這對實務操作的意義，不是叫你把版面清空，而是把留白用在刀口上。重要資訊、行動呼籲按鈕周圍留出呼吸空間，能幫使用者一眼抓到重點；但如果整頁留白過度、內容稀薄，反而會讓真正該被注意的東西被稀釋掉，一樣傷害可用性。
誤解四：緊跟最新設計趨勢，就是把設計做好
留白怎麼抓分寸，已經有研究可以驗證；但網頁設計常見迷思裡，還有一種連驗證的意識都常常缺席，那就是誤以為跟著設計趨勢走、換上當紅視覺手法，就等於把設計做好。扁平化設計（flat design）就是一個典型例子，拿掉陰影、漸層、立體邊框，線條乾淨、載入也快，一度是網頁與 APP 介面最主流的視覺語言。
Spiliotopoulos 與 Rigou 2018 年發表於《Multimodal Technologies and Interaction》期刊的比較研究，找來 20 位受測者，用眼動儀追蹤他們在扁平化與擬物化（skeuomorphic）兩種介面之間辨識圖示的過程。結果發現，面對扁平化圖示時，使用者的目光落點更分散、掃描路徑也更長，顯示光靠外觀要一眼認出哪個元素可以互動，比擬物化設計吃力。
但同一份研究也出現一個耐人尋味的反差。任務結束後，受測者用系統可用性量表（SUS）幫兩種設計評分，扁平化介面的整體分數反而明顯高於擬物化設計。使用者操作時得多花一點力氣才能認出扁平圖示，事後主觀感受卻覺得它更好用，這跟前面「看起來好用不等於真的好用」的落差，幾乎是同一個現象換了個方向，操作起來比較吃力，主觀評價卻反而更高。
這也是為什麼 Nielsen Norman Group 一直強調 Jakob 定律（Jakob’s Law）。這項定律的核心主張是，使用者花在其他網站上的時間遠比花在你的網站上多，因此會預期你的網站行為方式，跟他們已經熟悉的其他網站保持一致，一味為了追求新穎而偏離常見的互動慣例，等於是在增加使用者重新學習的成本。設計趨勢真正該花力氣跟上的，是視覺風格與品牌調性這類可以自由發揮的層面；至於按鈕、連結、表單欄位這些核心互動元件，你的優先順序反而該倒過來，先守住使用者已經熟悉的辨識慣例，視覺上想怎麼變化，都得建立在使用者看得懂、點得到的前提之上。
誤解五：手機版設計，只要把桌面版等比縮小
視覺風格能不能跟著潮流走，核心互動元件卻要顧慮使用者的既有習慣，而手機版設計最容易忽略的其中一個習慣，就是使用者實際怎麼拿手機、怎麼用手指操作介面。不少網站的手機版，說穿了只是把桌機版的排版整個等比例縮小，欄位變窄、字變小、按鈕跟著一起縮，邏輯上好像沒毛病。但這個做法忽略了一件事，手機其實不是縮小的桌機，是拿在手上、用手指操作的裝置。
設計師 Steven Hoober 2013 年在 UXmatters 發表過一份實地觀察研究，他和研究團隊花了兩個月，在街頭、機場、公車站、咖啡館、火車和公車上，觀察了 1,333 次真實使用者操作手機的方式，其中 780 次牽涉到觸控螢幕的直接互動。結果發現，接近一半的使用者（49%）習慣單手握著手機、用拇指操作；三成六的人雖然雙手拿著手機，但仍只用其中一手的拇指操作；真正兩隻手一起參與操作的，只占一成五。
這個現象讓他歸納出「拇指熱區」（thumb zone）的概念，把螢幕依照拇指觸及的難易度分成三種區域，螢幕下半部與中央最容易觸及，兩側偏上的地方需要稍微伸展，最難構到的則是畫面上方兩個角落，往往得換手或用另一手輔助才點得到。
這對你的手機版設計來說，意義很直接。不是把桌機版的欄位、按鈕比例整個縮小塞進小螢幕，而是要依照拇指構得到的範圍重新安排互動熱點。送出表單、加入購物車、開啟主選單這類使用頻率高的操作，該盡量落在拇指容易觸及的下半部；桌機版習慣放在畫面右上角或左上角的按鈕，搬到手機版之後，往往需要挪到更靠近拇指的位置。
這五個網頁設計常見迷思有一個共同點，設計決策太常只靠直覺或流行風向去判斷，卻沒有回到使用者實際會怎麼操作這個問題上驗證過。往後遇到任何一個設計上的選擇，不妨都拿去問一句「這個改動，是讓使用者更快完成他想做的事，還是只是看起來比較厲害」，把這句話留在心裡，大概就是分辨好看跟好用最簡單的篩子。