External Consistency
外部一致性
External consistency is not only how consistent your product is with other similar products, it can refer to its consistency to all products on your platform, all software in general, and even non-digital interactions throughout the real world. We’ll explain why external consistency matters, and provide a cautionary tale of what happens if you don’t follow the guidelines.
外部一致性不只是您的產品跟其它相似產品有無一致，它也可以是指在您的平台上，一般來說所有軟體，甚至於是整個世界非數位互動的一致性，我們將解釋為何外部一致性重要，並提供如果不遵守規範會發生什麼事的前車之鑑。
1. Why External Consistency Matters
1.為何外部一致性重要
To sum it up, external consistency is about meeting user expectations. In order to create a design that coincides with what your user is expecting, you must first understand what ideas they are bringing with them before they even use your site or app. This is a concept that usability expert Jared Spool refers to as current knowledge.
總結一句話，外部一致性是關於達到使用者期望。為了創造一個和使用者期待不謀而合的設計，你首先必須了解他們的想法，即便他們在使用您的網站或是應用程式前。這是一個概念，易用性專家Jared Spool稱為現今知識(current knowledge)。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aY0SATIXwcb_p.424384_1440666633406_Background.png?fit=max&w=882
Source: “Consistent Experience Across Multiple Screen Sizes.” Intel Free Press. Creative Commons.
Your users’ current knowledge is influenced by many external factors, anything from the last site they used to a far-fetched expectation from their favorite sci-fi movie. Don’t worry though
– for the most part, your users’ expectations will be reasonable.
用戶的現今知識被很多外在因素影響，從他們最後逛地網站到來自於最愛科幻電影的牽強期望，不要擔憂，大部份時刻，使用者的期望是合理的。
Designing based on what your users already know is not a new concept. This idea has been in place for years, evolving into the common design conventions you’ll see today in just about any app or website. The image carousel, an envelope icon represent- ing email, clicking on the site logo to return to the homepage... these are all referred to as UI patterns.
依使用者已經知道的來設計並不是一種新概念，這種想法已經存在好幾年了，演化成你今天在任何應用程式或是網站所看見地共用設計習慣。圖片轉盤（image carousel)、信件圖標代表電子信件、點擊網站的商標便回到首頁等...... 這些都被稱之為使用者介面模式。
UI patterns are design solutions to common usability problems. Patterns benefit everyone – users already recognize how to use them from previous exposure, and designers don’t need to reinvent the wheel.
使用者介面模式是常見易用性問題的設計解答，模式讓每人都受益，使用者已可以從先前的曝光中認出如何使用它們，而且設計師不需重新做起。
Our free ebooks Web UI Design Patterns 2014 and Mobile UI Design Patterns 2014 cover the most conventional and useful pat- terns available, but for now all we’ll say is that they’re the simplest way to incorporate external consistency.
我們免費的電子書“2014網路使用者介面模式”以及“2014行動使用者介面設計模式”包含了最常見、有用可到手的模式。但至今所有我們說得是將外在一致性引入最簡單地方式。
But external consistency isn’t limited just to sites or apps with visually rich designs. For example, users of Google Docs will find the top menu bars fairly familiar since we’ve all used Microsoft Word before. The menu options for Word are so firmly ingrained in frequent users of text editors, it just seems natural to see them again. It gets to the point where we take them for granted – we only notice when they’re not there.
但外部性設計並不只是限制在網站或應用程式的豐富視覺性設計，舉個例子，Google文件的使用者由於我們之前都使用過微軟Word會發現頂端清單欄相當熟悉，Word的清單選項對常用文字編輯器的用戶而言是如此地深根蒂固，相當自然地再次看見它們。這些清單選項已經到達我們視為理所當然地境界，只有當這些清單選項不在時我們才會注意到。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aY0SATIXwcb_p.424384_1440667037537_Layer%200.png?fit=max&w=882
- Source: UXPin
External consistency can be taken a step further to apply to human perceptions. For example, as Quora’s design director David Cole suggests, think about how most volume controls are presented as sliders. The slider is popular because it matches how people perceive volume. With the exception of specialists like sound technicians, we don’t think of it on a scale of 0 to 100, it’s purely relative to us. We either want sound to be louder, or quieter, not to go from 30% to 28%. The slider format became popular (and thus a standard of external consistency) because it matches our mental models.
外在一致性可以更踏出一步應用在人類認知上，舉個例子，如Quora的設計主管David Cole建議，想一想大部份的音量控制是怎麼用滑桿（sliders)來呈現地？由於滑桿和人們如何認知音量相配，滑桿是受歡迎的，除了像是音響技術員的專家外，我們不會把音量想成是0%～100%，它對我們而言單純是相對大小。 我們想要音量大聲一點或是小聲一點，而不是從30%調到28%，由於滑桿和我們心智模式相配，滑桿格式變得受歡迎（也因此成了外在一致性標準）。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aY0SATIXwcb_p.424384_1440667251626_1.tiff?fit=max&w=882
So after all this talk about doing what everyone else is doing, what does that say about being different, standing out, and set- ting yourself apart from the competition?
所以在聊了其他人都在做什麼後，究竟是什麼東西讓你在競爭間不同、脫穎而出、區分出來？
These are all fine things – in fact, they’re even recommended strategies – but you must be smart about where and how you stand out. Offering a new design solution that your competitors haven’t thought of will get you far. Going against a tried-and-true convention (that’s actually useful) for the sake of being clever will only damage your design. We’ll discuss this more in the next chapter.
這些都是好事，事實上，它們甚至建議策略，但你必須聰明的知道你在哪裡以及如何脫穎而出。 提供一個您競爭對手未曾想過的新設計會讓你差距更大，為了變得更聰明的緣故去違背一個嘗試過真實地常規（那真的很有用）只會破壞你的設計。我們會在下一章討論更多。
2. The Perils of External Inconsistency
A word to the wise for those of you fervent nonconformists. User expectations aren’t merely preferences, sometimes they’re habits.
2.外在不一致的危險
給你那些熱切不墨守成規的人們一句忠告話，用戶期待不僅是種偏好，有時候是種習慣。
Take for example, the stand signup form. We’re all aware of the UI pattern of the asterisk in form fields. Almost every user knows that an asterisk next to a field means that it’s required before proceeding.
舉註冊表單為例子，我們都意識到表單欄位（form field)星號的使用者介面模式，幾乎每個使用者知道一個在表單欄位（form field)旁的星號意味著在進行下一步前必需填寫。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aY0SATIXwcb_p.424384_1440783028377_Layer%200.png?fit=max&w=882
Source: OverClothing
But for a lot of signup forms, the necessary fields outnumber the optional ones. Wouldn’t it be simpler, then, to mark the optional fields with the asterisk?
但對於很多的註冊表單，必填欄位比選填的多，所以把選填欄位用星號標註不是比較簡單嗎？
That was the thinking Avis had a few years ago when they deviated from external consistency (as Jared Spool points out UIE.com). You can see in this screenshot how they broke from convention. The only way you’d know the asterisks denoted optional fields was by reading the microcopy at the top of the form.
那是多年以前Avis公司從外部一致性偏離出來的想法，（如Jared Spool在 UIE.com指出的），可以從截圖中看見他們如何打破常規。藉由閱讀表單頂端的顯微鏡是唯一讓你知道星號代表選填欄位的方式。
Never underestimate the laziness of users. When most people are faced with a form field, they start pumping out the information right away. The result is a design that essentially forces users to relearn how to read a form.
千萬不要低估使用者的惰性，當大部份的使用者面對表單欄位時，他們馬上把資訊抽離出來，這設計結果本質上會強迫使用者重新學習如何閱讀表單。
You can see in the new design that they’ve resigned themselves to using asterisks to indicate mandatory fields. It’s more externally consistent than their previous design, but it’s still incredibly visually obstructive. Now, it’s externally consistent almost to a fault.
在新的設計裡頭你可以看見他們勉強自己使用星號來表示必填欄位，這比他們先前的設計更有外在地一致性，但它依舊難以相信地有視覺阻礙。現在幾乎跟一個缺點外在性一致。
Couldn’t load preview
The file may have been moved or deleted, or is temporarily unavailable.
https://paper-hackpad-attachments.dropboxusercontent.com/uimarathon.hackpad.com_aY0SATIXwcb_p.424384_1440783574473_Background.png?fit=max&w=882
- Source: Avis
At first glance, the strongest impression is that everything is mandatory. The bright red asterisks instantly tells the user that a ton of work lies ahead. If asterisks are to be used, they could instead make them black instead of red – the meaning is retained, minus the visual overload.
第一眼最強烈地印象是每項都要強制填寫，亮紅色的星號瞬間告訴用戶大量地工作就在前頭，如果要用星號可以用黑色代替紅色，這意義有保留住，但視覺負荷卻減少了。
Alternatively, they could also label which fields are optional with an “(Optional)” tag. Such a treatment removes the need for asterisks, and the user could still understand that a lack of “(Optional)” implies that it’s mandatory. This design strays a bit from users may expect, but still feels more natural than putting asterisks next to optional fields.
換句話說，他們也能把選填欄位標上一個“選填”標籤，如此的對待方式移除了星號需求，而且使用者依然可以了解缺乏“選填”暗示著它是必填。這個設計有點偏離了使用者可能期待地，但依然比把星號放在選填欄位旁邊來的自然。
It’s true that the old and new form present only a minor set- back. But a few milliseconds of confusion increases cognitive load, which forces the user to think. Remember as we discussed in Interaction Design Best Practices that digital time is not human time. When visual interactions happen in the blink of an eye, your interface can’t hold the user back by a couple milliseconds.
的確舊的和新的表單僅帶來小挫折，但幾毫秒的困惑會增加認知負荷強迫使用者去思考，記得我們在互動設計最佳實例中討論到數位時間並非人類時間，當視覺互動發生在眨眼時，幾毫秒裡你的介面不能留住使用者。