ユーザビリティ10原則をWebデザインに活かす方法

はじめに

今回はユーザビリティの基本として、ユーザビリティの10原則について紹介していきたいと思います。近年のWebサイトはレスポンシブデザインの誕生もあり、使いやすいや見やすいサイトが良いと言われるようになりました。ユーザビリティ有名な原則としてユーザビリティの10原則というものがあります。この原則がWebのデザインでいつ活用できるのか、読み解いて説明したいと思います。

ユーザビリティとアクセシビリティの違い

アクセシビリティ

どんなユーザーでもアクセスしやすい(使いやすい)状態を指します。具体的に言うと、年齢層、国籍や言語、年齢などを問わず使えるようにすることです。よく聞く単語でいうと、ユニバーサルデザインやバリアフリーなどに近いところがあります。

ユーザビリティ

ある製品を特定の利用者が特定の目的を達成しようとするにあたって、特定の状況でいかに効果的に、効率的に、満足できるかを指します。ターゲットユーザーが便利に気持ちよく使えることができるか、満足度の重要度がとても高いと言えます。

具体例を出すと、プロダクトのサイトや採用サイトなどターゲットの年齢層や性別がはっきりとしているサイトはユーザビリティを意識したサイト多くあります。ユーザビリティはターゲットのリテラシーに合わせて使いやすくすることを指します。

---

ユーザビリティの10原則の活用パターン

ユーザビリティの10原則はWebデザインでも大事な指標ですが、それらを使いこなすのが難しいとも言われています。10種類の原則を知っていても実際のデザインで活用できていなければ意味がありません。しっかりとデザインとして表現できるように一つ一つの原則を読み解いていきたいと思います。

01.システムステータスの可視化

ユーザーに今サイト内のどこにいるのか、今何をしているのかを適切なタイミングでわかりやすく伝えることを指します。わかりやすい例で言うとECサイトでよく見かけるカートアイコンに数字が表示されているデザインです。今、何個カートに入っているのか、パッと見ただけで理解することができるところが見やすやに繋がります。

他の例で言うと、読み込み待ちをしている時に出てくるローディングアニメーションであったり、読み込みをパーセントで表現しているアニメーションがあります。それらはユーザーが何で待たされているのか、不快になる部分を解決してくれています。

また、パンクズリストもユーザビリティを意識しているデザインの一つで、今どこのページにいるのか、サイト構造がわかりやすくなる機能の一つになります。カレント表示もそれに似ていて、ヘッダーやグローバルナビゲーションの項目一つにあしらいが付いていて、見ているページを知らせてくれる点も優しい点と言えます。

フォームにも入力・確認・完了という三段階のステータス表示が最近のほとんどのWebサイトで見られるようになりました。三段階以上のフォームもあり、そういったフォームにもどの段階にいるのか、知らせることでユーザーの迷いの原因をなくすことができます。

02.システムと現実世界の一致

ユーザーが慣れ親しんでいる言葉や表現など、現実世界でよく使われている機能をシステムの中でも取り入れるという意味になります。要するに実際のものがデジタル化されたデザインであると、ユーザーは日頃から使っているため、デジタル化されても使い方に困らないということになります。やはり、見た目はデジタル化になったものでも近い方ギャップが生まれないため、わかりやすいのだと思います。

具体的な例をあげると、iPhoneの電卓アプリがわかりやすいと思います。スマートフォンで見る電卓は実際の電卓の見た目とあまり変わらないため、ユーザーはそれほど、迷うことなく使えていると思います。リアルのプロダクトがデジタルのプロダクトになった時に、アナログのUIを踏襲しているデザイだと、認知的にストレスなく使用できる点が使いやすいデザインと言えることになります。

Webデザインで言うと、当たり前ですがボタン類はそれらに該当すると言えます。最近のデザインではボタンデザインにシャドーが付いていていかにも押せそうなデザインになっています。その他のボタン類で言うとラジオボタンや音量ボタンなどの操作するような機能でも実際のプロダクトに似ているとユーザーは認知しやすいと言うことがわかっています。

03.ユーザーのコントロールと自由

これはどう言うことかというと、ユーザー自身が操作の間違いを修正できて元に戻せることを指します。操作に慣れているユーザーでさえも間違えることがあります。ユーザー自身が間違った操作を取り消すことができればユーザーは安心することができます。

Webデザインの話で例えると、フォームの内容をたくさん入力した後に、確認画面で間違いを見つけたときに修正できないとユーザーはストレスが溜まってしまいます。そのような意味でユーザには自由に操作できるようなデザインになっていると使いやすいデザインとして良い体験が生まれます。

フォームの続きで言うと、何か選択した状態で画面をリロードした時やページを行き来した時に選択した項目がリセットされているととても使いずらくユーザーがもう一度面倒な作業をしなければならないので、リセットされない仕組み作りが大切になります。

似たような例で言うと、もっと見るボタンがあるようなコンテンツがあって、コンテンツが下にたくさん増えてくるデザインの時にページ遷移して戻ると初期状態に戻っていてまた1からボタンを押さないといけないことになりユーザーからするととても使いずらさを感じてしまいます。しっかりと元の状態に戻れることでユーザーの使いやすさの度合いを向上させます。

04.一貫性と標準

サイト内で使われている、色やデザイン、操作方法やアニメーションなどは一貫性を待たせることが大切で、広く一般的な使い方に沿ったデザインにする必要があります。当たり前ですが、見出しとボタンが似たようなデザインだと間違えて見出しをクリックしてしまう可能性が出てきま。ボタンであればボタンということがわかる一貫性を保たせることができるデザインにしなければなりません。

悪い例で言うと一つのサイト内にリンクアイコンのデザインの種類がいくつもあったり、ボタンデザインが複数、無秩序に存在していると、一貫性が担保されていないため、ユーザーの使いにくさの原因になりかねません。操作できる機能については操作してからわかるのではなく、操作する前の段階で何ができるのかユーザーが理解できるようなデザインにする必要があります。

Webの外部リンクやボタン、ページャーのデザインなど、ユーザーの想定した動きに習って設計しておくことを気をつけてデザインしないといけません。有名企業(Twitter・Google・Apple)などはリンクテキストの色を青色にしていたりします。青にしていると誰が見てもリンクということがわかります。そのような工夫も自分たちがよく使っているサービスの中で適応されています。

05.エラーの防止

これは、ユーザーが無意識にしてしまう操作ミスをしないような設計にすることです。具体的な例をあげるとTwitterに文章を書いて消そうとすると保存していないことを促す画面が表示されます。操作・選択作業が全て消えてしまうといったミスを防ぐための配慮がとても大切です。

Googleの検索は間違って検索もそれから想定できる単語をあらかじめ検索してくれています。このようなやさしやがユーザーの心地よい体験を生み出しています。

06.思い出すのではなく認識する

これは何もない状態から思い出させて操作を促すよりも、情報を与えてユーザーが記憶していることを思い出してもらい、操作をしてもらうことです。Webデザインの中の例をあげると、ユーザーに対して選択肢を出して選ばせる方法を取るということになります。フォームのヘルプテキストや検索エリアに薄い字で何を書いたらいいのか、教えてあげているデザインが親切であると言えます。

07.柔軟性と使用効率

使うユーザー目線で、初心者にはわかりやすく、リピーターには効率的に操作が行える操作を用意することを指します。これはアプリとWebサイトの違いに似ていると思います。Webのスマホサイトは初心者向けのUIになっていることがおく、ゲームのアプリなどは、経験者向けの初心者からすると難しいUIになっていることがよくあります。

アプリは毎日使うサービスもあったりするので、いかに効率的に操作ができるよう考えられて作られていたりします。使うユーザーに対して適切なUIを設計することがデザイナーには求められます。

08. 美しくミニマルなデザイン

これはビジュアルデザインについてで過剰なコンテンツや余計な装飾は避けなければいけないということいなります。使いやすいデザインは一番重要なコンテンツが目立つデザインになっていないといけなくて、主張が激しい、デザインばかりを配置してしまうとユーザーは困ってしまいます。ユーザーが何を見ればいいのか、何をすればいいのか、わかりやすいデザインにすることが大切になります。

09.ユーザーがエラーを認識、診断、回復できるように支援する

これもフォームの機能に例えられますが、必須項目に入力漏れがないか、または入力内容が正しいかをリアルタイムでチェックする機能のことを指します。ユーザーが起こしたエラーが、どのような原因で起きたのか、視覚的にわかりやすく表示し、どのようにすればエラを解消できるのか明示することが大切になります。

10.ヘルプとドキュメント

Webデザインで言うところツールチップのことになります。何を入力していいのか、何の情報なのかわからない時にツールチップでユーザーをフォローすると親切な対応ができていると言えます。

まとめ

つかやすさの法則やデザインの原則などは他にもたくさん存在します。ですが、それらを生かすことができないと知識として持っていても意味がなくなってしまいます。一つ一つの原則や法則が実際のデザインでどのように使われているのか理解することがとても重要でそれらをデザインに取り入れることが大切になります。

ビジュアルを良くすることで良いサイトにすることもとても大事なことですが、実際に使うユーザーが使いやすいデザインにすることも意識しながら設計していきましょう。

---