【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
ユーザビリティは製品やサービスを成功に導くための重要な要素です。魅力的な製品・サービスを作ったとしても、ユーザビリティに問題があれば顧客は離れてしまいます。
製品・サービスのユーザビリティを向上させるには、A/Bテストやゲリラリサーチ等をとおして、現在のユーザビリティを評価するのが一般的です。しかしこれらの実施には、費用も時間もかかります。
そこで今回は、テストなしでユーザビリティを向上させるための10のルールをご紹介します。参考にするのは、ユーザビリティのパイオニアであるヤコブ・ニールセン氏による「ユーザビリティ10原則」です。
目次
進歩状況を可視化するプログレスバーを設置すれば、ユーザーはいまシステム内で何がおこなわれているのかを知ることができます。
ユーザーの離脱を防げるだけでなく、システムに対する信頼を向上できるでしょう。
このように、ファイルをアップロードする時の進行状況や、タスクの完了に必要な時間をユーザーに分かりやすく知らせることが大切です。
進捗状況を伝えるデザインパターンの基本:プログレストラッカーとプログレスインジケーター
Workship MAGAZINE
システムと現実世界を一致させるのも、ユーザビリティ向上にとって重要です。
以下の例では、映画のチケット予約システムが、実際の座席の配置を正確に再現しています。
システム上でもユーザーが実際の配置をイメージできるため、スムーズにチケットを購入できるのです。
ユーザーが直感的に操作できるデザインとは、どのようなものでしょうか。ボタンを例に考えてみましょう。
たとえば誤って削除ボタンを押してしまい、以下のようなエラーメッセージが表示されたと仮定します。
▲「OK」というボタンが、削除を意味しているのかどうかが不明確
「OK」と「Cancel」のボタンがまったく同じデザインだと、ユーザーは混乱してしまいます。
そこで、片方のボタンを赤くしてみましょう。赤い方のボタンが危険な操作であることを、直感的にユーザーが認知できます。
また「OK」と「Cancel」だけでは機能の説明が不十分です。「OK」ではなく「Remove(削除)」と書いておけば、ユーザーはボタンを押すとなにが起きるのかをすぐ理解できます。
▲「Remove(削除)」にすると機能が明確に伝わる
このような、文字情報によりユーザーのタスク完了を支援することを「UXライティング」と呼びます。詳しくは以下の記事をご覧ください。
GoogleやSpotifyが採用開始した”UXライター”とは?マイクロコピーやコンテンツにもUXが必要!
Workship MAGAZINE
ユーザーは無意識のうちに、あらゆるECサイトの基本的なレイアウトを直感的に記憶しています。
このAmazonサイトのように、上部にナビゲーションバー、右上にカートボタンが配置されているデザインは、ECサイトとして一般的なものとして浸透しています。
馴染みのあるデザインはユーザビリティを向上させ、スムーズな買い物を促進できるでしょう。
ユーザビリティの向上には、エラー防止も欠かせません。間違って削除ボタンを押してしまったとき、確認メッセージが表示されたことで、ミスを回避できたという経験はありませんか?
たとえば、Gmailのエラー防止対策を見てみましょう。「添付しました」という文章を書いたにもかかわらず、ファイルが添付されていなければ、システムがポップアップで知らせてくれます。このシステムに助けられた方も多いのではないでしょうか。
また仮にユーザーがミスをしてしまった場合でも、カバーできる仕組みを整えておきましょう。アプリやWebページを閲覧していると、ときには間違ったボタンを押してしまうこともありますよね。操作中のミスは、どんなユーザーにも起こりうることです。
「もとに戻す」や「やり直し」のボタンを用意しておきましょう。
上の例では、左下の「Undo(もとに戻す)」ボタンによって、ユーザーのミスをカバーしています。
ユーザー自身の記憶に頼ることのない、分かりやすいデザインを心がけましょう。
たとえばこの例では、相手から送られてきたメッセージを見ながら返事を書けるシステムが採用されています。もし相手からのメッセージが表示されていなければ、ユーザーはメッセージの内容を思い出しながら返事を書かなければいけません。
またMicrosoft Wordの「最近の項目」機能も、同様の役割です。やりかけの作業があったとしても、この機能ひとつで簡単に思い出せるようになります。
パソコンを日常的に使う方は、Ctrl+Cなどのショートカットキーを活用することも多いはずです。
ショートカットキーを用意しておくことで、ユーザーの作業効率とユーザビリティを向上させられます。
効率化に一役買っているのは、ショートカットキーだけではありません。
たとえばInstagramに投稿されている画像にダブルタップするとハートがつけられる機能も、効率化によってユーザービリティを向上させています。
作業効率が圧倒的にUPする!便利すぎるMacのショートカットキー22選
Workship MAGAZINE
多くの情報をデザインに詰め込みすぎると、余計な負荷をユーザーにかけることになり、結果的にユーザビリティを損なってしまいます。
Google Chromeのホームページは、ミニマルで美しいデザインに仕上がっていますよね。
このように、ユーザーに必要な情報だけを提供し、過剰なデザインは避けるようにしましょう。
以下3つのルールを守って、ユーザー自身によるエラーの認識/診断/回復を可能にしましょう。
上記の例では、3つの条件すべてが満たされてますね。
年々複雑になっていくUIには、ヘルプが不可欠です。ユーザーの理解を手助けするような機能をつけておけば、自身で疑問を解決してくれます。
以下の例では、まずページの最上部で「Hello, what can we do for you?(=どのようなご用件でお困りですか?)」と疑問を投げかけています。その上で、ユーザーがひとりで疑問を解決できるように、検索バー、FAQ、コミュニティガイドを用意しています。
このようにヘルプ機能を充実させることで、ユーザーをサポートしていきましょう。
ユーザビリティを向上させるためには、A/Bテストやゲリラリサーチ等のテストももちろん有効です。しかし今回ご紹介した10のルールを意識すれば、それだけで使いやすいデザインが実現できます。
テストをする費用や時間がある方も、そうでない方も、ぜひこれら10のルールを反映した製品やサービスを作ってみてください。
(執筆:Rishin Thomas 翻訳:Asuka Nakajima 編集:Kitamura Yuu、Kimuya Yumi)
ビジネスを破滅へ導く”過剰なデザイン”5つの失敗
Workship MAGAZINE
”距離”を制したIxD(インタラクションデザイン)の魅力
Workship MAGAZINE
法人向けアプリのUIデザイン5つのトレンド。最高のUIは、UIがないこと
Workship MAGAZINE