デザイン

デザイン

支払いボタンのUIデザイン【クレジットカードにApple Pay、種類別に見てその現状を知ると…】

1,857 views

読了時間 : 約2分46秒

 

UIデザインにおいて、支払いボタンのその現状はひどいものです。今回は1つずつ見ていきましょう…。

 

 

クレジットカード

sad①

昔からのスタンダードですね。 すべてのクレジットカードには「アクセプタンスマーク」があります。 これらはあなたが実際の物理的世界でお店のドアのステッカーで見るものです。 これらの小さな宝石は、電子商取引のための小さなボタンに変わりました。古いクレジットカード会社がこの新しい世界に反応するのが遅かったため、これらのマークに関する規則をデジタル用に絶対に義務付けることはありませんでした。 ウェブの周りにすべての種類が表示されますし、しばしばスタイルにはバージョンがあります。Amazon、Zappos、楽天、Simplify Commerce、アップルなど例がいくつかあります。 それぞれに基本形はありますが、スタイル、形、サイズが異なっています。 設計チームは、これらをサイトのニーズに合わせてカスタマイズしました。

sad②

 

 

PayPal

sad③

Paypalは、 最初はデジタル決済オプションが広く用いられていましたが、古くて遅いものでした。PayPalのボタンは幾分混乱しています。周りには何もありません。 この時点で、公式のPayPalボタンには3つの異なるセットがあります。

 

古い基準(公式)

sad④

新基準(公式だと推定)

sad⑤

新しいレスポンシブなオプション

sad⑥

 

良いニュースは、PayPalがこの最後のオプションで最終的にレスポンシブルでないボタンを更新しているように見えるということです。 問題は、この最近のバージョンには多くの制限があり、そのうちの最大のものはボタンの下のタグラインです。 それはあなたが(簡単に)オフにできるものではありません。 もしこれが大きなIFであれば、PayPalはこの最近の応答性の高いボタンツールを改良し、デザイナーにより柔軟性を与え、将来これを使うことができるかもしれません。

 

 

 

VISA Checkout

sad⑦

VISAは巨額のお金をデジタル製品のマーケティングに費やしてきました。その経験はひどいわけではありませんが、実際にPayPalより優れているわけではありません。 VISA Checkoutの大きな問題は、UIボタンが、支払いの流れをしたことのない人によって明確に設計されていることです。 ブランディングと可視性は最も重要な要素です。 このダブルボタンの形状は、ページ上の他の要素と簡単に揃えられず、巨大です。 他のボタンと垂直に積み重ねると、奇妙な垂直間隔になります。 これを連続して使うということを忘れましょう。

sad⑧

アクセプタンスマークは、実際にはかなりまともで、多くの選択肢があります。 これらは少なくとも実行可能です。

sad⑨

推測では、VISAはその大事なボタンに取り組むために大きな代理店に多くのお金を払ったのではないでしょうか。 つまり、新しいチーフデザインオフィサーが来て、新しいビジョンによって経営陣の考えを変えるまでです。

 

 

 

アップルペイ

sad⑩

通常のAppleのプレイブックを実行しているAppleは、デジタル決済の当事者にとって初めてではありませんでした。 しかし、もう一度彼らはスライドインし、他のプレイヤーが見逃しているすべてのメモを打つ素晴らしい仕事をしています。 Apple Payボタンは完全に反応し、3つのシンプルなスタイルがあります。 受け入れマークはきれいで小さいものとなっています。

Appleには2つの大きな利点があります。 まず、iPhoneの普及率は非常に高く、経済的にも魅力的です。 第二に、Apple PayのUXは素晴らしいです。 Apple Payをクリックすると、支払いシートがポップアップし、指紋で確認します。 完了。 サイトを離れたり、気を散らせるものもなく、お金を払ったり移動したりすることはありません。

sad⑪

 

 

 

 

Amazon Pay

sad⑫

Amazonは電子商取引の世界を絶えず進化し続けています。全オンライン販売の43%で、彼らは資金を集めるプロセスを持っています。 Amazon Payのルック・アンド・フィールは進化しており、ドキュメントはすでに古くなっています。 奇妙なのは、これらの新しいものが反応しないということです。 VISAとマスターパスに大きなブランドを持つボタンがほしいと思っていたようです。 グラデーションはホットですよね?

最近のアマゾンペイのボタンはこのようになっています。

sad⑬

同様に旧来のアマゾンペイのボタンも未だ目にします。

 sad⑭

 

 

 

※本記事は、The Sad State of Payment Buttonsを翻訳・再構成したものです。

 

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ