実例から学ぶ、良いデザインと悪いデザインの見分け方 | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

ユーザー体験の良し悪しの理解は主観的になりがちです。また、正確に表現することも困難です。しかし、幸運なことに、優れたユーザー体験の構成を理解する指針として使えるいくつかの原則が存在しています。

こうした原則の理解は重要な要件のひとつですが、それらの原則が実際にどのように現れるのかを見ることも大切です。この記事では、いくつかUXデザインの良い例と悪い例を確認し、ニールセン・ノーマンのヒューリスティックスのような原理が、現実世界でどのように表現されているかを探ります。

現在の状態を示す

ヤコブ・ニールセンによって開発されたヒューリスティックのひとつである、「システム状態の視認性」は、ユーザーのアクションの後、製品やWebサイトの内側で何が起こっているかが、適切な応答時間内に通知されるべきであることを伝えています。

すなわち、システムが何をしているのかという情報をタイムリーにフィードバックしないアプリケーションは、よりネガティブで混乱した体験を生み出す可能性が高いということです。例えば、ドキュメントを保存する場面を考えてみます。ユーザーとしては、「保存」をクリックしたときに、その操作が認識されたことを確認したいと望むでしょう。操作に対する応答が遅れたり表示されなかったりすると、ユーザーは疑問を感じたままの状態に置かれます。

保存ボタンのユーザーとのインタラクションの比較。良いUXは読み込み中を示すアイコンを生成し、保存が成功したことをユーザーに通知する。一方、悪いUXは突然表示が変化して保存されたことを通知する。

明瞭で理解しやすい言葉の使用

優れたユーザー体験の条件のひとつは、ユーザーが理解して行動に移すことができる言葉で話しかけることです。高度に専門化されたアプリケーションでは、専門家しか理解できないような専門用語を多用するという罠に陥ることが珍しくありません。たとえユーザーが用語を知っていたり、意味を推測することができたとしても、ストレスの高い状況では、高度に専門的な言語のためにユーザーが間違えたり、さらにはコストの高いミスにつながる可能性もあります。

製造工場で使用されるソフトウェアのUIにおける良いUXの例は、簡潔で理解しやすい「車両を配備」、悪いUXの例は、複雑で把握しにくいオプション「自律制御シーケンスを開始」を表示。

上の例では、右側のUIは、技術工学的な言語を用いて自律型ロボットが実行するアクション「自律制御シーケンスを開始」を表示しています。左側のUIは、普通の人が読んでも認識できる言葉「車両を配備」に翻訳されています。左側の方が、誤解を受けることは少ないでしょう。

色と階層の効果的な使用

製品の視覚的な美しさは、ユーザー体験のデザインプロセスにおける最優先事項ではないかもしれませんが、視覚的なデザインを軽視すると悪い体験につながる可能性があります。クリアで階層的なビジュアルデザインと、十分に考慮された体験デザインを組み合わせれば、楽しく理解しやすいデジタル体験を実現し、より高い効果につなげることができます。

タイポグラフィ、色、構造を使用して視覚的な構造を提供する良いUXと、単なるテキストのブロックで階層構造を持たない悪いUXの比較。

上の例では、左右どちらも提供されている情報は同じです。しかし、右の例は視覚的な形式や階層がなく、色使いに対する論理も見られません。左の例では、タイポグラフィとカラーの組み合わせにより情報が構造化され、ユーザーに操作の指針とコンテンツの重要性を示しています。

エラーの削減

勘違いや操作エラーは起きるもので、完全に避けることはまず不可能です。誰かがごく稀なバグに出会う手順を実行したり、アクション完了のために誤ったボタンをクリックした時には、エラーを処理できる体験が提供されるべきです。

また、優れたユーザー体験は、エラーが発生したことをユーザーに通知するだけでなく、積極的にエラーを避けるようにデザインされるべきです。

このソフトウェアのUIでは、良いUXはエラーの原因となるオプションを隠すことでエラーを防ぎ、悪いUXはエラー引き起こす可能性に関係なく全てのオプションを提供する。

エラーを防ぐ一般的な方法のひとつは、無効なアクションやオプションを隠すことです。ドロップダウンメニューからのアクションの選択はこの良い例です。たとえば、ユーザーが車両からの荷下ろしする場合、それを実行するには、車両に積載物がなければなりません。もしすべてのオプションが利用可能で、ユーザーが空荷の車両からの荷下ろしを指示したら、システムから失敗が通知されたときに、ユーザーは不満を抱くでしょう。それを避けるために、システムは事前にそのアクションが不可能であることを把握し、ユーザーが選択できないようにするべきです。

エラー対応の手順を伝える

避けようのないエラーが発生したときは、ユーザーとのコミュニケーションが重要です。その際、特に重要なのは、使用する言葉、そのトーン、そしてデザインです。技術用語やデータベースのエラーについて学ぶことに、ユーザにとってのメリットはありません。エラーの理由の明確で理解しやすい説明（可能な限り）を示し、エラーを修正するための指示を提供しましょう。色も、エラーや警告の重要度を示すために役立ちます。

エラー処理の良い例と悪い例。良いUXは発生した場所とそれを解決する方法について明示的であるが、悪いUXは、フィールドを明示的に示すことなく曖昧なメッセージを提供する。

上の例では、左右ともに同じエラーが発生しています。右の例では、エラーメッセージはバックエンドシステムから直接渡されたものです。左の例では、メッセージは理解しやすい言葉に変換され、解決のヒントや外部ドキュメントへのリンクも追加されています。分かりやすく翻訳され、状況に即したたメッセージに加えて、詳細なドキュメントにアクセスできるリンクを提供することは、暗号のようなコードを表示するよりもはるかにユーザーがエラーを修正する際の役に立ちます。

また、エラーメッセージの位置と表示方法にも配慮するべきです。入力内容の検証に対するフィードバックは、その状況に応じたものであるべきです。悪い例では、エラーはどのフィールドにも適用できそうに見えますし、いずれにも関連していないようにも見えます。良い例では、問題のあるフィールドとそれを参照するエラーメッセージが同じカラーで強調表示されているため、相関関係を視認できます。さらに、メッセージは関連するフィールドの直下に配置されています。

ユーザーを念頭に

良いユーザ体験の例も悪いユーザ体験の例もどちらもたくさん存在しているため、もしすべての例を示すのであれば、何冊もの本をを書かなければならないでしょう。それよりも覚えておく価値のあることは、既存のガイドラインと原則に従うことです。慣習に従うこと、そしてコードに合わせるのではなく、ユーザーの体験を楽にする手段を考えることで、より良いユーザー体験に一歩近づくことができるでしょう。

この記事はEye-Opening Examples of Good & Bad UX Design（著者:Matt Rae）の抄訳です