1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="F0fGzx1CyM"><a href="https://uxdaystokyo.com/articles/financialsitecontext/">金融系サイトのコンテキストを考慮したデザインを知る</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/financialsitecontext/embed/#?secret=F0fGzx1CyM" width="600" height="338" title="“金融系サイトのコンテキストを考慮したデザインを知る” — UX TIMES" data-secret="F0fGzx1CyM" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2023/02/context.jpg1000667UX設計をする時には、コンテキストを考慮してデザインしてください。と私たちは伝えています。今回は、金融系サイトで ”コンテキストを考慮していないな。”と感じた場面を経験したのでご紹介いたします。 他銀行からSBI証券へすぐに入金できる 私はSBI証券の口座を持っています。SBI証券には他の銀行から数秒で入金できる仕組みがあります。とても便利なのでよく使うのですが、先日入金しようとしたところ、失敗してしまいました。 エラーの理由は、なんと！ まず、楽天銀行から送金しました。しかし、IP制限を楽天銀行側に設定してあったのでエラーになってしまったようです。　 IP制限を解除する設定変更が面倒だったので、違う銀行から送金を試みました。すると、楽天銀行から送金する時と同じ画面が表示され、振込限度額に2,000万円と記載があったので、2,000万円まで振り込めるという認識をしていました。 実際にはイオン銀行で行ったのですが、送金に失敗してしまい、以下のアラート文章が表示されました。 的確なエラーメッセージでない表現 エラーメッセージ振込が正しく行えませんでした。銀行口座の残高をご確認ください。SBI証券の入金エラーメッセージ 私は素直に、エラーメッセージに記載している「銀行口座の残高をご確認ください」という文章から残高不足を疑いました。 「え？お金なくなっているの？」と焦ってしまいました。 銀行のアカウントが凍結された(T_T) 銀行のサイトにログインし、残高があることを確認した私は、同じように送金する操作を何度もしてしまいました。なぜ同じことをしたのか？というと、人なので、ミスがあったのかな？と思ったからです。 でも、やっぱり同じことをしていたので、同じようにエラーを発生させてしまいました。その結果、通常のログインでログインできなくなり、コールセンターに連絡しなくてはならなくなりました。 みなさんもご経験あると思いますが、コールセンターでの対話は15分くらいは時間が取られるので、私の気持ちは「はぁ〜！？」と思いました。 その後、もしや？残高って振込限度額？と思い、コールセンターの方に聞いてみたら、「そうだと思います。」と言われ、金額を振込限度額以内にしたら無事に秒で送金が完了しました。 ここまでに私は、2時間ほどの時間を使ってしまいました。本当に「なんて、日だ！」と思う体験をしてしまいました。 まとめ 不要な情報は入れない ユーザーにとって不要な情報はいれない。入ってしまう場合は、どの情報かを的確に表現しましょう。 今回でいうと、「振込限度額」の表記です。振込限度額は2,000万円（銀行に設定している限度額にも依存します。）と明記するべきです。 エラーメッセージは的確に ユーザーに適切な行動をとってもらうには、適切なメッセージを出すべきです。何がどうなっているかわからなければ、自分のミスだと思い、同じことを繰り返します。 最終エラーはキチンと通知する クレジットカードの暗証番号と同じように、何度かエラーが続いたらアカウント凍結するのであれば、エラーを通知する前にユーザーに通知するべきです。 UX設計は諦めない 他社サービスとのシステムの連携は難しいのかもしれません。しかし、ユーザー視点で、伝えるべきものは正しく出しましょう。仮に、できない、用意がない、対応していない、という場合でも、それらの情報を伝える必要があります。ユーザーは情報がわかるだけでも理解を進めることができます。なんだかわからないことが一番のストレスだと覚えておいてください。 エラーメッセージが特定出来ない場合でも、可能性のあるエラーを具体的に全て全て出す必要があります。ただし、エラーも何百もでたら意味がないので、できるだけ吟味しなければなりませんし、7つ以下にはしたいものです。