原文:https://dribbble.com/resources/ui-design-principles本記事は2021年12月6日に公開された情報を和訳したものです。英文を翻訳したものであるため、詳細や正しい表現は英文の原文を参照ください。ほとんどのユーザーは、 何か問題が発生した場合に初めてアプリまたはソフトウェアのUIデザインに気づきます。このため、優れたUIデザインはほとんど目に見えず、ユーザーは中断することなく自由に作業ができます。そして、UIデザインプロジェクトは多岐に渡りますが、UIデザインのすべての良い例は、同じ基本的な黄金のルールに従う傾向があります。この記事では、完全にシームレスで、事実上知覚できないユーザー体験を実現するために従うべき最も重要なUIデザインの原則について説明します。10の基本的なUIデザインの原則効果的なUIの設計とは、ユーザー体験からできるだけ多くの障害、ボトルネック、つまずき、および潜在的な混乱の原因を取り除くことです。とりわけその目的は、すべてのユーザーが流動的・直感的にナビゲートできる環境を作成することです。最小限の手間で目的を達成できるようにします。UIデザインのプロジェクトは、当然ながらすべて異なります。特に、細かい部分については。例えば、モバイルアプリケーションに適したものが、デスクトップソフトウェアやWebサイトにも適しているとは限りません。しかし、優れたUIデザインの一般原則は、すべてのプラットフォームやプロジェクトで一貫しています。ここでは、あなたが取り組むほとんどすべてのUIデザインプロジェクトに適用できる、むしろ、適用すべき一連の基本的なUIデザインの原則を紹介します。これらの黄金ルールを見逃してはいけません。UIデザインはシンプルに予測と先取りユーザーを運転席に座らせる几帳面で一貫性がある不必要な複雑さを避ける明確な道しるべを用意する誤りに寛容であること適切なフィードバックを与える機能の優先順位をつけるアクセシビリティを考慮したUIの設計1. UIデザインはシンプルにUIデザインのプロセスは、しばしば楽しいし、そうあるべきだと思います。しかし、目的を見失わないようにすることが重要であり、デザイナーの個人的な満足度は、常に目的よりも下にあるべきです。UIデザインの原則の中で最も重要なのは、誰のために、何のためにデザインしているのかを忘れないことでしょう。良いUIデザインは実用的であり、決して装飾的ではありません。独りよがりのデザインや過度にフォーマルなデザインは、不必要なノイズを生み出すだけで、ユーザーにとって本当に重要な要素からは目をそらしてしまいます。"UIデザインの一部がユーザーにとって実用的でないなら、それは存在すべきではない。"あなたのデザインを必要最低限のものだけに絞る。余分なものはすべて切り捨て、絶対に必要な要素だけを残すべきです。UIデザインの一部がユーザーにとって実用的な目的を持たず、自分の創造性を満足させるだけのものであれば、それは存在すべきではありません。2. 予測と先取りしかし、ユーザーにとって何が適切かを知るにはどうすればよいのでしょうか?UIデザインの最初のステップは、ユーザーとそのニーズを完全に理解することです。これができれば、ユーザーが次に何をしたいのかを予測することができます。そうすれば、ユーザーが必要とするツールや情報、リソースを、必要なときに提供することができます。そして、必要なときに必要なものを提供することができます。また、ユーザーがしたいことと一致しない場合は、デザインの初期段階で変更することで、ユーザーの行動を先取りし、最初から全く別の方向に誘導することができます。3. ユーザーを運転席に座らせるユーザーは、自分が本当にコントロールされているかどうかに関わらず、完全にコントロールされていると感じるべきです。これは、UIが裏方に回ることを意味します。もちろん、ユーザーが必要とするときには常に存在し、ユーザーが期待する場所にも存在しなければなりません。しかし、インターフェイスがユーザーに特定の行動を強要したり、ユーザーのために意思決定をしているように感じることはありません。たとえそれが事実であってもです。4. 几帳面さと一貫性習得すべき最も基本的なUIデザインのコンセプトの1つは、単に一貫性を保つことです。自社のプラットフォームだけでなく、他の国で採用されている業界標準に対してもです。優れたUIデザインプロジェクトは、車輪を再発明するのではなく、それを活かします。私たちは、必要に応じてイノベーションを行うことが必要です。つまり、一つ言えることは、「壊れていないなら、直さなくていい」のです。実際、壊れていても、直したくないと思うことがあります。しかし、考えてみてください。あなたのアイデアは、客観的には「より良い」、つまりより論理的であるかもしれませんが、ユーザーが期待しているものと違っていれば、ユーザーを混乱させるだけです。そして、それは実際には「良い」とは言えないのです。このルールは、パターンや用語などすべてに当てはまります。迷ったときには、最も広く理解されているものを採用しましょう。そうは言っても、新しい機能や変わった機能が導入された場合には、それまでの機能との差別化を図ることも同様に重要になります。これを達成するための最良の方法は、私たちが神聖としているUIデザインの原則の1つを破ることかもしれません。つまり、重要で新しい機能を目立たせる方法として、あえて矛盾を採用します。ただし、意図的な矛盾は、ずさんな動作や不規則な動作とはまったく異なることを覚えておいてください。5. 不必要な複雑化を避ける常に最小限のステップと画面数を目指しましょう。ボトムシートやモーダルウィンドウなどのオーバーレイを使ってデータを凝縮し、アプリの設置面積を減らします。同時に、情報を論理的、自律的、自己完結的に整理することも忘れてはいけません。実際、UIデザインの黄金ルールの1つは、タスクとサブタスクを、テーマに沿ってだけでなく、完全に実用的な方法で常にグループ化することです。とりわけ、誰も探さないようなページにサブタスクを隠さないでください。キッチンにシャワー、バスルームにテレビ、庭にクローゼットがあるとは誰も思わないでしょう。画面とそのコンテンツは、明確で論理的な分類法に基づいて整理します。"常に可能な限り少ないステップ数と画面数を目指す"同様に、タスクを完了するために必要なステップ数は、常に最小限に抑えます。1つや2つのアクションで済むときに、ユーザーに退屈なクリック数を提供しないようにしましょう。最も実用的なUIデザインの原則の1つである「スリークリックルール」は、ユーザーが目的とするページまで、3クリック以内にたどり着けることが理想であるという目安を設定したものです。特に、ユーザーが既に入力した情報の再入力を求めてはいけません。たった1つのフィールドに誤った入力をしただけで、フォームがすべての情報を削除し、最初からやり直させられた経験があれば、ユーザーがデバイスを壁に投げつけて完全にあきらめてしまう可能性が高いのは目に見えているでしょう。6. 明確な道しるべを用意するUIデザインの基本原則の6つ目は、直感的なレイアウトと情報の明確なラベリングです。初めてアプリを使う人にとっても、アプリを操作することが怖くて混乱するようなことがあってはなりません。むしろ、インターフェイスの探索は楽しく、ほとんど無意識のうちに行われるべきです。ページ構築は、シンプルで論理的であり、明確に指示されていることを確認してください。ユーザーは、自分がソフトウェアのどこにいるのか、どこに行くために何をしなければならないのか、迷うことがあってはなりません。また、どのようにして現在の場所にたどり着いたのかを覚えておくような負担をユーザーにかけてはいけません。その代わり、必要に応じてナビゲーションの視覚的な手がかりを提供します。そうすれば、赤ずきんちゃんは、大きな悪いオオカミに会う心配もなく、森から帰る道を簡単に見つけることができます。7. ミスに寛容であることどんなことにも失敗はつきものです。そして、ユーザーは失敗を経験したあと、それを改善しようとします。実際、ユーザーがアプリを使い始めたばかりの頃は、自分の行動に確信が持てないかもしれません。そのような場合でも、ユーザーを責めることなく、必要なときに簡単に元に戻せるように、迅速で寛容な取り消し/やり直し機能を実装してください。これにより、データの紛失や時間の浪費といったフラストレーションを避けることができるだけでなく、ユーザーが悪影響を恐れることなくアプリを探索し、変更を加えることができるようになります。8. 適切なフィードバックを与えるユーザーに進捗状況を知らせることが大切です。ユーザーの行動を受け取ったことを確認してください。物事が望ましい方向に進んでいることを知らせましょう。大きなアクション、重要なアクション、まれなアクションには、大きな、そして重要なフィードバックが必要です。一方、小さくて頻繁なアクションには、細かめの確認が必要です。"ユーザーに進捗状況を知らせ、アクションが届いたことを確認できるようにする"最も重要なUIデザインの基本は、情報を最小限にすることであることはすでに強調しました。しかし、ステータス情報ほど必要不可欠なものはないので、ユーザーに探すことを強要してはいけません。ステータス情報は常に簡単にアクセスでき、完全に正確であるべきです。ユーザーは常に何が起こっているのかを正確に知ることができ、わざわざ情報を探したり、アプリが反応しなくなったのではないかと不安になったりすることはありません。もちろん、エラーが発生することもあります。そのような場合には、ユーザーにわかりやすい形で知らせる必要があります。「エラーコード」と書かれたメッセージの後に不透明な数字が続くのでは、このような説明にはなりません。また、エラーメッセージを書く際には、ユーザーの責任ではなく、システムの誤動作によってエラーが発生した可能性も排除しないようにしましょう。9. 機能の優先順位明確なヒエラルキーの構築に失敗すると、真に合理的なUIをデザインすることができなくなります。すでに述べたように、すべてのスクリーン上のすべてのアイテムは、ユーザーエクスペリエンスにとって絶対に必要なものでなければなりません。そして、プロトタイピングの段階では、余計なものはすべて取り除いておくべきです。しかし、必要なものの中にも、どうしても必要なものがあるはずです。そして、UIデザイン原則の第9項では、このヒエラルキーをUIデザインに明確に反映させるべきだとしています。ユーザーは主にXをしたいと思っているでしょうし、Yもしてもらいたいと思っているかもしれません。ボタンやテキスト、その他の要素のサイズを変更するなど、簡単な方法で構いませんが、この2つの機能をZよりも目立たせましょう。10. アクセシビリティを考慮したUIデザインすべてのユーザーが自分や自分の知っている人と同じだと思ってはいけません。これは、技術的な知識や能力、世界観などすべてに当てはまります。アプリは、さまざまな文化的背景を持つ人々によって使用されます。現実的には、社会的・文化的慣習のすべての可能な変化を考慮することは期待できませんが、自分のやり方が唯一の論理的な方法だと自動的に決めつけないでください。例えば、世界の多くの地域では、人々は右から左に向かって読むため、左から右に向かってオブジェクトを配置しても、必ずしもすべてのユーザーが左から右に向かってオブジェクトに出会うとは限りません。答えではなく、疑問を持ってデザインする。使っている色など、ごく単純なことでも、人によって見え方が違います。これは主観や文化の違いだけではなく、世界の人口のかなりの部分が色覚異常であることからもわかります。実際、色はUIデザインの要素や機能を差別化する有効な手段ですが、色だけに頼ってはいけません。むしろ、色と形などの変数を組み合わせることで、重要な機能をすべてのユーザーに有効な形で差別化することができます。UIデザインの黄金律私たちは、空気が汚染されたり、空気が不足したりするまで、自分が吸っている空気に気づかない傾向があるように、優れたUIデザインは、ユーザーが活躍しても、デザイン自体がほとんど見えなくなるような、摩擦のない環境を作り出します。優れたデザイナーは、ここまで見てきたようなシンプルなUIデザインの原則に従うことで、より効果的なUIを作成し、ユーザーがUIをほとんど意識しないほどインタラクションを促進できることを知っています。今回ご紹介した10個のUIデザインの基本を次のプロジェクトに適用し、UIデザインの成功がいかに強力なものであるかを実感してみてください。