テストなしで、ユーザビリティを向上させる10のルール

ユーザビリティは製品やサービスを成功に導くための重要な要素です。魅力的な製品・サービスを作ったとしても、ユーザビリティに問題があれば顧客は離れてしまいます。

製品・サービスのユーザビリティを向上させるには、A/Bテストやゲリラリサーチ等をとおして、現在のユーザビリティを評価するのが一般的です。しかしこれらの実施には、費用も時間もかかります。

そこで今回は、テストなしでユーザビリティを向上させるための10のルールをご紹介します。参考にするのは、ユーザビリティのパイオニアであるヤコブ・ニールセン氏による「ユーザビリティ10原則」です。

1. プログレスバーの表示

進歩状況を可視化するプログレスバーを設置すれば、ユーザーはいまシステム内で何がおこなわれているのかを知ることができます。

ユーザーの離脱を防げるだけでなく、システムに対する信頼を向上できるでしょう。

▲出典：Jakub Antalik

このように、ファイルをアップロードする時の進行状況や、タスクの完了に必要な時間をユーザーに分かりやすく知らせることが大切です。

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

システムと現実世界を一致させるのも、ユーザビリティ向上にとって重要です。

以下の例では、映画のチケット予約システムが、実際の座席の配置を正確に再現しています。

▲映画のチケット予約画面

システム上でもユーザーが実際の配置をイメージできるため、スムーズにチケットを購入できるのです。

3. 直感的な操作の実現

ユーザーが直感的に操作できるデザインとは、どのようなものでしょうか。ボタンを例に考えてみましょう。

たとえば誤って削除ボタンを押してしまい、以下のようなエラーメッセージが表示されたと仮定します。

▲「OK」というボタンが、削除を意味しているのかどうかが不明確

「OK」と「Cancel」のボタンがまったく同じデザインだと、ユーザーは混乱してしまいます。

そこで、片方のボタンを赤くしてみましょう。赤い方のボタンが危険な操作であることを、直感的にユーザーが認知できます。

また「OK」と「Cancel」だけでは機能の説明が不十分です。「OK」ではなく「Remove（削除）」と書いておけば、ユーザーはボタンを押すとなにが起きるのかをすぐ理解できます。

▲「Remove（削除）」にすると機能が明確に伝わる

このような、文字情報によりユーザーのタスク完了を支援することを「UXライティング」と呼びます。詳しくは以下の記事をご覧ください。

4.ユーザーに馴染みのあるデザイン

ユーザーは無意識のうちに、あらゆるECサイトの基本的なレイアウトを直感的に記憶しています。

▲出典：Amazon

このAmazonサイトのように、上部にナビゲーションバー、右上にカートボタンが配置されているデザインは、ECサイトとして一般的なものとして浸透しています。

馴染みのあるデザインはユーザビリティを向上させ、スムーズな買い物を促進できるでしょう。

5. ユーザーのミスを防ぐ仕組み

ユーザビリティの向上には、エラー防止も欠かせません。間違って削除ボタンを押してしまったとき、確認メッセージが表示されたことで、ミスを回避できたという経験はありませんか？

たとえば、Gmailのエラー防止対策を見てみましょう。「添付しました」という文章を書いたにもかかわらず、ファイルが添付されていなければ、システムがポップアップで知らせてくれます。このシステムに助けられた方も多いのではないでしょうか。

▲出典：Gmail

また仮にユーザーがミスをしてしまった場合でも、カバーできる仕組みを整えておきましょう。アプリやWebページを閲覧していると、ときには間違ったボタンを押してしまうこともありますよね。操作中のミスは、どんなユーザーにも起こりうることです。

「もとに戻す」や「やり直し」のボタンを用意しておきましょう。

▲出典：Larry.Y

上の例では、左下の「Undo（もとに戻す）」ボタンによって、ユーザーのミスをカバーしています。

6. ユーザーの記憶に頼らないデザイン

ユーザー自身の記憶に頼ることのない、分かりやすいデザインを心がけましょう。

▲出典：Catarina Coutinho

たとえばこの例では、相手から送られてきたメッセージを見ながら返事を書けるシステムが採用されています。もし相手からのメッセージが表示されていなければ、ユーザーはメッセージの内容を思い出しながら返事を書かなければいけません。

またMicrosoft Wordの「最近の項目」機能も、同様の役割です。やりかけの作業があったとしても、この機能ひとつで簡単に思い出せるようになります。

7. 作業の効率化

パソコンを日常的に使う方は、Ctrl+Cなどのショートカットキーを活用することも多いはずです。

ショートカットキーを用意しておくことで、ユーザーの作業効率とユーザビリティを向上させられます。

▲Adobe XDのショートカットキー

効率化に一役買っているのは、ショートカットキーだけではありません。

たとえばInstagramに投稿されている画像にダブルタップするとハートがつけられる機能も、効率化によってユーザービリティを向上させています。

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

多くの情報をデザインに詰め込みすぎると、余計な負荷をユーザーにかけることになり、結果的にユーザビリティを損なってしまいます。

▲Google Chromeのホームページ

Google Chromeのホームページは、ミニマルで美しいデザインに仕上がっていますよね。

このように、ユーザーに必要な情報だけを提供し、過剰なデザインは避けるようにしましょう。

9. ユーザー自身によるエラーの認識／診断／回復

以下3つのルールを守って、ユーザー自身によるエラーの認識／診断／回復を可能にしましょう。

1. エラーが発生したことを伝える
2. エラーの内容を伝える
3. エラーからの回復方法を伝える

▲出典：Biel Morro

上記の例では、3つの条件すべてが満たされてますね。

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

年々複雑になっていくUIには、ヘルプが不可欠です。ユーザーの理解を手助けするような機能をつけておけば、自身で疑問を解決してくれます。

以下の例では、まずページの最上部で「Hello, what can we do for you？（＝どのようなご用件でお困りですか？）」と疑問を投げかけています。その上で、ユーザーがひとりで疑問を解決できるように、検索バー、FAQ、コミュニティガイドを用意しています。

▲出典：Valentin Salmon

このようにヘルプ機能を充実させることで、ユーザーをサポートしていきましょう。

おわりに

ユーザビリティを向上させるためには、A/Bテストやゲリラリサーチ等のテストももちろん有効です。しかし今回ご紹介した10のルールを意識すれば、それだけで使いやすいデザインが実現できます。

テストをする費用や時間がある方も、そうでない方も、ぜひこれら10のルールを反映した製品やサービスを作ってみてください。

（執筆：Rishin Thomas　翻訳：Asuka Nakajima　編集：Kitamura Yuu、Kimuya Yumi）