1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="jkdNeWrUag"><a href="https://uxdaystokyo.com/articles/suica-card-ux-kaizen/">SuicaカードのWebシステム改善</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/suica-card-ux-kaizen/embed/#?secret=jkdNeWrUag" width="600" height="338" title="“SuicaカードのWebシステム改善” — UX TIMES" data-secret="jkdNeWrUag" 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/2016/05/スクリーンショット-2016-05-08-16.38.14.png994793わたしはSuica Viewカードを保有していて、オンラインで利用明細を見ています。 年々、色やレイアウトは改善されているのですが、システム上のUX設計がされていないので、何年たってもUXが一向に向上せずイライラしながら利用しています。 見た目だけの改善しかされず、根本が改善できていないオンラインシステムは意外と多く存在しているので、関係者がこの記事を見て、改善してくれればうれしいな。という気持ちでご紹介します。 操作を考えたUIでない View カードでは、家電量販店などのお店のポイントカードとクレジットカードが一緒になっているカードがあります。わたしは、アトレビューカードとビックカメラカードの 2つのカードを所有しています。カードは２つ存在しますが、同じクレジットカード会社なので１つの請求になります。 利用明細を見る場合は、まず（１）カード選択｛アトレかビックカメラかを選択｝します。次に、（２）明細が見たい月を選択します。 一見問題がないUIに見えますが、なんと！月ごとの詳細ページに一度遷移すると「ご利用明細」のカテゴリトップページに戻ることができません。 「カードと月選択を選択してその結果を出す」ことからリンクができない。と推測できますが、せっかくグローバルメニューに入っている項目にも関わらずリンクを失くす羽目になっています。 UXを取り入れたUIでない この問題解決は簡単で、ユーザーが最も見たい明細をデフォルトのページに表示させれば解消されます。この場合は、請求金額が決定している最新の月になるでしょう。 条件を入力して結果を出すシステムの場合に、デフォルトのページが設定されていないことが良くあるのですが、ユーザーが最も求めている内容を提示すればまずは問題はありません。 システム中心で作っているための問題点 詳細は省きますが、私が見る限り今のシステムでは他にも以下の問題も発生しています。 カテゴリトップページで、はじめに選択するカード選択をしただけでは何の反応もない １つの明細に行くのに２つ以上のクリックをしなくてはならない 明細部分の下部分と数字しか変化がないのでページが遷移しているのか認識しにくい 基本ができていないUIの問題 他にも基本的なことができていないところがあります。 それは、銀行サイトなどでよくあるのですが、ユーザーに伝えたいことをヒエラルキーを考慮せずに闇雲に赤文字で記載している問題で、このシステムにも存在しています。 基本的に赤色は禁止や注意書きを表す色なのですが、このシステムではカードの明細がないという情報を赤色で表示しています。 文字サイズも大きく、禁止を示すアイコンも付いています。 ユーザーからすると明細がないのはカードを利用していないだけなのに、なぜ禁止的な書き方をされているのかわかりません。 これが悪いとは思わないと考えてしまう方もいるかも知れませんが、情報のヒエラルキーが高い禁止や注意書きの情報をいざ出す時に伝えづらくなります。オオカミ少年現象を招きかねません。 提案デザイン ざっとデザイン設計しただけなのでもっと厳密に行う必要がありますが、もし仮に提案するのであればというモックを作ってみました。 まず、先ほど説明したように、「ご利用明細（照会）」で最新月の利用金額を表示させました。デフォルトが表示されることでリンクがなくなることが解消されます。次に、明細が見たいカードを選択し明細ページに遷移できる構成にしました。 カードを選択した段階で「明細を見る」ボタンがアクティブになり、それまではグレーアウトで選択できないのでユーザーは何かを選択する必要があることを理解します。 （全部のカードの明細を見たい場合は、全てを選択する必要があり少し面倒なので工夫が必要です。） 提案のまとめ 「ご利用明細（照会）」のカテゴリトップに最新月を表示 カードごとにいくら利用しているのか一見してわかるようになった 選択したカードのみ明細が見える動線設計をした 提案のようにデザインすることで、現状抱えているいくつかの問題がなくなりストレスが一気に減るでしょう。 しかし、例えば、１月と２月の月をまたいだカードごとの明細が見たいなど、違う条件（ニーズ）には満たしきれていません。 このように、UIはUXの設計次第でいくようにも異なってきます。本当のユーザーのユースケースを見出して、見た目だけのUIでない、UXを取り入れたシステム設計をぜひとも取り入れていきましょう。