業務系統 UX 設計中的常見錯誤

來自專欄 ANN 的設計筆記

這是一篇來自 Medium 上 Jason Teunissen 的譯文，關於業務系統類產品設計中常見錯誤的總結分析。

介紹

我是 a Mendix partner 的 UX 顧問，我的工作內容包括設計一些對內使用的業務系統。本文總結了一些「糟糕的解決方式」。

我所舉的例子都不是「絕對真理」，有很多是例外情況。所以別單純引用，把它們當成應對某類問題的設計靈感就好。

所有東西都塞到一屏展示

這在 UX 設計中很常見。在手機空間緊張的屏幕上，加些七七八八功能後，滿屏都是按鈕——別沮喪，我們都經歷過那種階段。

這種承載超多功能的屏幕讓我想起了瑞士軍刀——所有東西都折在刀里，但被用到的只有開瓶器。

相關言論:

點擊越少越好。

我要在一屏里看到所有東西！

用戶討厭滾動。

超負荷

「列出所有選項」聽起來不錯，但問題是人腦最多只能同時理解 9 個東西；而且通常，用戶不使用的按鈕比例高達 95%。

接近原則

另一個問題是，按鈕要接近和他們有關係的內容元素。若要放很多按鈕，就意味著失去了視覺上的接近和連貫。

用戶不討厭滾動

一些糟糕的設計經常把許多信息都不合時宜地塞到一屏里，這才會導致「讓用戶使用滾動條」的負面效果。

但在我們做過的分析中，曾有數據表明，一般只有 10% 的用戶才會在首頁滾動到頁面底部露出按鈕的位置。

——也許是這條數據讓你簡單地認為 90% 的用戶討厭滾動。

（另一篇文章說，首次訪問網站的用戶中，只有 23% 向下滾動，第二次訪問 只有 16% 向下滾動。但隨著時代發展，最近研究證明用戶覺得滾動也蠻舒服，並願意滾動到頁面底部。合理的有足夠留白的布局，更有利於用戶瀏覽。參考：10 Useful Usability Findings and Guidelines)

但其實問題並不在於「是否滾動」，而在於「信息量多少」。在頁面上放很多信息，直接結果就是用戶看了會抓狂然後好想趕緊關了走掉。

Millers law by Laws of UX：一般人一次只能記住 7± 2 條信息。

Law of proximity by Laws of UX：人們傾向於把位置接近的東西當成是一組。

下拉菜單

所以你整理了頁面里的元素，並把很多東西收到了「下拉菜單」中。

相關言論:

我要更多的焦點。

別太雜亂，讓我能很輕易找到我需要的東西。

平衡是關鍵

將你的頁面想像成一個物理空間，如果你把所有東西都放到抽屜里，那就必須一個抽屜一個抽屜打開翻找，直到最後找到想要的東西。

界面設計同理。

如果你的抽屜是符合邏輯的，放在恰當的地方，那麼效果就會不錯。

但舉個例子，有種情況是：在花園的儲物間里放「花園工具」，聽起來不錯。但你也把「燒烤工具」也放花園儲物間里嗎？或者放廚房裡？或者倆地兒都放？

做到合理的平衡很難。你們家烤肉的頻率，決定了你是把烤肉工具放到儲物間，還是廚房。

如果你有 5 個按鈕，它們不大適合收到下拉菜單里。但若 6 個按鈕，可能就另當別論了。

我在哪？

你的產品有一致的設計系統和品牌風格，所有頁面看起來都很統一。

但用戶沒用多久，就感覺像在一片「頁面森林」中行走——弄不清楚當前頁是不久前剛看過的那頁；還是一個完全不同的頁面，只是狀態相似而已。

相關言論:

要有一致的視覺風格。

設計系統驅動設計。

屏幕空間的有效利用才最重要。

設想在周五下午，你在 Facebook、公司工作群、和私人微信中來回切換，同時還要完成工作。你記住的最後一件事就是你處於某個流程中的某一步驟，和剛剛點過的鏈接。

——所有的頁面都要為這種用戶設計。

• 頁面要有清晰的標題和頁面名稱。
• 超過 1 個層級，用麵包屑。
• 如果某個流程有多個步驟，將步驟全部顯示出來。

長長一行的小字

另一個關於「使勁往頁面中加東西」的例子。

相關言論:

用戶討厭滾動。

有效地利用屏幕空間很重要。

網頁文本的排版的一條經驗原則是，一行不要超過 9 個單詞。（英文排版，僅供參考）

讀完一行字時，眼睛需要尋找下一行。如果這行字過於長，眼睛就很難準確找到下一行。

但你看啊，我們浪費了好多屏幕上的有效空間！

當你在 Medium 上閱讀時，你注意到了他們浪費了多少屏幕空間嗎？

其實，那些被你稱作「浪費的空間」，其實是非常有價值的投資。

如果有足夠的留白，那意味著這少量的文字一定極其重要。如果不重要，那就刪了它。

關於字體排版相關資料：

A Typographic Approach to Email （by：1019）

這篇文章里建議長文章頁面兩邊要有適當留白，每行文字不超過 75 個英文字元。

PS: 我數了下，傳說中的 75 英文字元包括空格。所以摺合成漢字，應該是每行不超過 37 個漢字（全形字元）。感覺這個說法更合理一點。Medium 也是一行 75 個字元。

彈窗上的彈窗

當我…會發生什麼。

有時為了節省空間會這樣做，但這種情況的問題是，用戶會在操作過程中失去「心理模型」。如果他完成了第二個彈窗的操作，他將回到第一個彈窗，還是回到初始頁面？

解決：應該將第一個彈窗處理成頁面，或者把第二個彈窗處理成內嵌錯誤消息。（inline error message）

卡片中的卡片

UX 設計師經常說「視覺層級」——組織頁面的方式向用戶傳達了元素的不同重要性。在這個過程中，具有物理象徵意義的「卡片」被引入其中。

在傳統的卡片組織中，卡片大小都是相同的

設計中，將一個卡片疊在其他卡片上面，放在底下，或者放旁邊。——這解釋了不同卡片的狀態或關係。

當你將一張卡片嵌套在另一張卡片中，用戶對於卡片的「心理模型」就崩塌了。用戶就會下意識開始懷疑界面中其他東西的關係，所有的邏輯都凌亂了。

解決辦法很簡單：別嵌套卡片，將卡片挨著放或靠近放，或者放在一個線框內（就好像將紙牌放在一個賭桌上）。

我該怎麼處理「表單輸入框」

我該設置一大長列表單輸入框嗎？還是將之劃分為多個步驟？或者排成 3 列，好讓它們在一屏內全部展示？

相關言論:

用戶討厭滾動。

主要問題不是頁面或表單的總數，而是第一眼在屏幕上看到多少表單。

就像按鈕的處理方式，在一屏內保證上下文語境、易用性的前提下，將數量降到最少。

只使用一列表單

永遠只設置一列表單，方便人眼瀏覽、檢查。

你是否在講一個故事

有時一個表單很長，或者前後順序性很強。那麼最好將表單分成不同幾頁。

為眼睛創造一些呼吸空間，向用戶介紹他們在幹嘛，為什麼這件事很興奮或重要。

下拉菜單

如果只有 1-5 個項目要選擇，別用下拉菜單。我知道這看上去很簡潔，但並不值得用戶為之花費力氣。「單選按鈕」更友好。

相關資料：

Design better forms by UX Collective

Single page or multi-page forms? by Stackoverflow

這個按鈕幹嘛的？

頁面中的元素應該儘可能一致、清晰。

最常見的例子是「確定」「取消」按鈕是放左邊還是右邊。

經驗法則是按 Apple / Google 等不同平台規範來。

一般來說，當下一步操作，是帶有「接受」「繼續」「購買」之類文案的按鈕，那麼按鈕用綠色，放右側。

如果放在「破壞性操作任務」中，這麼做會讓人困惑嗎？下面文章對此問題做了深入研究：

Writing microcopy for destructive actions by UX Collective

總結

• 按鈕最多不超過 9 個
• 僅在迫不得已時才使用「下拉菜單」
• 每個頁面都要有一個標題
• 當頁面層級超過 1 層時，使用麵包屑
• 如果有多個步驟，列出所有步驟
• 每行不超過 75 個半形字元（大約 37 個漢字以內）
• 切勿在彈窗上疊加彈窗
• 切勿將卡片嵌入卡片中
• 表單只有一列輸入框
• 按鈕上使用清楚的描述性文案

作者 Dribbble 主頁：