非デジタルネイティブ世代に向けたUIデザインを僕らは真剣に考えないといけない

こんにちは、タカフミです。

仕事でアプリやウェブのUIを考えたり、デザインをしていて最近思うことがありました。それは、ついつい自分の学習経験などに基づいてデザインをしてしまうことです。こんな事言われてもわからないと思うので、これから詳しく話していきたいと思います。

もはやスマホは若者だけのものではない

日本ではこれまでフィーチャフォンとよばれる、いわゆるガラパゴス携帯が一般的でした。しかし、iPhoneやAndroidの登場によって、わずか数年でスマートフォンに置き換わってしまいました。iPhoneが最初に発売された時は、一部のアーリーアダプターの人しか食いつきませんでしたが、その方達によって利便性が一般の人に伝わるとあっという間に普及しました。こういうのって、本当にインフルエンザの流行のように瞬く間に広がるので面白いものです。

事実、電車や町中でも老若男女問わずみなさんスマホを持っています。総務省が調査を行った情報通信白書（平成29年版）の「スマートフォン個人保有率の推移」の結果をみると、2011年には20%をきっていた40代50代のスマホ所有率が2016年には60%を超えています。

この結果からもわかるように、すでにスマホは若者だけのものではないということです。

そうなると、これまで若者が使うことを前提としていたアプリやウェブサイトのUIに対しても、もう一度立ち返って考えていく必要がでてきます。

カーナビアプリで見えたUIデザインの奥深さ

僕がこの記事を書こうと思ったきっかけがありました。それは、母が友人と一緒に車で旅行に言った時のことです。

我が家の車にはカーナビがついているのですが、10年以上前のもので地図情報も更新していないので全く役に立たない無用の長物となっていました。あまりにも情報が古いので、橋を渡ると海の上を走っていることになるほどです。

そこで、ドライブするときは必ずカーナビアプリを使っています。母が友人と出かけるときも、僕のほうで目的地を設定して出発していきました。

途中道に迷ったり（なんのためのカーナビなのか。。）しながらも、なんとか目的地に到着できたようで安心したのですが、その後大変なことが待ち受けていたのです。。

「事故もなく無事について良かったなー」と安心していた矢先に、母親から電話が掛かってきたのです。

電話の内容は「カーナビのアプリで帰りのルートを調べたいんだけど、どうしたらいいの？」というもの。

僕のスマホにも同じアプリが入っていたので、電話越しで「画面の上のほうにあるボタンをタップして〜」などのように言葉で説明しながら、使い方を説明するも全く伝わらず。。しびれを切らして、ラインのテレビ電話を使って画面を映しながら説明したのですが、これですら凄い時間がかかったのです。

「検索バーに目的地を入力して、ルートを検索する」という、基本的な操作が完了するまでに30分近く教えてやっと伝わったのです。カーナビアプリでコアとなる操作なのに、ここまで時間が掛かってしまうのは致命的だと感じました。

テキストフィールドと認識できなかった母

なぜ、基本的な操作にも関わらず30分以上かかってしまったのでしょうか。電話越しの母親の反応や、やりとりなどから考察したところ以下の2点が原因だとわかりました。

1. テキストフィールドと認識できなかった
2. アイコンの意味がわからなかった
3. するべきアクションがわからなかった

テキストフィールドと認識できなかった

下の画像は実際に使用したアプリのデザインを再現したものです。これだけに限らず、多くのカーナビアプリは似たようなデザインになっていると思います。

スマホアプリになれている人だったら、すぐに上部の検索窓をタップして目的地を入力することでしょう。それは、たいていのアプリでは検索バーが上部にあって、そこから検索するという体験を何度もしているからです。

しかし、僕の母親の場合は違いました。いま主流のフラットデザインでは、すべてのパーツが同一レイヤー上に配置されることが多いため、ある程度スマホやアプリなどを使ったことのある経験者でないとパーツと背景の境目がぼんやり見えてしまうことがあります。

つまり、それが背景の一部なのか何か機能が割り当てられたパーツなのかが判別しづらくなってしまうのです。

そのため、本来なら検索内容を入力するテキストフィールドなのに、僕の母親にはこれが背景の一部に見えてしまっていたようです。事実、電話で教えているときも「どこにも押すところがない」とか「文字を入力するところなんてない」となんども言っていました。

アイコンの意味がわからなかった

上部のテキストフィールドにところにある検索を意味する「虫眼鏡」のアイコン。今では当たり前のように検索を意味するアイコンになっていますが、母親には「虫眼鏡 = 検索」とは結びつかなかったようです。

考えてみれば、虫眼鏡って本来は小さいものを拡大して大きくみるための道具ですよね。小さいものから、拡大して目的ものを探したり、探偵が調査する時に虫眼鏡を持つというイメージから「虫眼鏡 = 検索」と連想されるのだと思いますが、少し遠回りな感じがします。

これについても、やはり他のアプリを使ったことがある人でないと伝わらないものだと思います。僕の母親はLINE以外のアプリを使うことがほとんどないので、学習機会がなかったのだと思います。

ちなみに天下のGoogle様では次のようになっています。アイコンなどは一切なく、検索とかかれています。わかりやすいですね。

するべきアクションがわからなかった

今回のUIで一番の問題点はここにあると思います。それは、アプリの画面と向き合った瞬間にここでするべきアクション（操作）が何なのかわからなかったということです。

先のスマホアプリでは検索バーのところに「住所/施設/駅/TEL」というプレースホルダーだけが表示されています。デザイナーの意図としては、住所だけでなく、施設名や駅名、電話番号でも検索できるよと伝えたかったのだと思います。

ただ、僕の母親にしてみれば「住所/施設/駅/TEL」と書かれているけど、これは一体どんな意味なのだろうと考えたのだと思います。ここをタップして入力するという、すべきアクションが伝わっていなかったのです。

考えすぎかもしれないですが人によってはパンくずリストに見える人だっているかと思います。

僕が考えた改善案はこれ

僕なりに今までの問題点を改善したUIデザイン案を考えてみました。もちろん、これで完璧ではないけど少しは改善されたものになったと思います。

改善1　テキストフィールドの曖昧さをなくした

以前のデザインでは背景色の灰色とテキストフィールドの背景色である白の2色の色違いしかなかったため、背景とテキストフィールドの境界が曖昧になっていました。

そこで、テキストフィールドの縁に色をつけることで境界をハッキリとさせるようにしました。これによって、ユーザーはこの部分が一つのパーツだと認識しやすくなります。

改善2 アイコンを省いた

Googleの検索画面でもそうだったように、「虫眼鏡 = 検索」というイメージが非デジタル・ネイティブ世代にとっては一般的ではないように思えました。

そこで、今回の検索バーからもアイコンを削除することにしました。

改善3 すべきアクションを明確にした

テキストフィールドの所に「ここに目的地を入力」と書くことで、ユーザーにしてほしいアクションを明確にしています。これで、ユーザーは「ここをタップして目的地を入力すればいいんだな」と理解しやすくなります。

さらに、僕の母親の場合はキーボードのEnterキーが検索実行アクションだと気づかないため、ただ目的地を入力しただけで、そこから先に進まないことがよくあります。

そこで、分かりやすく「調べる」というボタンを追加しました。「検索」という言葉よりも、道を「調べる」という言葉の方がフレンドリーなので、言葉を変更しています。また、このボタンもグラデーションを付けて、ドロップシャドウをつけることで「押せる感」を出すようにしています。

見た目も大事だけど、ユーザーを迷わせてはいけない

一部分ではありますが、カーナビアプリのUIを考察してみてUIデザインの奥深さを改めて痛感しました。明らかに若者しか使わないようなアプリやサービスの場合であれば、その世代に共通する認識に従ってUIを考えても問題がないと思います。

事実、アイコンを使ったり繊細な配色を行ってデザインしたほうが、今風な感じでスッキリしてクールなものができるでしょう。

しかし、カーナビアプリのように幅広い世代の人たちが使うアプリの場合では、デザイン的に少し野暮ったくなったとしても「ユーザーが迷わず操作できる」という機能性の方が大切になります。人間はだれしもヒューマンエラーを起こします。どんな製品でも、ユーザーが間違った操作をしてしまった場合、その責任はデザインを行ったデザイナーにあります。それだけ、デザイナーが負う責任はとても大きいものなのです。

記事の最初に紹介した調査結果からもわかるように、スマートフォンの普及はより進んでいくことでしょう。60代以上の人にも広がっていき、今以上に様々な世代の人がアプリやウェブサービスに触れていくことになります。

若者だけのものでなくなったアプリやウェブサービスのデザインに携わる一人のデザイナーとして、よりよいユーザー体験が提供できるように日々勉強しなければ駄目だと感じました。