UIの問題意識
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は、株式会社ajike代表の梅本と、
その仲間たちがデザインについて、雑談を交えながら話す番組です。
今日のお相手は、神田さんです。
神田さん、よろしくお願いします。
よろしくお願いします、神田です。
蒸し暑くなってきましたね。
もう、ここから早いでしょうね、夏まで。
嫌やなぁ。
長いですよね。始まってしまうと夏が長すぎて、冬の寒さを忘れちゃいますよね。
そうだよね。去年11月ぐらいまで暑くなかったっけ?
いや、なんか本当、長すぎて、もうヘロヘロになっちゃいますよね、本当に。
11月にTシャツを着た気がしますもんね。
そういうのも確かにあったような気がしますね。
そしてゴールデンウィーク明けということで、体調崩しがちですけども、
気をつけて皆さん行っていただければと思います。
はい。
さて、今日のテーマは何でしょうか?
今日のテーマはですね、観察・体験してやっとわかった良くないUI参戦というテーマです。
デザインっぽいテーマですね、今日。
そうですか。たまにはっていう感じですかね。
いつもデザインをテーマにはしてますけど、UIって直接言うと、なるほどって感じですね。
確かに。
なぜこのテーマをお持ちになったんですか?
そうですね。UI作るみたいなのは日々の業務でずっとやってますけども、
結構自分たちの中で常識になっているものとか、
これからはこういうUIがスタンダードでしょうみたいなとか、いろいろあると思うんですけども、
結構そこら辺、当然だと思ってたりとか、特に気にしていないことでも、
実は誰かにとっては使いづらいみたいなのもあるようなと思いまして、
っていうのもちょっと自分が生活の中で観察してたりとか、
自分で使ってみたりとかして気づいたものっていうのがあったんで、
今日はそれを紹介したいなと思いました。
セルフレジの実例
素晴らしい。
そのあったっていうものの位置を重に膨らまして話すわけじゃないよね。
そこら辺は甘い目で、ぜひぜひ緩い感じで聞いていただければと思います。
あ、そう。
ファクトじゃなくてあなたの意見ですよね、みたいな話。
いやいやいや、ファクトもありますし、自分の意見もありますけど。
ファクトもある。
失礼しました。そんな言ったら何も言えないですよね。
いやいやいや。
失礼しました。じゃあ、具体的な事例今日あるということなので、
一つ目教えてもらってもいいですか。
はい。一つ目はですね、
セルフレジのモーダルバーサスホームセンターのおじさんという対決構図があるんですけど。
一つ目はこちら。
バーサス構図。
バーサス。
聞きやすいわ。
どういうことですか。
これがですね、自分がたまたまホームセンターに買い物に行ってまして、
でもホームセンターも今セルフレジかなり増えていると思うんですけども、
何台もあるんで、自分がそのセルフレジで操作しつつ、
隣にいた、多分60は絶対オーバーしてると思うんですけども、
60台以上ぐらいのおじさんがですね、セルフレジで購入操作してたんですが、
その、じらっと見てみるとですね、画面にモーダルで何かのメッセージが出てたんです。
モーダルなので背景にクロッククロがかって、その上に何かメッセージが出ているんで、
そのモーダルを消して次に進むような、そういう操作の場面だったと思うんですけども、
でもそのおじさんはですね、オーバーレイに全然気づいてなくて、
後ろ側の画面にある次に進むボタンを一生懸命、右下とかにあるボタンを一生懸命ポンポンポンポンと
何度も押してるっていうのを自分が見まして、これはそのときにですね、
自分がハッと気づいたのが、モーダル出てるから、
まずはそのモーダルウィンドウの中のボタンを押したら、それが消えて次に進めるんですけども、
これ気づかないんだっていうのが単純に自分の中の常識というか、
偏見みたいなところでは、こういった別に普通のデザインだよなと思ってたんで、
なるほどなっていうふうに思いながら、その方を静かに見てたっていう感じでしたね。
観察者は観せずみたいな。
そうですね。声かければよかったかもしれないんですけども、今、店員さんいるじゃないですか、サポートの方。
その人は多分その後気づいて操作してあげてたと思うんで、
自分はちょっとどうすんのやろうなとじっと見てたらですね、
全然目線が動くことも多分なく、ずっとこれをポンポンポンポン押してたんで、
押せないボタンもですね、なるほどって思いながら見てましたね。
ファクトやね。
ファクトですね、これは。
なるほど。モーダルはやっぱり、我々の世界からすると、
バーンと出たらその画面に注目しちゃうもんね。
そうですよね。
背景が暗くなってるみたいなのも、
いろんなサービスで普通に使われてるような表現なので、
当然、スタンダードな表現としてこれは使われまくってると思うんですけども、
それでもやっぱりちょっとなかなかできない人っていうのもいるんだなっていうのを
ちゃんと知れたなと思いました。
ローソンのセルフレジ体験
なるほど。
例えば神田さんやったら、これどういうふうにしたらいいって思いましたか。
そうですね。まず原因の一つは、
モーダルで出た背景のオーバーレインのですね、
暗くかかっているものの濃度が低かったっていうのが
この原因なんだろうなというふうに思ってます。
なので、ちょっとそれをもっと濃くする、もっと暗くするっていうふうにすると、
もうちょっと気づいてくれる可能性も高くなったのかなと思ってます。
なるほどね。
気づいたこととしては、モーダルって誰でも使える便利な
UIコンポーネントだと思ってると思うんですけども、
それだけで何も気にせず作っちゃうんじゃなくて、
結構、オーバーレインの濃度とかも気を使ってやったほうがいいですよ
っていうところがあるんじゃないかなと思ってます。
なるほどね。
なるほど。めっちゃ難しいけどね、これ気づくのは。
そうですね。そうなんですよ。
だから自分もそういう人は、
ていうか他の方がどう操作してるのって、
ユーザーテストとかはやりますけれども、
生活の中でジロジロにいるみたいなのはないじゃないですか。
そういう人は、
自分もそういう人は、
なるほど。
たぶん、ユーザーテストをしたときに、
それに該当する、もしくはそのテストケースが
やっぱり引っかからないっていうのは全然あり得るからね。
なるほどね。
なるほどね。
なるほどね。
なるほどね。
なるほどね。
なるほどね。
なるほどね。
なるほどね。
引っかからないっていうのは全然あり得るからね。
そうなんですよ。
たぶんこの作った人もテストとかはされてるんじゃないかなとも思いますんで、
でもその被験者の方も、
にとっては普通のUIで、
全然引っかからずに、
普通に操作できるっていうのも可能性としては高いなと思いますんで、
なかなか気づくの難しいですよね。
おっしゃる通り難しいですね。
でも面白いですね。
気づかれたのは。
なるほど。
他に事例はありますか?
2つ目はですね、
ローソンのセルフレジVS出勤中の中年男性ということで。
またVSやったと思ってちょっと頭入ってこなかったですね。
ローソンのセルフレジVS出勤中の中年男性。
なるほど。わかりました。
どういうことですか?
ローソンのセルフレジって、
どんなイメージつきますか?
オメモさんはわかりますかね?
いや、私はセブンとファミマのセルフレジはわかりますけど、
ローソンどれだったっけな。
ちょっとわからないですね。
これがローソンっていう形ではわかってないです。
あ、そうですか。
ファミリーマートとかセブンとローソンのセルフレジの大きな違いはですね、
ディスプレイが縦長なんですよ。
縦置きというか、
普通は横位置っていうか横長の画面がスタンダードだと思うんですけども、
ローソンって縦長なんですよ。
ギークやね。
そうなんですよ。
コンビニ大手産車みたいなところでいうとそれ結構な違いですね。
ネタバレになるんですけど、
この出勤中の中年男性って自分のことなんですけども。
ああ、そういうこと。
自分はもうローソンよく行くんで、
セルフレジも結構使うんですよ。
なので、ちょっとこのセルフレジ自体の画面設計にも言いたいことはあるんですけれども、
ただそれはちょっと1回スルーして、
もう自分も学習してきて、
もう結構週に何回かぐらいはローソンにも行きますんで、
セルフレジの操作の仕方とかもですね、
やっとこそは学習しまして、
自分はポンポン決済まで行くわけなんですけども、
最近気づいたことがありまして、
さっきも言った通りローソンのセルフレジは画面が縦長なんで、
情報が縦長の画面に上下に配置されていて、
タイトルがあって、コンテンツエリアがあって、下にボタンがあるみたいな、
なんかそんな配置なんですね。
これが多分ですね、他のコンビニのセルフレジとかと違って、
距離があるんで、
視線を縦に動かさないと全部読めないんですよ。
なるほど。
ちゃんとモニターのサイズを活用して、
コンテンツ量があるわけやね。
そうなんですよ。
多分縦長の画面といっても上下は余白があって、
ある程度収めてると思うんですけども、
それでもですね、自分はこれ自分がっていうことなんですけども、
タイトルとコンテンツとボタン、
この上下運動の視線の動き、
これが意外と面倒くさいんですよね。
なるほど。
タイトル読まないんですよ。
下のボタンとかを押してパッパパッパ行きたいじゃないですか。
行きたい。
なんで、
操作を早くしたいっていうことで行っても、
あれ、これ何の画面だっけみたいなんで、
間違うことがたまにあるんですね。
で、やっとその視線を上に持っていって、
これはなんかカードを持っていいなと思って、
これはなんかカードを持っていないっていうのを
押さないといけないんだなみたいなんで、
操作して次行くみたいなのがあるんですけども、
瞬間的にはですね、もう視線動かしてないんで、
わかるわかる。
目に入ってないんですよ。
なるほどね。
これ結構誰も気づいてないんじゃないかなと思いますね、デザイナーさん。
なるほど。
縦長のモニターっていうのは、
確かに他と違って知見たまりづらいよね。
確かに、そうですね、あんまりないですもんね。
普通はこう、
横長のモニター、4対3なのか16対9なのかわからないですけど、
モニターでも本文書いたときって、
その本文のボディの部分かな、HTMLでいうと、
そこが横に長すぎたら読みづらいから、
だいたいこの幅みたいなのがあるじゃないですか。
ありますね、何文字いないとか。
何文字いないとか。
それと、縦長にした場合はこの縦の高さこれぐらいみたいなのが、
ちょっと似たような例として、
蓄積しなきゃいけないかなと思いましたね。
いや、確かに、そうですね。
視線の動きとUIの気づき
いやー、なんで、自分も特に何も考えずに使えてたんですけど、
ちょっとだけ立ち止まって考えてみると、
これなんか視線って意外と目の動きってあんまり動かしてないんだなっていうのはすごく気づきがあったというか。
距離も近いじゃないですか、操作するんで。
そうだね。
なんでその分目を動かす幅も大きいと思うんですよ。
それって意外とあんまりやってくれないんじゃないかなみたいな、そんなところですね。
おお、息づき。さすが中年男性やね。
そうなんですよ。そうなんですよね。
わかりました。もう事例ないかな。以上。
そうですね。あと1個だけあります。
あと1個。聞こう。教えてください。
3つ目はですね、新しい車VS家族旅行中の父親ですね。
はいはい。どういうことですか。
これはですね、先にネタバラシすると、これも自分の話なんだけども。
それあなたの意見ですよね。が2回続いてる。
ご容赦ください。
家族旅行中の父親が神田さん。
そうですね。
最近レンタカー借りまして、旅行中にレンタカーで運転してたんですけども。
普段乗ってる車は、車載機のデジタル要素ってカーナビぐらいなんですけども。
レンタカー借りたやつはですね、空調とかもディスプレイでやるみたいな。
なんかそんなのがありました。
それって自分全然使ったことなかったんですけども。
それを使っているとですね、やっぱり空調を切り替えるのにもタッチパネル、スクリーンタッチで操作しないといけないっていうので。
普段の自分の車と比べると、ちゃんと画面を見て操作しないと目的の操作ができないというか。
温度を下げるとかクーラーを強くするみたいなのができないっていうところに気づきまして。
これ結構面倒なんですけども。
梅坊さんとかわかりますか?
わかる。
スクリーンタッチみたいなのされますか?
いや、しないですね。
私の車も物理的なボタン。
カーナビ部分で、他なんか情報みたいなのがあったらカーナビで表示されるみたいなぐらいですね。
物理ボタンが、もともと車とかって全部そうだったと思うんですけども。
だんだんデジタル化されていってスクリーンタッチみたいになって、それが普及してきてると思うんですけども。
結構良し悪しがあるなというところで。
スクリーンタッチってちゃんと見ないと本当にそれが操作できてるのかっていうのは分からないんで、目線外さないといけないっていうのがあるなと思ってます。
物理ボタンだったら、ボタンの形状とかボタンの場所とか、押したときにどんな感じになるかみたいなんで操作ができるじゃないですか。
運転中とかでも、あんまり目線を外さずに操作っていうのができると思うんですけども。
スクリーンタッチって結構目を奪われるっていうところが、自分にとっての気づきだったなと思ってます。
なるほど。以前何かのレポートだったんですけど、そういうデジタルにした車載の機械対アナログの操作で、事故率どっちの方が低いって言うとアナログやったみたいな結果を見ましたね。
それ似たような話かもしれないですね。
やっぱりインターフェース、テレコ操作してるとか、特によくあるのって、実際には実現してないと思いますけど、ハンドルのデジタルで操作するみたいなのをすると、めちゃくちゃ事故起きそうじゃないですか、考えると。
だから遠景の形で微妙な動きをしっかりタイヤとかに伝えていくみたいな感じ。
なるほど。
そういうレポートだったと思いますね。
すごいね。
自分も調べると、フォルクスワーゲンのニュースで出てたんですけども、重要なボタンをスクリーンタッチではなくて物理ボタンに戻すっていう、そういう方針が1年前か2年前に決定されたりしたんで。
結構1回そういう流れになったけれども、やっぱりもう1回戻すみたいなのも実際あるんだなっていう気がありました。
ありそうだよね。
船とかもボタンめちゃくちゃ多いからすごいなとか、飛行機とかもそうですけど、あれをデジタルにしたらめちゃくちゃ事故起きそうな。
ああ、なるほど。
雰囲気を感じるだけで実際は分からないです。自分がポンコツだからそういうの実現できないかもしれないですけど、想定できない。
そうですよね。でもこれもやっぱり、今そういうフォルクスワーゲンのニュースを見たりとか、自分が操作したりすると、やっぱりこれちょっと目奪われるからやっぱり物理ボタンの方がいいよなとかっていうのは分かりやすいんですけども、
ただやっぱりこの数年前の流れではデジタルになっていって、物理ボタンっていうのはどんどんなくしていって、車の中がどんどんスタイリッシュにシンプルにっていう風になってたと思うんですけども、
その時にはちょっとなかなか気づかず、世に出ていろんな人が使ってからやっとそういう流れに戻ってきたっていうのもなんか面白いというか、やっぱりそういう風にみんなに使ってもらって初めて分かって決定できるみたいなのもあるんやなと思います。
ユーザー体験の重要性
うーん、そうね。実際にここまで開発したらもうリリースしないという状況もあるだろうし。
そこから次のバージョンというか、次の車でまた改善しましょうってなるのか、モデルかな。次のモデルで改善しましょうってなるのかもしれないですね、これは。
そうですね。自分も普段の車と全然違う操作性というかUIだったんで、それで比較して考えて初めて分かったみたいなところですね。
もちろんユーザーテストでね、すべて課題とかを発見してある程度潰せてからリリースするのがいいんでしょうけど、そこもやっぱり乗り越えるやつもあるでしょうからね、これはね。
いやそうなんですよ。しかも結構重要なポイントっていうのもありますよね。
うーん、ある。モーダルのやつは絶対気づかへんと思うな、テストでは。
いやーそうですね。分からないですよね。やっぱ5人の方にとか10人の方に使ってもらってテストするみたいなのやっても、なかなかそういうの発見できないっていうのもありそうですからね。
そうはね。セルフレージとかはもしかしたら気づくことがあるかもしれないけど。
いやそうなんですよ。
分かりました。今日のまとめとしては観察体験してやっとわかった良くないUI参戦。
はい。
セルフレージvsホームセンターのおじさん。
はい。
ローソンのセルフレージ対中年男性。
はい。
新しい車対家族旅行中の父親。
改めて読まれるとちょっと恥ずかしいです。
そう思って読ましてもらいました。
それが狙いやったんですか。
それが狙いで読ませていただきました。
今日も聞いていただきましてありがとうございました。
はい、ありがとうございました。
編集後期、お疲れ様でした。
お疲れ様でした。
こういう世に出てから気づくUIとかデザインって面白いよね。
そうですね。
なんで、意外とセルフレージとかATMは難しいですね。
顕売機とかですかね。他の人が操作しているのを観察できるみたいなんで言うと。
そうやな。確かに顕売機ですよ。
ハードと連動しているから、お金を入れて戻すまでとか、カードを入れてカードを返すとかお釣りを返すみたいな、
いろいろ順番とか、フィードバックを与える順番で体験が変わることって結構あるじゃないですか。
そうですね。
そこの設計って本当、テストよりも前に自分で何回も何回もやらないと気づかなさそうだね。
そうですね。自分がやっぱり被験者となって普段使いながら何回も何回もやって気づくことみたいなのも絶対いっぱいあるでしょうし、
それでも漏れているものとかもいろいろあるでしょうし。
あるな。
気づけないものを気づくっていうのはめっちゃむずいよね。てかできないよね。
そうですね。いや難しい。でも面白いなと思います。
うん。気づきを得やすくなるために、何も思いつかない。
これでおしまいですか。
おしまいです。
ありがとうございました。
いろいろ気づける人間になりたいと思います。ありがとうございました。
ありがとうございました。
