COLUMNお知らせ・コラムSCROLLホームお知らせ・コラムホームページ制作のUIデザインに欠かせないユーザビリティの10原則ALLすべてNEWSお知らせMARKETINGマーケティングコラムDESIGNデザインコラムMANUALマニュアル・資料RECRUIT採用情報DESIGNホームページ制作のUIデザインに欠かせないユーザビリティの10原則2023.10.10ユーザーインターフェースデザイン(UIデザイン)の品質を向上させることは、製品やサービスの成功に繋がる決定的な要素のひとつとなっています。Design)」という原則があります。今回は、UIデザインの分野で不可欠な指針である「ユーザビリティヒューリスティクス」について、その重要性と具体的なヒューリスティクスについてご説明します。documentation)2.今回のまとめユーザビリティヒューリスティクスとはユーザビリティヒューリスティクスとは、ユーザーインターフェースデザインの際に考慮すべき重要な原則やガイドラインのことを指します。これらのヒューリスティクスは、ユーザビリティを向上させ、ユーザーがシステムやアプリケーションを効果的かつ効率的に使用できるようにするのに役立ちます。Nielsen)が提唱したもので、ユーザビリティを向上させるための指針として今現在でも広く受け入れられています。Design以下は、これらの10のユーザビリティヒューリスティクスの要約です。status)このヒューリスティクスでは、ユーザーがシステムの現在の状態や進行状況を常に把握できるようにすることを推奨しています。クリックの前後で画面上の変化が一切無いと、ユーザーは今どういった状況なっているのか理解することができません。ユーザーが現在の状況を理解することができないと、「何の動作をしているのか」「何が動作していないのか」「正常に動いているかエラーが起きているか」「次の動作をどうするべきか」などの判断も誤ってしまう恐れがあります。解決方法としては、進行バー、通知メッセージなどを使用して自分がクリックに失敗していたのか、エラーが起きているのか、画面に変化をつけて可視化させるようにしましょう。world)このヒューリスティクスでは、ユーザーが日常的に馴染みのある単語や見た目、概念を使用することを推奨しています。現実世界の慣例に従って、情報が自然かつ論理的な順序で表示されるようにします。上下左右といった方向や、ボタンの配置などにも気を配るようにしましょう。「進む」ボタンは進行方向に置くようにしたり、実在する物であれば見た目や配置を揃えるようにすると、ユーザーが混乱せず単語の定義を調べなくても意味を理解できるようになります。freedom)このヒューリスティクスでは、ユーザーは簡単にエラーを修正したり、戻ることができるようにすることを推奨しています。オンラインショッピングサイトにおいて、ユーザーがカートに誤って追加した商品を削除する際の「削除ボタン」や、前のページに戻る「戻るボタン」などのことを指します。このように、ユーザーが行動を中断するためのアクションをページ内に設けることで、ユーザーは自分が起こした間違いやトラブルをすぐに解決できるようになります。ユーザーが自分自身でシステムをコントロールできていると感じらることができれば、ストレスなくページを閲覧し続けられるため、システムの利用率や売上を増加させることにも繋がるでしょう。standards)このヒューリスティクスでは、類似の操作や機能は一貫性のある方法で提供し、一般的なインターフェース規範に従って制作することを推奨しています。この「一貫性」には、「内部の一貫性」と「外部の一貫性」の2種類があります。内部と外部の一貫性を持たせることで、ユーザーにとって予測可能な環境を提供することが可能です。内部の一貫性とは、WEBサイトやアプリなどのサービスの中での統一性のことです。ボタンのスタイル、フォント、カラースキーム、アイコンなどのデザインなどを一貫させたり、同じ操作やタスクを異なる部分で異なる方法で実行しないように操作性も一貫させることが重要です。これにより、ユーザーは異なる部分で同じ操作や情報を見つけやすくなります。外部の一貫性とは、WEB業界などで確立されている規則性のことです。ECサイトには検索機能やカートボタンがあることや、スワイプなどの動作でページを戻すといった、多くのWEBサイトやアプリに共通する、規則性が外部の一貫性です。ユーザーが日常的に馴染みのある商品と見た目や動作が似ていれば、新しく触れるWEBサイトでもユーザーは簡単に操作し閲覧できるようになります。prevention)このヒューリスティクスでは、エラーを最小限に抑え、エラーメッセージがわかりやすく、解決策が提供されるようにすることを推奨しています。種類があるとされています。スリップは、不注意によって引き起こされる「無意識のエラー」です。WEBサイトで起こりうるエラーには、誤タップ、日付やラジオボタンなどの選択ミスなどが無意識のエラーに該当します。一方でミスとは、ユーザーのメンタルモデル(無意識的にイメージしている行動や思い込みのこと)とWEBデザインの不一致が原因となる「意識的なミス」です。WEBサイトで起こりうるミスには、ピクトグラム見た目が本来の色や形と異なっていたりするなど、ユーザーに正しく認識されないことなどが意識的なミスに該当します。解決方法のひとつとしては、ユーザーの行動をシステム側である程度制限し、ミスが起きないWEBサイトのサービスを制作することが重要です。アクションを実行する前にその状態を確認して確認用のオプションをユーザーに表示したり、クリックして欲しくないボタンを無効化をするなどといった機能は、スリップの防止に役立ちます。recall)このヒューリスティクスでは、ユーザーにインターフェース内の情報を強制的に想起させるのではなく、認識できるようにすることを推奨しています。長いチュートリアルなどのコンテンツの場合、ユーザーにチュートリアルを暗記させるのではなく、状況に応じたヘルプを提供するようにしましょう。人間の短期記憶には限界があるため、認識を促進するインターフェイスによって、ユーザーが記憶しておかなければならない情報量が軽減することがおすすめです。WEBサービスの使用方法や情報についても同様です。ユーザーが使用方法を参照したくなったときのために、アプリ内でいつでも説明を確認できるようにしておきましょう。use)このヒューリスティクスでは、ユーザーの経験値に合わせて機能を提供することを推奨しています。経験値が低い初心者も、経験値が高い経験者も、使用するWEBサイトは同じです。そのため、どちらかのユーザーだけに機能を合わせるのではなく、それぞれの経験値に合わせた機能を提供する必要があります。チュートリアルのような一度確認すれば良いコンテンツなどは経験値の高いユーザーはスキップできるようにボタンを設置すると、経験値の高いユーザーの操作が高速化されるのでストレスの少ない設計にすることが可能です。ユーザーが頻繁に行うアクションも調整できるようにすると、ユーザーは自分に合った方法を選択できるようになるため、より良いWEBサイトになるでしょう。表示コンテンツをパーソナライズしたり、キーボードショートカットやタッチジェスチャなどのアクセラレータを提供することも有効的です。design)このヒューリスティクスでは、WEBサービスに無関係な情報や、必要とされないコンテンツを含めないようにすることを推奨しています。インターフェース内の余分な情報単位は、必要な情報の邪魔となり可視性を低下させてしまうからです。WEBサービスやアプリの視覚的なデザインを整え、魅力的に見せることがそのブランドへの印象や信頼性の向上に繋がります。単純に情報を削るだけでは、ユーザーが判断を行うのに必要な情報が欠けてしまう可能性があります。情報を取捨選択し、コンテンツとビジュアルデザインが本質的なものに焦点を当てているか、インターフェースの視覚要素がユーザーの主な目標をサポートしているかを確認するようにしましょう。errors)このヒューリスティクスでは、エラーが起きてしまった際に、何が問題だったのかを専門用語を避けて、ユーザーが理解できる言葉で伝えたり、解決策を提案することを推奨しています。エラーがエラーであると認識させることも重要です。赤字や太字、色のついた背景などの装飾を用いて、通常テキストと差別化し、強調するようにしましょう。documentation)このヒューリスティクスでは、ユーザーのためのヘルプとドキュメントコンテンツを用意しておくことを推奨しています。WEBサービスを利用する際には、可能であれば追加の説明が必要ないのがベストです。ユーザーがタスクを完了する方法を理解させたりするなど、ドキュメントの提供が必要になる場合があります。この場合は、ヘルプとドキュメントコンテンツは検索しやすく、ユーザーのタスクに焦点を当てたものである必要があります。簡潔にして、実行する必要がある具体的な手順をリスト化するようにしましょう。今回のまとめ今回は、UIデザインの分野で不可欠な指針である「ユーザビリティヒューリスティクス」について、その重要性と具体的なヒューリスティクスについてご説明しました。ご説明した10項目のヒューリスティクスは、UIデザイン全体に共通する“原則”です。ほとんどのユーザビリティの問題は、10項目のうちのどれかに該当する可能性が高いので、この10項目のヒューリスティクスをしっかりと理解してUIデザインに反映するようにしましょう。著者情報AUTHORWEBデザイナーA.K.不動産会社でグラフィックデザイナーとしての勤務を経て、株式会社オンカに入社。アミューズメント施設やサービスサイトなど、ユーザーに魅力を訴求する大衆的なデザインを得意とし、長年培ってきたデザインのノウハウに基づきながらも顧客の要望を汲み取った柔軟な対応力でホームページ制作に尽力している。