1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="mkKyfmyQBI"><a href="https://uxdaystokyo.com/articles/uicleareasyunderstand/">UIは明確で明示的にわかりやすく</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/uicleareasyunderstand/embed/#?secret=mkKyfmyQBI" width="600" height="338" title="“UIは明確で明示的にわかりやすく” — UX TIMES" data-secret="mkKyfmyQBI" 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/2020/05/notthink0519.png300300人間の脳は普段無意識でいることが多く、直感でいろいろと判断しています。そして、人によって捉え方が異なる事が多くあります。小学生のテスト問題を例に捉え方が異なる事、捉え方のバラツキがでないように明確にする方法をご紹介します。 捉え方は人によって異なる 人の思考は様々です。同じテスト問題も捉え方が違うと回答も異なります。 以下は、小学生のテスト問題で「これは正解ではないか？」とSNSで話題になった画像です。問いが不明瞭であることから、子供が自由に発想し回答した結果が模範解答とは異なるのでバツにされてしまった例です。 小学生のテスト問題の回答：人によって解釈が異なるのでどれも正解で良さそう 画像の左上の問題は、インドのカレーとよく合う食品は「ナン」なので、「なんですか？」の解答に「はい、そうです。」回答して、合っています（笑）。 漢字のテストであれば、熟語の“読みがな”を入れる必要があります。例えば、「登山」が正解であれば「とざん」と、ふりがなを入れるべきです。穴埋め部分だけの読み「と」が表示されても、次にの山の読みが「やま」なのか「ざん」なのか不明です。 画像左下の「しんがた」も同じで、「新□の車」だけでは「しん」なのか「にい」と読むのか、はたまた違う読みなのか？不明瞭なので、「新潟」と入れてもおかしくはありません。「新」に「しん」とふりがなを設ける必要があります。 右上の問題は、「せんとう」と熟語のふりがながありますが、父と「せんとう」に行く。だけでは不明瞭です。正解が、「銭湯」であれば、戦闘が近所で行っている状況は考えにくいので、「父と”近所の”せんとうに行く。」という状況を表現することで明示的になります。（近くで戦闘にならないことを祈りますが。）右下のイラストの問題も、白黒であればピーマンではなくパプリカでも良いと思いますね。 これらの画像は、「子供ならではの自由な発想で良い」とTwitterで拡散されていますが、実は、大人になってもこのような状況は発生します。同じ文章やデザインを見ても、人それぞれ解釈は異ってくるため、誤解のないようにできるだけ明示的にする必要があります。 できるだけ明示的に表現する 例えば、スマホアプリなど、掲載スペースが少ない場合、文字ではなくアイコンを利用してしまうことがあります。アイコンの利用は、便利なようで感じ方が人によって異なるため、注意が必要になります。 コールセンターの混雑アイコン イオンカードのコールセンターの混雑予想が、ウェブ上で表示されていました。電話をして待っているのはユーザーとして嫌な体験となるので、混雑日時がわかると便利です。 しかし、このアイコンが顔だったため、一瞬迷ってしまいました。シンプルにテキストで「○」か「✕」かを表現するのがベストだと思いますが、✕であると繋がらないイメージがあるので、「△」での表現してみました。 コールセンター混雑予想カレンダーのリデザインをしてみた 現状のデザインは、顔がわかりやすいと考えて実装された可能性がありますが、私は、実際に日時をみて、「このアイコンの意味ってなんだっけ？」と表の上部に表示されている文字を追ってしまいました。 シンプルに○と△にしたものは、○や△の表記だけで意味が通じるので直感的です。且つ、画像でなくテキストで表示できるため、表示速度のパフォーマンスも上がる利点があります。 現状のデザイン：顔アイコン 提案のデザイン：○・△だけで意味がわかる アイコンは必要以外に利用しない スマホなど表示領域が限られているなかでは、アイコンを利用したくなります。特に、比較検討のような場合は両方を見せる必要があるので、スペースの問題が悩ましくなります。しかし、できるだけアイコンは利用しないことをおすすめします。 定期開催している講座「HCIを学ぶ！IoTにも役立つ！使いやすいリモコンをつくってみよう」では、グローバル化が進むなかで、言葉ではなくアイコンだけで通じるものを利用するように解説していますが、これも時と場合によって利用が異なります。 全てのデザイン設計において「銀の弾丸」がないように、ケースバイケースで状況が変わるため、コンテキストとユーザーの状態を知りデザインする方法を見に付けていきましょう。