Stripe: 支払フローのアニメーションの工夫

https://medium.com/p/3d1b0a9b810e

1 comment | 1 point | by WazanovaNews 約3年前 edited


Jshiike 約3年前 edited | ▲upvoteする | link

StripeのUI DeveloperのMichael Villarが、同社のサービスの生命線である支払フローにおけるデザイン上の工夫を紹介しています。支払フローはユーザの離脱の可能性が高い箇所なので、ストレスを減らす工夫は効果が期待できそうですね。

1) アニメーションで文脈を補完する

gif version | MP4 version

支払のために入力した個人情報を再利用したいときのために「Remeber Me」のチェックボックスが用意されてます。それをチェックするとはじめて、Helpページへのアイコン、「安全のために携帯番号を入力ください。」という入力ボックスがアニメーションで表示されます。このタイミングで表示することにより、何のために携帯番号の入力をお願いしているのかが、ユーザにわかりやすくなります。

2) 画像をシェークさせてエラー表示する

gif version  |  MP4 version

エラーに気づいてもらうために赤字でメッセージを表示する際、サイズが大きいとデザイン上いまひとつだし、小さいと入力情報が多いときに気づかないということがあると思います。この事例の場合は、「支払」ボタンを押したタイミングで画面がシェイクします。ボタンを押した後にメッセージを表示されるよりも、速報性もあってよいかと。

3) 進捗をタイムリーに表示する

gif version  |  MP4 version

この事例では、要求されている認証コードを入力すると、その下部にまず「Sending code..」のスピン表示。次に「Sent」で完了、更にその後で「xxxxの携帯電話にテキストメッセージを送りました。」というかたちで、進捗が順次表示されます。

4) ボタン表示の工夫

gif version  |  MP4 version

ページの最下部の帯状の部分がボタンになっており、上部のページの内容に従って異なるアクションのボタンが表示されます。「支払」ボタンを押下した後に、一瞬だけスピナーが表示され、すぐに「完了」のチェックマークに変わる効果は、簡単にすばやく支払プロセスが完了するイメージを与えます。


Jan-Mar/2014: ワザノバTop25アクセスランキング


#stripe #デザイン

Back