1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="LZmnalTIFH"><a href="https://uxdaystokyo.com/articles/uniqlo-ec-trust-ui/">ユニクロのECサイトの信頼を上げる方法</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/uniqlo-ec-trust-ui/embed/#?secret=LZmnalTIFH" width="600" height="338" title="“ユニクロのECサイトの信頼を上げる方法” — UX TIMES" data-secret="LZmnalTIFH" 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/2022/02/ユニクロtest02-3.png20581298世界的企業になったユニクロさんは、数年前からオンライン販売にも力を入れている企業です。コロナの影響でオンライン販売も一般化しているので、数年前から取り組んでいた企業として日本では一歩進んでいますね。 私も下着をはじめ、いろいろと購入させていただいるブランドです。私がユニクロのECサイトで商品を購入しようとしたけど「面倒だな〜ぁ。」「一瞬迷ったよ。」と感じた箇所を、おせっかいではありますが「こうしたらいいんじゃないか？」というアイディアも含めて共有したいと思います。 ユニクロさんを取り上げていますが、他のサイト制作にもヒントになるはずです。なにより、より使いやすいサイトになればと期待を込めて投稿します。 適時適材適所で情報を提供する 今回は、購入しにくいと感じたUIを2つ紹介します。1つは、”適切なタイミングで、適切な位置に質問や情報を提供していない！”です。もう1つは、”ユーザーが情報の存在に気づきにくいフォルスフロア”です。 1つずつ見ていきましょう。私は、ヨガで使うレギンスを購入しようとしました。欲しいものがわかっているので、ダイレクトに「レギンス」と検索します。表示された件数が159件だったので、絞り込みをしました。 そうしたら、性別という文字が目に飛び込んで来ました。私は、「へ？、なんでレギンス商品から性別の絞り込み？」と瞬間的に理解することができませんでした。それからよく見ると、タブの種類でいろいろと絞り込みができる仕様になっていることに気が付きました。 検索結果は女性モノが先に出ていたので、すでに女性モノだけの表示と思い込んでいたのですが、よく考えれば、レギンスも子供や男性モノもあり、全て表示されていたんですね。思い込んでいた私は、性別を聞かれるとは考えていなかったので、スムーズに理解することができませんでした。 左：現状（性別のコントラスが高いため、そちらが一番先に目が行く）　　右：改善案（コンテンツ内でユーザーに状況を伝える） 左の現状のUIでは、上部にある「スタイル」「サイズ」などの絞り込み項目のタブがコンテンツの文字色よりコントラストが低いので、コンテンツである「性別」の文字が先に目に入ります。コンテンツを見せるのは悪いわけではないですが、性別が「スタイル」タブの中のコンテンツという概念がない状態で、唐突に「性別？」となりました。特に選択するプルダウンのUIなので、より状況が見えません。 解決策は”ユーザーに状態を見せる”です。右のUIのように「性別・キッズ」と性別だけでなく、選択できる項目を一目できれば、検索結果ページは、この項目の全部が出ているとスムーズに理解することができます。 また、検索ワード「レギンス」で出た結果であることをより明示的にするために”「レギンス」を以下の条件で絞り込むことができます。”と表示しています。 検索結果数も適所に置くと良いUIになる （左側の）現状デザインでは、一番上に検索結果の件数が「159件」と表示されていますが、先に述べたように「性別」が先に目に入るので、見逃してしまいがちで適所ではありません。 先ほどのテキストに追加して、”検索結果159件の「レギンス」を以下の条件で絞り込むことができます。”のようにしても良いかと思いますが、ユーザーの検索を絞り込みという行動に合わせてボタンに追加するとスマートです。 スマホは面積が限られていることも含め、重複する情報はカットすべきで、ボタン近くに実装するのがベストと言えます。ユーザーが絞り込みを進めて行くにあたり、絞り込み件数が少なくなっていることも、自然と目に入るようになります。 システムが動いていないこと・わかりにくいことが常態化したメンタルモデル 国内だけではないですが、システムは快適に動いていない、わかりにくことが常態化すると良くないメンタルモデルが形成されます。 例えば、ヤマダ電機さんのサイトでは「マスク」と検索すると、映画「マスク」のDVDが一番はじめに表示します。エラーではないですが、コロナや花粉の時期にDVDに興味がある人は少ないはずです。 これらが常態化しているので、ユーザーはシステムに対して不安を持っています。その不安を解消するためにも、システムはちゃんと理解して動いますよ。ということをユーザーに伝えるUIにしましょう。 春先のコロナ時期の「マスク」検索で、DVDのマスクが先にヒットしてしまう 店舗の在庫確認の情報がファーストビューで表示されない（フォルスフロア） 在庫を確認するための導線・右は最寄り店舗の結果ページだが検索ボタンの下でスクロールしないと見えない駄目なUIになっている 商品詳細ページから「店舗の在庫を確認する」という便利な機能がユニクロサイトでは備わっています。 そのページに行くと「お近くの店舗を表示」のリンクで、最寄り店舗から在庫の有無を表示してくれます。GPSを利用して、どこにユニクロの店舗があるかわからない場合でも、紹介してくれるのでとっても便利です。 しかし、結果の情報が検索ボタンの下に表示されています。前のページとファーストビューが同じで、スクロールしないと結果が表示されないので、ユーザーは検索結果があっても気づきにくいです。この例は、フォルスフロア（嘘の床）と言って、駄目なUIの例として一般的です。 この場合の対策は、「結果だけの表示するページにする」「検索ボタンを無くす。」かです。 認知資源を減らさないようにしよう ちなみに、検索ボタン下の注意書き「在庫の状況で〜・お電話での〜」は検索結果ページに表示すれば良いので、検索前のページから表示する必要はありません。このあたりも、ページの面積をとっているので、よりフォルスフロアに陥りやすいですし、ユーザーの認知資源を消費してしまいます。 多くを記載しても、ユーザーが見ていなければ意味がないですし、文字が多いと無視する分かりづらいメンタルモデルが形成されてしまい、結果的にECサイトの信頼が損なわれます。多くの情報が入ることで、ユーザーは疲れて離脱を招いてしまいます。これらが重なって、結果的にブランド価値をも下げてしまいます。 ヒューリスティック調査の実施 他にも「こうすればいいのにな。」と思う点がいくつかありました。 ただ、どの問題も「実際の買い物ではどうするのか？」「デジタルにすることで、リアルより便利になるところはなにか？」と、いくつかのユーザー視点で発想することで解決できることがほとんどでした。 今回のユーザー思考としては、「選択する際に考える順序でUIを設計にする」「ユーザーに（コチラ側の）状況を伝えるUIにする」でした。 ECサイトで、購入できれば良いわけではく、顧客の思考や行動・要望をじっくり見聞きして、ユーザーの信頼を得るUIを構築していきましょう。