[ウェブデザインの基礎] UIデザイン・UXデザイン・ユーザビリティ

UIデザイン・UXデザイン・ユーザビリティ

以前本講義内で「ユーザーに違和感を与えないことが重要」と話しました。

違和感があるとお問い合わせなどのコンバージョンには到底辿り着かないという内容でしたが、今回は「使いやすさ」「見やすさ」に重点を置き「UIデザイン」「UXデザイン」「ユーザビリティ」の解説を行います。

「レイアウト」「配色」「UI・UXデザイン」とした私の視点でのウェブデザインの解説3部作の最終回になります。

UIデザイン

UIは「ユーザー目線で配慮され組まれた設計」

ユーザーインターフェースとは、機器やソフトウェア、システムなどとその利用者の間で情報をやり取りする仕組み。システムから利用者への情報の提示・表示の仕方と、利用者がシステムを操作したり情報を入力したりする手段や方式、機器、使い勝手などの総体を表す。

参考:ユーザーインターフェース(UI)とは – 意味をわかりやすく – IT用語辞典 e-Words

まずUIとは?という点から入りましょう。
UIとはユーザーインターフェース(User Interface)の略で、ユーザー(User)と使用端末装置の接点(Interface)という意味を持っています。「つながり」という言葉がふさわしいですね。

ではUIデザインとは何か?というと、ユーザーがWebサイトやアプリを見たり使ったりする時に、快適に閲覧・使用できるように設計を行うことを意味します。言うなれば使用法・操作法ですね。

ウェブサイトの場合、適切なUIデザインが行われた結果から得られるのは、「フォントが適度に大きくて読みやすい」だとか「ボタンのサイズが適度に押しやすい」だとか、「見たいページへのリンクがわかりやすい場所にある」といった効果です。

ページデザイン、テキスト、ボタンなど、ユーザーが触れる全てがUIということになり、ユーザーのために考えられユーザー目線で配慮され組まれた設計が優れたUIデザインだといえます。

UIに関してはさまざまな媒体で情報が公開されています。ちょっと見てみましょう。

参考:UIデザインってなに?基礎知識やUXデザイン・Webデザインとの違いを解説! | CodeCampus
参考:聞いたことはあるけど「UIデザイン」とは? | TechAcademyマガジン
参考:【永久保存版】エンジニア・デザイナー必見!「UI/UX」の基礎が学べるSlideshare30選

これらの情報でより理解が深まるかと思います。

GUI

GUIとは、コンピュータの表示・操作体系(ユーザーインターフェース)の分類の一つで、情報の提示に画像や図形を多用し、基礎的な操作の大半をマウスやタッチスクリーンなどによる画面上の位置の指示により行うことができるもの。

参考:GUI(Graphical User Interface / グラフィカルユーザーインターフェース)とは – 意味をわかりやすく – IT用語辞典 e-Words

GUIとは、グラフィカルユーザーインターフェース(Graphical User Interface)の略で、アイコンやカーソル、メニューやボタンなどのシンボリックな図形に文字情報を組み合わせてビジュアル化されたものを意味します。

WindowsやMacなどのOSでも、例えばフォルダやゴミ箱などグラフィカルなアイコンがあるため、使用に不慣れな人でも「こういうことかな」と直感で理解して使用することができますね。言うなればわかりやすさの実現です。

UXデザイン

UIデザインの次はUXデザインのお話です。UXとは、ユーザーエクスペリエンス(User eXperience)の略で、ユーザーが製品・システム・サービスを通して得られる体験のことです。

その体験をできる限り良質なものにできる様に設計するのがUXデザインと言えるでしょう。
わかりやすい例が以下です。

UXとは、「User Experience(ユーザエクスペリエンス)」の略であり、ユーザー体験のことです。つまり、UXデザインとは、ユーザー体験をデザインすることを意味します。

では、体験をデザインするとはどういうことでしょうか。

例えば、両親が子供にクリスマスプレゼントをあげるシナリオには、デザインされた体験が詰まっています。

多くの家庭では、クリスマスの時期に下記のような行いがあるかと思います。

・クリスマスが近づくと、家の中の飾り付けをする
・クリスマス・イブの夜に、ケーキや食事を用意してパーティーをする
・子供が、プレゼントをもらうための靴下を枕元に置いて寝る
・子供が寝ている間に、両親がそっと枕元の靴下にプレゼントを入れる
・子供が朝目覚めると、靴下の中にプレゼントが入っている

子供がプレゼントを貰いたいという欲求を満たすだけであれば、このような行いがなくても、両親がクリスマスの朝に子供にプレゼントを手渡しすれば実現できます。しかし、それだけではクリスマスプレゼントを貰うという子供の欲求は満たされません。子供にとってクリスマスプレゼントはサンタさんからの贈り物であり、サンタさんから貰って初めて、クリスマスプレゼントを貰いたいという欲求が満たされます。

そのために、クリスマスの演出によって、あたかもサンタさんからクリスマスプレゼントを貰ったような感覚を、子供に提供しているのです。それが体験をデザインするということです。クリスマスプレゼントの演出では、下図のように体験がデザインされているのです。

参考:UXデザインとは ～ 身近な事例から理解する ～|最先端のUXデザイン論 | アプリ戦略大学

上記の場合「クリスマスプレゼントをサンタさんから貰う体験(=UX)」を「わざわざ演出(=デザイン)」しているという点ですね。

UXとは、ある製品やサービスとの関わりを通じて利用者が得る体験およびその印象の総体。使いやすさのような個別の性質や要素だけでなく、利用者と対象物の出会いから別れまでの間に生まれる経験の全体が含まれる。

参考:UX(User Experience / ユーザーエクスペリエンス)とは 【ユーザーインターフェース】 – 意味をわかりやすく – IT用語辞典 e-Words

UIに比べるとより抽象的な「体験」を指したモノになりますが、一般的にはUXの目的の中の一つがUIであると考えるとわかりやすいです。

当然、ユーザーには良質な心地よい体験をしてもらうのが目的であり、そのために、より使いやすさやわかりやすさを実現する設計をする必要があります。

またUXの場合、ユーザー側の環境に大きく左右されます。参考サイトにも掲載されていますが、制作側でのUX制御には限界があります。だからこそ良質なUIデザインによってできる限り良質なUXデザインを心がけたいですね。

ユーザビリティ

いきなりですが・・・

例えばオンラインショップでの買い物だと、どれだけ早く欲しいものが見つかって、どれだけスムーズに購入ができるかが重要ですよね?

例えば家のトイレが水漏れしていたら早く直さないと家が水浸しになっちゃうんだから、どれだけ早く業者が来てくれるか、もっと言えばどれだけ早く連絡できるかが重要ですよね?

今度は「どれだけスムーズにゴールに辿り着けるか」の話。

ユーザビリティとは、機器やソフトウェア、Webサイトなどの使いやすさ、使い勝手のこと。利用者が対象を操作して目的を達するまでの間に、どのくらい迷ったり間違えたりストレスを感じたりすることなく使用できるかを表す概念である。

参考:ユーザビリティ(使用性)とは 【ユーザーインターフェース】 – 意味をわかりやすく – IT用語辞典 e-Words

ユーザビリティに関しては比較的耳にする機会が多いと思いますが、いわば目的達成までの道筋がどれだけ容易であるかを示した指標です。

「どこを見ればいいんだろう?」とサイト内を探し回ったり・・・
「わかんないから戻ろう」と「戻るボタン」で前のページに戻ったり・・・

迷わせてしまう作りは「ユーザビリティが低い」と考え、迷わせない作りは「ユーザビリティが高い」と考えてください。

さらにウェブの場合は以下の部分がわかりやすいかと思います。
ウェブの場合のユーザビリティはウェブユーザビリティと呼称されていますね。

Webユーザビリティとは、WebサイトやWebページ、Webシステム(WebアプリケーションやWebサービス)の使いやすさ、分かりやすさのこと。利用者が目的を達する容易さや効率の良さ、満足度などの総体。

Webサイトを訪れた閲覧者が目的の情報にたどり着いたり、目的の操作や手続きを達成するのに、どれだけ迷わず快適に行うことができるかを表す。サイトの構造や現在位置、どこを操作すればどこへ移動するのかなどが容易に理解でき、最低限の効率的な操作で目的の情報や手続きに到達できる、といった点が重要となる。

参考:Webユーザビリティ(ウェブユーザビリティ)とは – 意味をわかりやすく – IT用語辞典 e-Words

ユーザビリティは人ぞれぞれ

サイトの種類や訪問者の目的、主な対象機器やソフトウェア(パソコンかスマートフォンか)などの違いによってどのような作りが好ましいかは異なり、ある環境では好ましい要素が別の状況や利用者では無効であったり使いにくい場合(マウスオーバーポップアップや固定表示メニューなど)もある。

参考:ユーザビリティ(使用性)とは 【ユーザーインターフェース】 – 意味をわかりやすく – IT用語辞典 e-Words

上記の通り、サイトの種別やユーザーが何を目的に訪問しているかによってサイトの構造や作りの良し悪しが変化するため非常に厄介です。

デザインラフを描き始めた「情ビのサイトのラフを描いてみよう(3点のポイント編)」で3つのポイントに書いたターゲットユーザーの定義をしっかりと行うのはこのためですね。適当に書いちゃったらメインターゲットの傾向なんて対策できるはずがありません。

ユーザビリティを向上させるには

ユーザビリティ向上のためによく言われる一般的な要素としては、サイト内で一貫性があり見やすく整理されたメニューやナビゲーション要素、主題がひと目で分かるページタイトル(title要素)や表題、見出し、リンク先が明確に分かる配色やリンクテキスト、現在位置が容易に把握できるパンくずリストなどの要素、サイト全体が俯瞰できるサイトマップ、キーワードでサイト内のページを探せる全文検索フォームなどがある。

参考:ユーザビリティ(使用性)とは 【ユーザーインターフェース】 – 意味をわかりやすく – IT用語辞典 e-Words

ここでレイアウトの講義で解説した「レイアウトの手法・コツ④ 4つの基本的なルール」および配色の講義で解説した「配色の基本は3つの色」の内容が活きてきますね。

ユーザビリティテスト・アクセス解析

Webユーザビリティの確認のためには、ソフトウェアなどの場合と同じように、想定利用者の協力を得て実際にいくつかのシナリオに従って目的を達成するまで操作してもらい、その様子を記録・観察したり意見を聞くといったユーザビリティテストを行うのが有効である。また、アクセス解析ソフト・サービスなどを利用して、実際の訪問者のページ間の遷移やリンクのクリック状況などを計測し、サイト内で想定した通りの人の流れが生じているか確認する手法もある。

参考:Webユーザビリティ(ウェブユーザビリティ)とは – 意味をわかりやすく – IT用語辞典 e-Words

実際に訪問してくれるであろうメインターゲットは3つのポイントにまとめていますが、似たユーザーに協力してもらい、実際の使用の様子の観察を行ったり使用した感想を聞いたりといった、実測のユーザビリティのテストを行うことがあります。

これは運用前のテスト段階で行うことがほとんどであり、テストの結果によってさまざまな修正の必要が生じることもあります。
ウェブサイトがよりよい結果を出すために必要な工程です。

また公開後に行う運用業務の一つとして、Google Analyticsなどの解析ツールを使用し、訪問者は何を使ってどこのページに辿り着き、どこから出て行ったのか?などの情報を得て、見えてきた結果と照らし合わせ、ウェブサイト改善のためにさらなる修正を行うことがあります。

アクセシビリティ

高齢や障害、病気などで運動・視聴覚機能に制約があっても、機器やソフトウェアの操作、情報の入手、利用などが可能である状態を意味する。
例えば、マウスなどによる画面上の位置指定が困難な場合に備え、キーボードやボタン型の入力装置、音声認識など他の入力機能のみで操作が行えるようにしたり、視力や視覚の状況に応じて、画面表示や文字の拡大、画面上の文字の読み上げなどの機能を選択できるといったように、様々な人が利用できるような備えが行われている状態を指す。

参考:アクセシビリティとは – 意味をわかりやすく – IT用語辞典 e-Words

最後にアクセシビリティに関してです。
ユーザビリティが「どれだけスムーズか」だとすれば、アクセシビリティは「どれだけ可能か」といった意味になります。
参考サイトにもありますが、アクセシビリティは最低限必要なものの一つであり、その上でユーザビリティを向上させることが重要になりますね。