1、信息過載
壞設計：洛杉磯的停車指示牌
洛杉磯（LA）的停車指示牌可以說是近十年來信息過載的典型代表。它們出了名的難以理解，因為交通規則很復雜，因此在壹塊小小的區域裏要傳達大量的信息。
這些指示牌有多令人費解呢？通常來說，它們從2010年起典型的樣式就像下面的圖片壹樣：
試想周二早上9點妳開著車上了這條公路。那妳可以停在這裏嗎？這麽簡單的問題竟然要費盡大量的認知資源去回答！
作為設計師，我們經常會面對需要在壹塊小區域裏傳遞大量信息的設計問題。LA的停車指示牌可能是其中最極端的壹個例子，但很多時候在移動端應用設計中也會面臨同樣的問題。那麽是否有壹個通用的辦法可以解決停車標識及類似的設計問題呢？
好設計：Nikki Sylianteng的停車指示設計
設計壹個可以展示所有信息，同時容易理解的的標示牌聽起來是壹個不可完成的任務。但這恰恰就是Brooklyn的設計師Nikki Sylianteng完成的。
Nikki的設計有效的原因之壹正是因為它是以用戶為中心的：Nikki意識到駕駛人其實只想知道他們現在是否可以停在這裏。可以或者不可以，這才是所有駕駛者需要的，所以指示牌也只需要展示這些信息。
她在設計中利用了視覺來傳達信息而不是文字。結果就是設計極為直觀：綠色代表可以停車，紅色代表不可以。同時這個設計裏還考慮了色盲的問題，所以在不可停車的時間域內用了斜線。
現在當妳看到這塊標示時，妳就知道周二早上9點是不可以停車的。這樣的指示牌子瞄壹眼就能懂。
所學到的最佳實踐：
- 了解妳的用戶需要什麽，然後基於此設計。這可以幫助減少信息負載。
- 有大量的信息要傳達給妳的用戶？試著用視覺化元素來替代文字。點擊以下鏈接了解更多數據可視化的知識。
2?神秘肉式導航
壞設計：LazorOffice.com
根據1998年Vincent Flanders創建的網頁The Suck，神秘肉導航（MMN）用於指代那些必須要用戶點擊鏈接或把鼠標懸停鏈接之上才知道指向目標的設計。“神秘肉”這個短語，起源於美國公立學校的自助餐廳提供的肉類，因為被過度處理而根本無法辨別出來。
MMN不好，是因為它降低了導航元素的可見性。因為用戶必須要去“猜”導航的目的地，或者必須要有點擊操作，因此增加用戶的認知負載。
目前老式的網頁設計中還可見到MMN，現代網頁設計中已經很少見到了。我們以Lazor Office為例——壹個提供預制房屋的設計公司網站。
在他們主頁的下方，壹組圖片縮略圖靜靜的擺放在那裏。它們是可點擊的嗎？是的，它們可以點擊。如果妳把鼠標移動到這些圖片上，它會變指針的樣子。但是當妳點擊後會發生什麽呢？
“點擊後查看”並不是個好的用戶體驗解決方案。這種設計會會帶來的改變是，妳的用戶會棄用這些導航，而從妳的競爭對手那裏獲得替代的解決方案。
好設計：Interaction Design Foundation網頁的課程卡片
幸好MMN問題是很容易解決的。關鍵是意識到妳必須清晰地標註鏈接。僅僅是在鼠標懸停上增加“查看項目”的彈出提示就可以提升Lazor Office主頁的可用性。
我們Interaction Design Foundation上的課程卡片，不僅每張卡片的底部有“查看課程”入口用以提示行動結果，同時鼠標懸停在卡片上時還會彈出“進入課程”的提示語。許多網站都遵循這壹相同的規則，所以妳也必須要遵守，那就是最大化妳網站的可用性。
所學到的最佳實踐：
總是標註清楚鏈接的指向！妳不會喜歡吃神秘肉的——同理，妳的用戶也不喜歡點擊指向未知的鏈接。
3、給增加用戶操作的困難
壞設計：iFly50.com
作為設計師，我們需要對增加用戶操作難度的設計抱有高度的警惕，除非目的是勸說用戶不要操作這個行為。然而有時我們也會在無意之中（大多是為了審美或新奇的需要）增加了用戶的操作難度以至於產生不良的用戶體驗
其中壹個例子就是iFly50——KLM公司（荷蘭皇家航空公司）為iFly雜誌周年紀念創建的網站。IFly是壹個垂直滾動的網頁，展示了50個旅遊目的地，在某些目的地（如下）的 圖片底部會出現壹個按鈕讓用戶“點擊並保持”幾秒以查看更多圖片。
這種在每個行動上都增加幾秒的困難行為會導致極差的體驗。試想，如果妳在瀏覽器中查看每個鏈接都需要點擊然後保持幾秒，而不是立即得到加載相應的頁面的結果，那麽僅需要幾個“點擊並保持”的操作，妳將會放棄探索整個互聯網。
很多時候，我們的設計師傾向於應用最新的交互樣式或操作，但非常重要的是，警惕妳的設計可能增加用戶的操作困難。大多數時間，使用及測試慣常的操作（例如，簡單的點擊或滑動）就能很好的工作了。
好設計：iOS的彈性滾動
有趣的是，精心設計的操作困難反而會成為偉大的設計。Apple公司在其移動端操作系統iOS上最受歡迎的操作就是彈性滾動，在某些情境下（例如頁面的最底部最）滾動會變得非常困難。
妳可以看到當用戶滾動到最後壹頁時增加了滾動的難度。在這裏增加操作的難度是為了提示用戶向下滾動已經不可用了，而且其效果是產生符合直覺的體驗。
所學到的最佳實踐：
盡力避免給用戶的操作增加任何難度——當妳沒有更好的方案時盡可能的改良這種難度。
4、“聰明”但忽略了可用性的設計
壞設計：Bolden.nl
有時，聰明的設計也會對用戶體驗造成重創。令這個錯誤變得更加危險的是，設計師們熱愛聰明的設計。因為這些小小的圖形驚喜可以讓我們設計師的臉上浮現出微笑。但可悲的是，大多數人類並不是設計師。更為可悲的是，並不是所有聰明的設計是好設計，尤其是當它們造成了不可達性、不可見性或不可用性的問題時。
以荷蘭戰略設計和開發工作室Bolden的網站為例：
這是壹個典型為設計師而非為用戶設計的案例：網站設計者為了展現新奇的設計樣式，顯著的降低了標題的清晰度。無論誰設計的這個頁面，他也忘記指引用戶移動鼠標到角落以查看標題，這也就意味著標題能被看到是非常隨機的。更進壹步來說，即使標題當前可見，但由於文本與背景的對比不足，用戶仍然會看到重疊的字母。所有的壹切造就了壹個對用戶不友好的網站。
好設計：CultivatedWit.com
CultivatedWit的網站就是以上壞設計的反例，它展示了如何使用不犧牲可用性的聰明設計。
當鼠標置於貓頭鷹插圖之上時，貓頭鷹就會眨眼。
與上面壞設計最大的不同是，CultivatedWit網站上貓頭鷹的眨眼並不是整個網頁設計的核心，所以即使用戶並沒有留意到這個聰明設計，也不會影響其可用性。
而且，頁面上還有壹個清晰的向下滑動的箭頭提示還有信息在下方。當妳滑動到下頁時，妳會看見：
副本（清晰且具有良好的對比度）創造出壹種機智的感覺——這與Bolden試圖實現的不同——並沒有減弱網站的用戶體驗。這裏唯壹的問題是輸入框中的“加入我們郵件俱樂部”的提示應該更清晰壹點，但從整體上來說，Cultivated Wit的網站的例子已經足以說明聰明的設計並不總是導致不好的用戶體驗。
所學到的最佳實踐：
聰明的設計應該盡可能保證不會出錯，並且/或者要在實際的用戶中測試。有時，聰明的設計可能事與願違並且傷害可用性。
5、多余的動效
壞設計：Dribbble上PayPal收據的概念設計
動效是交互設計裏的壹個重要元素，但動效的設計必須服從目的。永遠不能為了動效而做動效。不幸的是，設計師們都很愛使用動效，部分原因是動效很有趣，但我們不知道什麽時候要適可而止。
Vladyslav Tyzun在Dribbble上展示的PayPal收據概念的設計就是壹個錯誤使用動效的案例。
這個問題的危險性在於設計師們似乎總覺得動效不夠。在2016年壹整年，Vladyslav的動效收到了超過500個贊和8000多次查看。這會導向壹種錯誤的認知即設計師應該為了動效而設計動效。洞察到當前設計趨勢是采用更加直接的展現形式，並且在投入設計動效之前意識到自己想增加效動的傾向，將幫妳節省大量的時間並避免很多頭痛的問題。記住，用戶到網站來都是帶著目的的——我們需要在短暫的空白和時間後就向用戶展示內容，而不是繞壹大圈才展示出來。
好設計：Strip的付款動效
當我們基於目標運用動效時，結果將會非常棒。下方是當用戶接收驗證碼時
Stripe的付款動效。
Rachel Nabors，壹位W3C的網頁動效專家受邀提出以下5條需牢記在心使用動效的原則：
所學到的最佳實踐：
永遠要基於目的設計動效：太多動效會傷害產品的用戶體驗。要降低審美的權重，更具有功能性。
結語：
看到這些壞設計的例子是不是很有趣？同時，它們也有教育的價值。以下就是我們從這5個壞設計和好設計的對比中學習到的經驗：
1-理解妳用戶所需，並提供對應的信息。
2-如果妳有太多信息要傳達，試著使用圖像化信息而非文字
3-壹定要標註鏈接！用戶並不是喜歡指向不明的鏈接！
4-避免為用戶的行增加困難，除非是為了讓用戶不要操作這個行為
5-測試妳的聰明設計，並且小心謹慎的使用它們
6-動效是個魔咒。如果妳過度使用它，就可能失去它所有的作用。
下次妳再看到壹個壞設計的例子，停來下想想：弄懂為什麽這個設計失敗了，並找到對應做得好的設計案例，記下妳從中獲得的經驗。然後到我們的討論社區來與大家分享妳的收獲。
譯文地址：https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706