members

members

UI 改善:優れたUIデザイン(ユーザーインターフェース)を作るためにWebやアプリで意識すべき、たった1つの原則

Tweet

Webサイトやアプリは、もはや現代人の生活に不可欠です。WebデザイナーやUXデザイナーが作るWebサイトやWebサービスのアプリにおける画面の「UIデザイン/UI設計」は極めて重要で、玉石混交の「UI原則・構造・情報設計」や「UIテクニック」が数多く公開されています。

しかしながら、「UIデザイン」に関する膨大な情報を得ても、いざ自分のWebサイトやアプリ開発となると、「良いUIデザインは結局どうすれば作れるの?」と迷うことも多いのではないでしょうか。

この記事では、優れた「UIデザイン」作成の実践に必要な、

  • UIデザインとは何か、なぜ重要なのか
  • UIデザインで意識すべきたった1つの原則
  • UIデザインを行うための具体的なアプローチと成功事例

をまとめています。

目次
UIデザインとは何か、なぜ重要か?
優れたUIデザインのたったひとつの原則:「ユーザに〇〇させるな」
UIデザインの具体的なアプローチ方法と成功事例
まとめ

UIデザインとは何か、なぜ重要か?

まずはじめに、「UIデザインとは何か」そして「なぜ重要か」を整理しましょう。

UIデザインは「ユーザ(利用者)がWebサイト・アプリをデバイスで操作性よくスムーズに使えるようにする」こと

「UI」とは「ユーザインターフェース」の略称です。「ユーザインターフェース」とは、「コンピュータとユーザが情報をやりとりするためのインターフェース(接点)」を指します。

したがって、WebサイトやアプリにおけるUIデザインとは、「コンピュータ(=Webサイトやアプリ)とユーザが情報をやりとりするためのインターフェースをデザインすること」と言えます。

もう少し噛み砕くと、UIデザインとは、「ユーザがWebサイト・アプリをスムーズに使えるようにする」ことであると言えるでしょう。

UIが悪いとサイトやアプリを使う目的が達成できない

ユーザがWebサイトやアプリを使うときには当然、使用目的(知りたいこと、やりたいこと)があります。

この前提に立って「良いUIデザイン」「悪いUIデザイン」の定義を考えると、

  • 良いUIデザインは「スムーズに使える=目的が達成しやすい」
  • 悪いUIデザインは「スムーズに使えない=目的が達成しづらい」

ということになります。

「目的が達成されない」というのは、例えば以下のような状況です。

  • 知りたい情報が見つけられない
  • 予約したいのにできない
  • 商品の検索方法が分からない

つまり、「UIデザイン」を考えるということは、「”ユーザが目的を達成できるようにするため”に何をすべきか」を考えることです。

目的が達成できないWebサイトやアプリ(それを提供する事業者や開発者)に対して、ユーザが大きな不満を抱くことは想像に難くありません。

上記の理由から「UIデザイン」は極めて重要なのです。

UIとUX(ユーザエクスペリエンス)との違い

似たような言葉に「UX(ユーザエクスペリエンス)」という言葉があり、しばしば混同されます。

UXは、Webサイトやアプリの利用時だけでなく、利用前の期待や、利用後の印象を含めたトータルのユーザ「体験」を指します。また、UIは「Webサイトやアプリの設計品質」が主な対象ですが、UXは「ユーザの利用品質」を考えることが主眼になります。

「設計品質」「利用品質」はそれぞれ、

  • 「客観的品質(あるページに到達するまでの時間など、具体的な数字で計測可能な「品質」)」
  • 「主観的品質(心理的満足度など、人間の主観でしか判断できない「品質」)」

にわかれます。

上記4区分をまとめると、UIは「客観的/主観的設計品質」、UXは「客観的/主観的利用品質」であると言えます。
(なお、「客観的設計品質」は「ユーザビリティ」、「主観的利用品質」はユーザの「満足感」となります。)

「UI」と「UX」では、「時間軸(利用時に限るのか/利用前後も含めたものか)」と「視点(設計の品質か/利用品質か)」の2つが大きく異なるのです。

引用:「設計品質と利用品質

「ビジュアルデザイン」と「UIデザイン」との違い

次に「ビジュアルデザイン」と「UIデザイン」との違いを簡単に整理します。

一般的に、「デザイン」という言葉で連想されるのは、「ビジュアルデザイン」であることが多いでしょう。ビジュアルデザインの目的は、装飾や色合い・写真やイラストといった「ビジュアル(見た目)」により「良い印象(狙った印象)を与えること」です。一方で、「UIデザイン」の目的が、「ユーザが(サイトやアプリを)スムーズに使えるようにすること」であることは前述のとおりです。

これまで、実務上は一人のデザイナーが「ビジュアルデザイン」と「UIデザイン」との両方を担当することも多く、両者は密接かつ不可分な関係にありました。しかしながら、両者の目的は異なり、UIデザインの重要性が上がるにつれ、UIデザイナーにもより専門的な知識やスキルセットが必要になってきています。

デザイナーのスズキアユミ氏によると、webデザイナー(ビジュアルデザイナー)は「装飾美」を、UIデザイナーは「機能美」をより重視する傾向にあります。また、前者にはビジュアル表現力が求められるのに対し、後者には設計力が求められるなど、「ビジュアルデザイン」と「UIデザイン」の役割はもはや大きく枝分かれしていると言えるでしょう。

出典:WEBデザイナーとUIデザイナーは違う職業なの?| note

優れたUIデザインのたったひとつの原則:「ユーザに〇〇させるな」

UIデザインの重要性についてご理解いただけたところで、優れたUIデザインを制作・設計する際の「たったひとつの原則」をご紹介します。
私の過去10年間のUIデザインやユーザビリティのコンサルティング経験を振り返ったときに、もっとも重要であると確信するのは、Webユーザビリティの権威の一人であるSteve Krug(スティーブ・クルーグ)の以下の言葉です。

Don’t make me think(「ユーザに考えさせるな」)

「ユーザに考えさせるな」とは

「考えさせるな」とは、つまり、
「ユーザーが考えなくても、それが何か分かるようにせよ」ということです。

  • クリック(タップ)できるのか
  • クリック(タップ)したら何が起こるのか
  • どこに情報があるのか
  • このページはどこにあるのか
  • この言葉はどういう意味なのか

など、ユーザがわざわざ考えたり迷ったりすることなく、自明のものとして判断できることが、「ユーザに考えさせないUIデザイン」です。

一見、当たり前のように感じると思いますが、実は、世の中の多くのWebサイトやアプリは「ユーザを無駄に考えさせる要素」に満ち溢れています。

  • クリック(タップ)できるのかどうか分からない

  • クリック(タップ)したら何が起こるのか分からない・想像と違う)

  • 書かれている言葉の意味が分からない

など、キリがないほどの「?」が溢れています。

「ユーザに考えさせない」ナビゲーション事例

サイトやアプリの「ナビゲーション」機能は、そのUIデザインが使い勝手の良し悪しを大きく左右する例です。

例えば、アコースティックギターを購入しようとあるサイトを訪れたとします。あなたは、ナビゲーションの「アコースティックギター」のリンクをクリックしますか。それとも、検索ボックスでわざわざ「アコースティックギター」と入力するでしょうか。

答えはもちろん前者ですね。

では、もしナビゲーションのリンク名が「ギター」だったらどうですか?
もし「楽器」だったら?
・・・ではもし、「電子機器」だったら?

UIデザインのゴールは、ユーザの「?」を取り除くこと

UIデザインの最重要原則が「ユーザに考えさせない」とすると、やるべきことは極めてシンプルです。

ユーザを考えさせる要素、ユーザの「?」を取り除くことです。
つまり、具体的な作業は以下のようになります:

  • クリック(タップ)できることを明確にする
  • クリック(タップ)した後の挙動をユーザの想像どおりにする
  • どこに情報があるのかをわかりやすくする
  • ユーザがサイトのどこにいるかを明確にする
  • 分かりやすい言葉を使う(言葉の意味を補足する)

こうした改善・改修により、ユーザの「?」をできる限り取り除くことができれば、UIデザインの目的である「ユーザが、Webサイトやアプリをスムーズに使えるようにすること」の実現に大きく近づきます。

UIデザインの具体的なアプローチ方法と成功事例

ここまでで、ユーザの「?」を取り除き「ユーザに考えさせない(Don’t make me think)」を実現することが「UIデザイン」である、という話をしました。

ここからは、具体的にはどのようなアプローチを取ればよいのかについて、事例を交えて解説していきます。

ベテランUIデザイナーでも、ユーザの「?」をとらえきれない2つの理由

ユーザが迷ってしまう要素をとらえることは、一見簡単なようですが、意外と難しいものです。それには2つの理由があります。

理由1:人間は十人十色。想像力にも限界あり

当然のことですが、人間は一人ひとりが異なります。パソコンやスマートフォンの利用経験も異なれば、知識やバックグラウンドも人それぞれです。

そのため、ある人にとっては自明のことが、別の人にとっては「なんだこれ?」となってしまうことも往々にしてあるのです。

デザイナーは、UIデザインやユーザビリティ経験をある程度積むと、ついつい「これはこのパターンで大丈夫」「これで誰にでも分かる」と思ってしまいがちですが、実はそんなことはありません。

ベテランのUIデザイナーは、ユーザの利用シーンや様々な「つまずきポイント」を経験則として知っており、経験からの指摘(ヒューリスティック評価)もある程度までは可能です。
しかしそれはあくまでも、その人の過去経験に依存した指摘に過ぎません。1,000人のユーザの動きを知っていたとしても、それは日本の人口のわずか10万分の1の過ぎませんし、1,001人目のユーザの動きは未知数なのです。

理由2:慣れによる”当たり前”の感覚

制作者やデザイナーは、制作過程で同じWebサイトやアプリを幾度となく使ったり見たりする結果、どんどんそのサイト・アプリに「慣れ」てしまいます。

慣れというのは怖いもので、最初は「なにこれ?」「わからない」という新鮮な視点があったとしても、すぐに「何がわからないかが、わからない」状態になってしまいます。

この状態になってしまうと、「自分が分かるんだから、ユーザもこのぐらいは分かるだろう」と考えてしまいがちになってしまうのです。

では、どのようにしてユーザの「?」を見つけていけばよいでしょうか?

最も手軽な方法は「ユーザテスト」

ユーザの「?」を捉える上で、最も手軽で簡単、しかも効果的な方法は、ユーザテスト(ユーザビリティテスト)です。

ユーザテストは自分以外のユーザに、実際にWebサイトやアプリを、ある状況・目的で利用してもらい、迷わず問題なく使えたかを確認する方法です。

その効果は極めて大きく、「ユーザはそんなことすら分からないのか」という驚きや気付きが多く得られます

専門的にしっかり行おうとするとそれなりにコストがかかりますが、会社の同僚や家族に協力してもらい、自分で行うだけでも、極めて多くの気付きが得られます。
ユーザテストを行って「?」を発見し、改善する。これを行うだけで、圧倒的に良いUIデザインに近づけることができるのです。

ユーザテストによるUIデザイン成功事例1~その場Q&A

ユーザテストにより様々な「?」を洗い出し、改善することは、ビジネス成果にも直結します。

ある旅行サイトでは、料金が格安であるがゆえに、ユーザが「金額に航空券代は含まれているのか?」と不安になっている、という課題が見つかりました。この「?」への対応は、料金表示の下に「航空券代込み」という一行を足す、というものでした。しかし、たったこれだけの改善で、CVRが20%もアップしたのです。

UIデザインの改善、というと、ビジュアルデザインを大きく変えないといけないというイメージもあるかと思いますが、それは誤りです。
たった一行の補足を足すだけでも、「ユーザが目的を達成する」に大きく寄与することができるのです。

ユーザテストによるUIデザイン成功事例2~要素を減らす

ユーザの「?」に対応するコンテンツがあったとしても、要素が多すぎたり、UIがごちゃついていると気づかれない場合があります。

ある携帯サイト(有料課金サービス)の事例では、ユーザは「お試し登録=自動的に課金」という強い先入観がありました。元々、サイトには「自動課金はない」と記載してありましたが、ユーザテストを行ったところ、「他にも様々な要素があり『自動課金はない』という記載に気づかれない」という課題が明らかになりました。そこで、メッセージの量を減らし、「自動課金はない」というメッセージを引き立たせたところ、お試し登録数がなんと3倍にもなりました。

これも、いわゆるビジュアルデザインの変更ではなく、ユーザの「?」を真摯にとらえ、「要素を減らす」というUI改善により成果が出た事例です。

まとめ

UIデザインについて、この記事でお伝えしたかった内容をまとめます。

  • UIデザイン(ユーザインターフェース・デザイン)とは、「ユーザが、Webサイトやアプリをスムーズに使えるようにすること」
  • 悪いUIデザインでは、ユーザはWebサイトやアプリを使う目的を達成できず、不満や離反を招いてしまう。そのため、UIデザインを考えることは大事。
  • UIデザインの最重要原則は「ユーザに考えさせるな(Don’t make me think)」
  • UIデザインは、ユーザの「?」を見つけ、解消していく取組である。
  • ユーザの「?」を見つけるには、ユーザテストがもっとも簡単かつ有用。家族や同僚に協力してもらい、まずは手軽に行おう。

※本記事は、メンバーズグループのポップインサイトブログからの転載記事です。

ユーザーの視点を知りたいWebディレクター向け

UX内製化支援「UXリサーチャオンデマンド」とは

UXリサーチ支援「UXリサーチャオンデマンド」とは

社内にUXリサーチの体制を作るためのUXリサーチ支援サービスです。「UXリサーチを行いたい」「UX部署を立ち上げたい」が、ノウハウやリソースがないご担当者向けに「UXリサーチャの人的リソース+リサーチツール」をご提供します。

資料ダウンロード

カスタマージャーニーマップ&ペルソナ策定ワークショップ資料

カスタマージャーニーマップ&ペルソナ策定ワークショップ資料

2回のワークショップでカスタマージャーニーマップ作成とペルソナ策定を行うための資料です。具体的なアウトプットイメージもあります。

資料ダウンロード