付款按鈕設計的糟糕現狀

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

 

這簡直就是一團糟，我有一些理論證實爲什麼如此。

 

 

 

我在金融領域作設計作了很長一段時間。這不是我要作的事情，只是發生了一些事情。個人第一份金融工做是爲first USA製做橫幅廣告。這不是一件使人嚮往的事情，但偶爾咱們也會獲得一份有趣的工做。個人確獲得了爲Austin Powers VISA卡製做橫幅廣告的機會。

 

「奶奶須要另外一張信用卡」 - 邪惡的藝術總監

 

 

 

我找不到廣告來證實，可是這裏是卡片設計的其中一張圖片。瘋狂：這是90年代的。通過此次艱難的實驗，我還在其餘金融機構工做過：CapitalOne,，MBNA，美國銀行和其餘一些機構。我迷失了方向，不過謝天謝地我作過不止這一種類型的工做。

 

在過去的幾年裏，我一直在作品牌方面的工做，電子商務是亞馬遜這個新時代品牌生存的重要組成部分。試着跟上潮流，有許多辦法來籌集資金。信用卡是最標準的，但自從我開始寫這篇文章以後，PayPal，VISA Checkout，AMEX Express Checkout，Amazon Pay，Apple Pay，Bitcoin，Etherium，Litecoin，Venmo，Alipay，Android Pay等還有六種新方式都相繼出臺。他們都有一樣的目標：得到用戶的資金來換取商品或服務。每一個都有好處和缺點，大多數都是由付款方規定而設計的糟糕的用戶界面按鈕。

 

 

若是你以支付方的要求來設計一個結帳屏幕，則會出現和左側相似的狀況。看起來並不統一，每一個付款選項都在競相爭寵，包括（綠色的）「當即購買」按鈕。那麼用戶如何決定哪一個是最適合他們的呢？

 

這裏有那麼一兩個還能接受的按鈕，但剩下的按鈕設計更糟糕，看起來很彆扭。

 

讓咱們來分析一下吧。

 

信用卡

 

 

 

 

舊標準。全部信用卡都有所謂的「銀行標誌」。這些是你在現實生活中最喜歡的商業大門上的貼紙上看到的。這些寶貝已經轉變成電子商務的小按鈕，並且因爲舊信用卡公司對這個新世界的發展速度反應過於遲鈍，他們歷來沒有真正對這些標記的數字受權任何規則。你會看到網絡上的各類各樣的東西，而且一般是程式化的版本。我相信這會扼殺掉VISA, Mastercard, American Express and Discover的品牌，可是他們已經錯失了這場遊戲。

 

如下是亞馬遜，Zappos，樂天，SimplifyCommerce和Apple等的一些例子。每一個品牌都有基本特徵，但風格，形狀和大小都不一樣。設計團隊根據本身的須要對這些設計進行了定製。

 

 

 

 

 

 

 

 

 

PayPal

 

 

 

我早期是PayPal的忠實粉絲。他們是第一個普遍使用數字支付選項的平臺，而後它們發展緩慢而變得過期。

 

PayPal的按鈕設計的太糟糕—沒有辦法。目前有三種不一樣的官方PayPal按鈕。

 

舊版本（官方）→ 點擊此處

 

 

新版本（官方）→ 點擊此處

 

 

新版的響應選項 → 細節分享

 

 

好消息是，PayPal彷佛最終選擇更新他們的無響應按鈕。問題是這個最近的版本有許多的限制，尤其突出的是按鈕下的宣傳語。這不是你能（輕易）關閉的。若是，基於一個很大的假設，PayPal能夠改進這種近期的響應式按鈕工具，並給予設計師更高的靈活性，那麼也許在未來，咱們會使用它。

 

VISA Checkout

 

 

 

VISA已經花了一大筆錢來推銷他們的數碼產品，並且試驗並不糟糕，但實際上並無比Paypal好。它仍然會把你帶出商店外而後又誘惑你回來。VISA Checkout更嚴重的的問題是用戶界面按鈕是由歷來沒有作過檢驗流程的人所設計的。

 

品牌和知名度是最重要的元素 - 其餘一切都浮雲。這個雙按鈕形狀不容易與頁面上的其餘元素對齊，也很大。當你用其餘按鈕垂直堆疊時，最終會出現奇怪的垂直間距。別嘗試去使用這個了。

 

 

驗收標誌其實是至關不錯的，有不少選項可供選擇。這些至少是可行的。

 

 

個人猜想是，VISA向一家大型機構支付了一大筆錢，來設計這個好笑的按鈕。他們如今投資的人知道他們投入了多少，因此留了下來。也就是說，直到新的首席設計官進來，並用新潮的想法改變了行政人員的觀點。

 

Apple Pay

 

 

 

經營平板電腦的蘋果公司並非使用數字支付的首個平臺。可是，他們再次迴歸，作了一項了不得的工做，瞄準了其全部競爭者所丟失的商機。Apple Pay（兩個單詞）按鈕是徹底響應，並有三種簡單的風格。標誌清晰小巧。蘋果有兩大優點。首先，iPhone的普及率是巨大的，有一羣經濟實力雄厚的使用者。第二，蘋果支付的用戶體驗很友好。你單擊Apple Pay，彈出付款表，並用指紋確認。完成。不用離開網站，不用分心，只是須要支付而後享受就好了。

 

Apple Pay有白色和白色邊框的按鈕

 

完整的Apple界面指南→ 這裏

 

Masterpass

 

 

 

Masterpass與VISACheckout很是類似，都挺糟糕的。你的第一個想法是，UI guidelines是PDF而不是代碼工具。再次，我認爲一個大的機構出售他們，如今他們被難住了。這不像VISA那麼醜，但也不美。至少是一個標準的形狀。

 

masterpass的按鈕

 

AMEX Express Checkout

 

 

咱們在用戶界面上進行的嘗試又半途而廢了。AMEX甚至不會在你沒有賬戶的狀況下看到他們的用戶界面指南。儘管屢次嘗試，我也沒法確保是否是如此。你能夠試試看更多→ 這裏。該按鈕是一種具備人造陰影和無響應特徵的奇葩。一個按鈕，裏面還有一個按鈕和一個街道標誌？這是用戶界面版本的開始嗎？

 

 

Amazon Pay

 

 

 

亞馬遜正在電子商務世界並不斷髮展。在全部在線銷售中，有43％的用戶正在籌集科學資金。Amazon Pay的外觀和感受正在不斷的改善，文檔已通過時了。奇怪的是，這些新的設計不是響應式的。好像看起來他們但願擁有VISA和masterpass這樣的大品牌同樣如此醜的按鈕。漸變的會火，對嗎？

 

 

最近的亞馬遜付款按鈕看起來像這樣（也是黃金和深灰色）

 

 

我仍可看到這些舊的亞馬遜支付按鈕

 

Android Pay

 

 

 

Google傾向於作正確的事情，AndroidPay也沒有什麼不一樣。他們製做了一整套符合材料設計理念的按鈕。固然，這些都是響應性的。您能夠點擊此處查看文檔。

 

Android Pay的按鈕，有白色背景和白色字體帶邊框

 

咱們是如何作成這樣的，即將出現的又是什麼？

 

這些糟糕的設計是由設計師製造的，他們被品牌要求給誤導了，而忽略了最終用戶的體驗。優先考慮的事項有不少矛盾之處，投資與糟糕的設計，限制了設計師試圖創建一個讓用戶滿意的付款體驗。

 

比特幣和其餘新的付款方式一直在上線。我不能預測哪些會吸引人，哪些不會。用戶將肯定他們想要什麼，而咱們會處理好。

 

如何去改善

 

在你進入一個黑暗的角落，爲這些按鈕在你美觀的設計中不起做用而哭泣前，深吸一口氣。您沒必要使用品牌方提供的內容。全部這些（甚至蘋果）都會提供給你一些靈活性，關於這些按鈕將如何出現。若是你須要一些容器，它們看起來同樣，試試看。

 

請記住，在上線以前，你須要獲得全部發行人的批准：他們將審查您的設計，但不要懼怕去嘗試標準之外的東西。相信你的直覺，並設計出適合用戶的做品。

 

請牢記，咱們花費大量的現金使這些東西富有成效。我不是建議你徹底忽略品牌：在優秀的設計中，權衡二者是一向的關鍵。

 

 

adidas（移動）•••正在進行中

 

兩個例子。首先是阿迪達斯，他們有自定義的PayPal和Apple Pay按鈕。這些不是發行人所要求的，但他們恭敬地修改了按鈕來匹配他們的用戶界面，這一切看起來都很棒。另外一個圖像是我正在開展的項目，咱們修改了PayPal和Visa Checkout以匹配Apple Pay按鈕的形狀。這樣作是爲了在這些「標記」之間建立一致性並儘可能減小混亂。此設計也獲得平臺發行人的批准（但還未成型），不過能夠作到。

 

評論中留下你的想法吧，或者說說是否還有一些支付按鈕我沒有提到的。

 

原文做者：John Freeborn

 

原文地址：https://uxplanet.org/the-sad-state-of-payment-buttons-4d5cef3b9578

 

 

Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。