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

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

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

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

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

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

Increase Usability Without Testing

▲出典:Jakub Antalik

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

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

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

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

Increase Usability Without Testing

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

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

3. 直感的な操作の実現

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

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

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

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

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

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

buttondesign-5▲「Remove(削除)」にすると機能が明確に伝わる

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

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

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

Amazon

▲出典:Amazon

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

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

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

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

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

Gmail

▲出典:Gmail

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

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

Increase Usability Without Testing

▲出典:Larry.Y

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

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

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

Increase Usability Without Testing

▲出典:Catarina Coutinho

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

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

7. 作業の効率化

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

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

Increase Usability Without Testing

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

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

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

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

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

Increase Usability Without Testing

▲Google Chromeのホームページ

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

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

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

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

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


▲出典:Biel Morro

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

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

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

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

Increase Usability Without Testing

▲出典:Valentin Salmon

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

おわりに

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

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

(執筆:Rishin Thomas 翻訳:Asuka Nakajima 編集:Kitamura Yuu、Kimuya Yumi)

いまの働き方に悩んでいるあなたへ。

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ