赤ちゃん先生から学ぶ。分かりやすいUIデザインとは？

こんにちは、たけうち（@garakutamju）と申します。
もうすぐ2歳になる息子のいるデザイナーです。

さいきんの息子のブームは米津玄師さん作詞作曲の『パプリカ』のダンス
。https://www.youtube.com/watch?v=T0valuAksuo

『パプリカ』のMVを見せろ！と、しょっちゅうスマホを奪い取られます。
じょうずにスクロールやスワイプをしてお目当ての動画を探す息子を見ていて、得意な操作や苦手な操作があることに気が付きました。
このnoteではその気付きをまとめます。

本題の前に…赤ちゃんが「モノ」の「操作」と出会うまで。

子どもがいないと、赤ちゃんが何歳くらいでどんなことが出来るのかイメージしにくいと思うので、赤ちゃんがモノを操作出来るようになるまでの流れを紹介します。

※月齢はあくまでもウチの息子の場合なので、参考程度にご覧ください。

------------

【0ヶ月】誕生。音などに反応はする。まだ自分に手が付いていることも知らない。

【2ヶ月】自分に手が付いていることに気が付き「ハンドリガード」と呼ばれる、手を崇めるようなポーズをとる。

【3〜4ヶ月】モノをつかめるようになる。つかんだものはとりあえず口に入れる。

【6ヶ月頃】オモチャの「反応」と出会う。ペットボトルにお水とキラキラを入れたオモチャをひっくり返してキラキラが舞うようすをジッと見たりする。

【10ヶ月頃】ハイハイやお座りをマスターしたことで行動範囲も広がり、オモチャで「遊ぶ」感じになる。音が出るオモチャなどで徐々に「操作」することを覚える。

----------

ざっくりですがこんな感じ。

👶< ひっくり返したらキラキラしてるよ！
👶 < ボタンを押したら音が鳴ったよ！

…といった感じで、「遊び」を通して「操作」を習得していきます。

「操作」を学んだオモチャたち。

1歳前〜1歳後半にかけて、息子が「操作」を学んだオモチャたちを少し紹介します。

【リモコンさん：難易度★☆☆】オモチャで単純に「遊ぶ」から「操作」にレベルアップしてきたのがこのオモチャさんとの出会いです。
ボタンを押すと楽しい音が流れます。ボタンの押したら凹む感じや、配色などから、赤ちゃんでも操作が分かりやすいオモチャさんです。

【ハンドル型アンパンマンさん：難易度★★☆】リモコンさんが「押す」だけだったのに対し、こちらは「回す」「ひねる」などの動作も加わる、ややお兄ちゃんお姉ちゃん向けオモチャです。操作すると車にちなんだ音が流れます。
息子は「ひねる」の動作に少し苦戦していましたが、音が流れるのが楽しいようで徐々に操作を習得していきました。

【シャボン玉さん：難易度★★★】操作の習得にかなり時間のかかった、超お兄ちゃんお姉ちゃん向けオモチャです。オレンジの部分にシャボン液を付け、ボタンを押してプロペラを回転させてシャボン玉を作ります。
ボタンの色が周りと同じなのと、あまり「押した感」のないボタンである点、また、ボタンを押してからシャボン玉が出るまでワンテンポ遅れるので「正しく操作できているか」が分かりにくかったようです。

【いよいよ本題】2歳が苦手な操作と得意な操作

さて、前置きが長くなりましたが、ここからが本題です。
お待たせしました👶

『パプリカ』の動画が見たい息子がYouTubeのアプリを操作するようすを観察していて気がついた、2歳の苦手な操作と得意な操作を紹介します。

----------

◎：スクロール・スワイプ

・スクロール操作は余裕でOK。
・左右スワイプで次の動画へ進むこともらくらくクリア。
・上下スワイプで前のシーンに戻ることも分かっているようす。

基本の移動は問題ないようです。
少し意外なのはスワイプの挙動の理解でしょうか。YouTubeアプリで言うと、個別の動画の画面から上下スワイプで一覧画面に戻ることが出来ますが、その挙動も直感的に理解出来ているみたいです。

----------

○：サムネイルのタップ

・サムネイル系は押せばその詳細が見れるということを理解。
・これは写真アプリ等も同じで、見たいものをひたすらタップ。

興味のある対象（サムネイルなど）をタップすれば詳しく（大きく）見れる、と分かっているようです。
ただし…先日ツムツムランドのアプリをイタズラしていた息子は、ローディング画面でツムがぴょんぴょん跳ねているのを一生懸命タップしていましたがもちろん何も起きませんでした（ローディング画面なので…）。
「押してもなにも起きないこともある」というのは勉強中のようです。

----------

△：横に並んだボタンの左側を押す

・YouTubeをTVにキャスト中に出る「キューに追加」という画面（こういう画面）では、右利きの息子は「再生」したいのに「キュー」を押してしまう。

ボタンが近くに並んでいると目的のものを押すのが難しいようです。。。

----------

☓：テキストリンクやアイコンのタップ

・文字は読めないので、テキストリンクは全く押さない。
・アイコンも意味が分かるものは少ないみたい。

iPhoneのホーム画面に並んだYouTubeのアイコンは理解しているのですが（「手を洗う」「着替える」などの生活週間もそうですが、赤ちゃんは習慣になった行動はけっこう覚えます）
ふだん使わないアイコンは理解できていないようです。
文字はまだ読めないのでそもそも「押そう」という気にならないみたいです。

----------

◎ 例外 :「広告をスキップ」

・動画を観たいという執念からか「広告をスキップ」は完全マスター！！

ちなみに「赤ちゃんは広告が分かるのですか？」と聞かれたのですが、赤ちゃんってけっこう子ども向けのコンテンツとそうでないものが分かるんですよね。
Eテレの子ども向け番組には釘付けになるのですが、大人向けの番組には基本興味なしです。

どこで見分けてるのでしょう…？
笑声とかモチーフ（子ども・キャラクターなど）でしょうか。
デザインに置き換えると「トンマナが異なると自分が対象となるコンテンツではないと判断する」みたいなことが起きているっぽいです。

赤ちゃん先生から学ぶ分かりやすいUIデザインまとめ

前項で出てきた中から、赤ちゃん的ポイントをまとめてみましょう。

------------

👶 < ボタンの色やデザインが目立たないと、押せることが分からないよ。
👶 < ボタンを押したあと、反応が遅いと押せたかどうか分からないよ。
👶 < 実はスワイプ操作もけっこう分かるんだよ。
👶 < 近くにあるボタンは押しにくいよ。
👶 < 文字はまだ読めないよ。ここ押せるの？
👶 < アイコンも何が起こるのかよくわからないよ。押したらどうなるの？
👶 < ただしいつも見ているアイコンなら分かるよ。
👶 < 自分向けのトンマナは分かるよ。
👶 < 広告はうざいよ！

------------

目新しいものこそ無いかもしれませんが、デザイナーならハッとする項目が並んでいるかもしれません。

まだ生まれてたった2年の赤ちゃんの得意な操作と苦手な操作やそのポイントを知ることで、多くの人に分かりやすいUIデザインづくりへと繋げられるかもしれません。
日々どんどん新しいことが出来るようになっていく息子から、自分も色々と教えてもらおうと思います。