Webデザイン

【事例で学ぶデザイン】あるカーナビの画面UI考察と改善案の模索

自分の行動を俯瞰して見ることで、デザインを学べる機会があります。
例えば、新たしいアプリを使ってみた時や、飲食店でタッチパネルで注文した時など。
「あれ、どこを押したら良いのかな」そう思った時はデザインを学ぶチャンスです。

あるカーナビの画面UI

車に乗った時、カーナビはほぼ毎回操作すると思います。
それなのに操作する度に毎回迷うボタンがあります。それが「広域|詳細」のボタンです。

どっちを押したら望む操作が出来るのかパッと見てわからないんです。

「いやいや、そんなことないよ。上か下で覚えたら良いじゃん」
そう、みなさん覚えて使っているんでしょう。それが当たり前の感覚です。

わかりやすいデザインが必要とされる現代

Webの世界には同系のサービスがたくさん作られて出回るようになりました。
昔はそうではなく、あっても数種類だったので使い勝手による差によって使われなくなることは少なかったのですが、
ライバルがたくさんいる現代のWebはそうではありません。ユーザーに使ってもらうためには使い勝手が良くなければ選んでもらえません

その結果、UX(ユーザーの体験)に注目されるようになったのです。

あるカーナビのUX

自分が乗っている車に搭載されているカーナビのお話です。
「広域|詳細」ボタンを毎回間違って押してしまい、意図した動作と反対の動きになってしまいます。
さてそれはなぜなんでしょう。「あなたが学ばないからだ!」と言われればそのとおりですが、ユーザーに学ばせるものは良いUXではありません。
「自然に意図する操作が出来る」がデザインされた理想のUIです。

何が問題なのか

見た目は問題ありません。ボタンであることが感じ取れます。
問題は名称にあります。

広域:
「広い」という感じが使われています。ズームインした時、地図に表示される建物と建物の間は広く表示され、どこに何があるのかわかりやすくなります。ズームインする目的はどこに目的地があるのか拡大された画面で確認したい場合に利用するのです。だから「広い地図を見たい」という考えから「広域」というボタンを押してしまいます。
詳細:
ズームアウトすると地図が細かくなりますね。結果で考えると「細」という言葉からズームアウトの動作を想定してしまいます。

この事例は一部の人に限定される認識かもしれません。
しかし、このように誤解される可能性がある言葉を選択することは良いデザインとは言えません。

正解はどんなデザインなのか

何が正解ですか?
もうおわかりの方もおられるでしょう。

正解は、「エリアを拡大|エリアを縮小」です。
このように記載することで誤解されることはほぼなくなるでしょう。
なぜこのような文言の選択ミスが発生したのでしょうか。

わかりやすいデザインが必要とされる現代

前提として、この記事はあくまで筆者の主観による視点からより良いデザインを学ぶために書かれたものです。
自分が使っているカーナビに関する記事になるため、最新のカーナビは今からお話する課題が解決されているのかもしれません。
ご了承ください。

あくまで推測になりますが、カーナビは「毎日使ってもらうものなのでUIは継承するべき」と考えてしまったのでしょうか。スマートデバイスが行き渡り「ピンチイン/ピンチアウト」が当たり前になった現代のリテラシーに対する認識が甘かったのでしょうか。

前者も後者もあり得るでしょう。
使用頻度が高いデバイスはこのようにUXを軽視しがちです。
このようになってしまうのはコンセプトが明確でないか、UXに対する視点がコンセプトに漏れてしまっているからでしょう。

常に最先端に、より良いものを提供するためには変化を恐れてはいけません。
UIを覚えて利用する親切なユーザーは、不便なUIに慣れているだけです。
最近の若い子たちはデジタルデバイスに囲まれて育っているため、使い勝手の悪いUIに敏感です。

まとめ

ただカタチにするだけの作業はデザインではありません。
ユーザーの体験を常に意識し、気づかれないUIを心がけましょう。

デザイナーにとって悲しい話ですが、悪いUIは目立ち、良いUIは目立ちません
だれもが無意識で操作できるUIを心がけましょう。

何を作ったら良いかわからない時は、とりあえず作ってみるのも正解前のページ

【AIライティング記事対策】AIで書かれた記事ではないことをアピールする手段次のページ

ピックアップ記事

  1. 【経験者が語る】独学で学ぶ、webデザインの学習ロードマップ!スクール不要で再就…
  2. Macubeクリーナーの解約方法がわかりにくくて困った

関連記事

  1. Webデザイン

    Webデザインの独学はUdemyがオススメ

    Webデザイナーとしてさらなるステップを踏むためにはコピーライティング…

  2. Webデザイン

    未経験で在宅Webデザイナーを目指す”現実”とその解決策

    未経験から在宅でWebデザイナーになる夢、それは本当に叶うのでしょうか…

  3. Webデザイン

    【事例で学ぶデザイン】日常にも溢れるデザイン思考

    デザインという言葉の意味は拡大解釈されがちです。才能に秀でた人のみが出…

  4. Webデザイン

    本業も充実!Webデザイナーが副業で学ぶべきこと

    Webデザインの世界に足を踏み入れると、副業を通じてさらなる技術向上と…

  5. Webデザイン

    Webデザイナーが最低限知っておきたい「SEO対策」の基礎知識

    Webサイトに辿り着く手段として1番使われているのはGoogleに代表…

  6. Webデザイン

    Webデザイン初心者のためのUI/UX基本ガイド【理解から応用へ】

    UI/UX入門:基本概念をわかりやすく解説UI(ユーザー・イン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ピックアップ記事

最近の記事

  1. アウトプット

    [Mac]プリンタ設定でいつもつまづくのでメモ
  2. Webデザイン

    【経験者が語る】独学で学ぶ、webデザインの学習ロードマップ!スクール不要で再就…
  3. レビュー

    『Colemanワンマントルランタン(286A740J)』レビュー。
  4. アウトプット

    Macubeクリーナーの解約方法がわかりにくくて困った
  5. MAMP

    MAMPにバーチャルホストの設定を追加する
PAGE TOP