1，信息過載
糟糕的設計:洛杉磯的停車標誌
洛杉磯的停車指示牌可以說是近十年信息超載的典型代表。它們是出了名的難以理解，因為交通規則非常復雜，所以很多信息都要在很小的區域內傳達。
這些標誌有多混亂？總的來說，他們從2010開始的典型風格就像下圖:
想象壹下，妳在周二早上9點開車經過這條路。那妳能在這裏停車嗎？回答這麽簡單的問題，需要耗費大量的認知資源！
作為設計師，我們經常會面臨需要在很小的區域內傳遞大量信息的設計問題。LA的停車牌可能是最極端的例子之壹，但很多時候在移動應用設計中也會面臨同樣的問題。那麽有沒有壹個通用的方法來解決停車標誌以及類似的設計問題呢？
好的設計:Nikki Sylianteng的停車指示設計。
設計壹個可以顯示所有信息並且容易理解的標誌聽起來像是壹個不可能完成的任務。但這正是布魯克林的設計師Nikki Sylianteng所做的。
Nikki的設計之所以有效，其中壹個原因正是因為它以用戶為中心:Nikki意識到司機們只想知道他們現在是否可以在這裏停車。是或不是，這是所有司機都需要的，所以標誌只需要顯示這些信息。
在她的設計中，她用視覺而不是文字來傳達信息。結果就是設計極其直觀:綠色表示可以停車，紅色表示不可以。同時，本設計中還考慮了色盲問題，所以在不停機的時間域中使用了對角線。
現在看到這個標誌就知道周二上午9點不能停車了。這樣的標誌壹眼就能看懂。
學到的最佳實踐:
-知道妳的用戶需要什麽，然後據此進行設計。這有助於減少信息負載。
-有很多信息要傳達給妳的用戶？嘗試用視覺元素代替文字。單擊下面的鏈接了解有關數據可視化的更多信息。
2?神秘的肉導航
糟糕的設計:LazorOffice.com
根據Vincent Flanders在1998中創建的網頁The Suck，MMN用來指那些需要用戶點擊鏈接或將鼠標懸停在鏈接上才能知道目標的設計。“神秘肉”壹詞源於美國公立學校食堂供應的肉，被過度處理，根本無法分辨。
MMN不好，因為它降低了導航元素的可見性。因為用戶必須“猜測”導航的目的地，或者必須點擊，這增加了用戶的認知負荷。
目前，在老式網頁設計中仍能看到MMN，但在現代網頁設計中已不多見。我們以Lazor Office為例，壹家提供活動板房的設計公司網站。
在他們主頁的底部，壹組縮略圖靜靜地放在那裏。它們可以點擊嗎？是的，它們可以被點擊。如果將鼠標移到這些圖片上，指針的外觀會發生變化。但是當妳點擊的時候會發生什麽呢？
“點擊查看”並不是壹個好的用戶體驗解決方案。這種設計將帶來的變化是，妳的用戶將放棄這些導航，從妳的競爭對手那裏獲得替代解決方案。
好的設計:交互設計基礎網頁課程卡
幸運的是，MMN問題很容易解決。關鍵是要認識到，妳必須清楚地標記鏈接。只需在鼠標懸停時增加“查看項目”的彈出提示，就可以提高Lazor Office主頁的可用性。
我們《交互設計基礎》上的課程卡片，不僅在每張卡片底部都有“查看課程”的條目來提示動作結果，鼠標懸停在卡片上時還會彈出“進入課程”的提示。很多網站都遵循這個相同的規則，所以妳也必須遵循它，也就是最大化妳網站的可用性。
學到的最佳實踐:
壹定要標註清楚鏈接的方向！妳不喜歡吃神秘的肉——同樣，妳的用戶也不喜歡點擊指向未知的鏈接。
3、增加用戶操作難度。
糟糕的設計:iFly50.com
作為設計師，我們需要高度警惕讓用戶更難操作的設計，除非目的是說服用戶不要操作這種行為。但有時我們會在不經意間(多為審美或新奇需求)增加用戶的操作難度，導致用戶體驗不佳。
壹個例子是iFly 50，這是壹個由荷航為《iFly》雜誌周年紀念創建的網站。IFly是壹個垂直滾動的網頁，顯示50個旅遊目的地。在某些目的地(如下圖)，圖片底部會出現壹個按鈕，供用戶“點擊並按住”幾秒鐘以查看更多圖片。
這種每個動作增加幾秒鐘的困難行為會導致非常糟糕的體驗。想象壹下，如果妳需要點擊並按住瀏覽器中的每壹個鏈接幾秒鐘，而不是立即得到加載相應頁面的結果，那麽妳就會放棄僅僅通過幾次“點擊並按住”的操作來探索整個互聯網。
很多時候，我們的設計師傾向於應用最新的交互風格或操作，但非常重要的是要警惕妳的設計可能會增加用戶的操作難度。大多數時候，使用和測試通常的操作(例如，簡單的點擊或滑動)會很好。
好的設計:iOS的彈性滾動
有趣的是，精心設計的操作難點會成為偉大的設計。蘋果在其移動操作系統iOS上最受歡迎的操作是彈性滾動，這在某些情況下(比如頁面底部)變得非常困難。
妳可以看到，當用戶滾動到最後壹頁時，增加了滾動的難度。這裏增加了操作的難度，提醒用戶不再可以向下滾動，效果是產生直觀的體驗。
學到的最佳實踐:
盡量避免給用戶的操作增加任何難度——在沒有更好的方案時，盡可能提高這個難度。
4.“聰明”但忽視可用性的設計
糟糕的設計:Bolden.nl
有時候，智能設計也會給用戶體驗造成重大損失。讓這個錯誤更加危險的是，設計師喜歡智能設計。因為這些小小的圖形驚喜能讓我們的設計師會心壹笑。但可悲的是，大多數人類都不是設計師。更可悲的是，並不是所有的智能設計都是好的設計，尤其是當它們導致可訪問性、不可見性或不可用的問題時。
以荷蘭戰略設計與開發工作室Bolden的網站為例:
這是壹個典型的為設計師而非用戶設計的案例:網站設計師為了展現新穎的設計風格，大幅降低了標題的清晰度。不管是誰設計了這個頁面，他都忘了引導用戶把鼠標移到角落去看標題，也就是說標題可以很隨意的看到。此外，即使標題當前可見，由於文本和背景之間的對比度不足，用戶仍然會看到重疊的字母。這壹切造就了壹個對用戶不友好的網站。
好設計:CultivatedWit.com。
CultivatedWit的網站是上述糟糕設計的反例，它展示了如何在不犧牲可用性的情況下使用智能設計。
當鼠標在貓頭鷹插圖上時，貓頭鷹會眨眼。
與上面糟糕的設計最大的不同是，在CultivatedWit網站上的貓頭鷹眨眼並不是整個網頁設計的核心，所以即使用戶沒有註意到這個巧妙的設計，也不會影響它的可用性。
而且頁面上有明顯的向下滑動箭頭，下面有信息。當您滑動到下壹頁時，您將看到:
文案(清晰且對比良好)營造了壹種機智感——這與博爾登試圖達到的效果不同——並且不會削弱網站的用戶體驗。這裏唯壹的問題是，輸入框中的提示“加入我們的郵件俱樂部”應該更清晰，但總體來說，Cultivated Wit的網站這個例子足以說明，聰明的設計並不總是導致糟糕的用戶體驗。
學到的最佳實踐:
智能設計應該盡可能沒有錯誤和/或在實際用戶中測試。有時候，聰明的設計可能會適得其反，損害可用性。
5、冗余動態效應
糟糕的設計:Dribbble上PayPal收據的概念設計
動態效果是交互設計中的重要元素，但動態效果的設計必須服從目的。千萬不要為了動態效果而做動態效果。不幸的是，設計師愛用動態效果，部分原因是動態效果很有趣，但我們不知道什麽時候該停止。
Vladyslav Tyzun在Dribbble上展示的PayPal收據概念的設計就是壹個誤用動態效果的案例。
這個問題的危險在於，設計師似乎總覺得動態效果不夠。2016壹整年，Vladyslav的動態效果收到了500多個贊，8000多個瀏覽量。這會導致壹種錯誤的認知，認為設計師應該為了動態效果而設計動態效果。意識到現在的設計趨勢是采用更直接的呈現形式，意識到妳在投入設計效率之前提高效率的傾向，會節省妳很多時間，避免很多頭疼的事情。記住，用戶來網站是有目的的——我們需要在短暫的間隙和時間後，把內容展示給用戶，而不是繞壹個大圈。
好的設計:Strip的支付效果
當我們使用基於目標的動態效果時，效果會很好。下面是用戶收到驗證碼的時候。
Stripe的支付效應。
W3C網頁動態專家雷切爾·納伯斯(Rachel Nabors)受邀提出了使用動態效果時需要牢記的以下五條原則:
學到的最佳實踐:
永遠基於目的設計動態效果:過多的動態效果會傷害產品的用戶體驗。減少審美的分量，功能性更強。
結論:
看到這些糟糕設計的例子有意思嗎？同時，它們也具有教育價值。以下是我們從這五個糟糕的設計和好的設計的對比中得到的教訓:
1-了解妳的用戶需求，並提供相應的信息。
2-如果妳有太多的信息要傳達，盡量用圖形信息代替文字。
3-壹定要標記鏈接！用戶不喜歡指向未知鏈接！
4-避免給用戶的行增加困難，除非是為了防止用戶操作這種行為。
測試妳的智能設計，並小心使用它們。
6-動態效果是個詛咒。如果妳過度使用它，妳可能會失去它的所有功能。
下次妳看到壹個糟糕設計的例子，停下來想壹想:找出設計失敗的原因，找壹個相應的做得很好的設計案例，寫下妳從中獲得的經驗。然後來我們的討論社區與妳分享妳的收獲。
翻譯地址:https://www . interaction-design . org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-from bad-design-vs-good-design-5-examples-we-can-learn。