Web デザインにおける Less と More について語る (写真)

Less is More は多くのデザイナーのキャッチフレーズです。これは建築界の巨匠ルートヴィヒ・ミース・ファン・デル・ローエによって初めて提唱されました。シンプルさを主張し、過度な装飾に反対するデザインコンセプトです。これを基に、デザイナーたちはこの考え方を継続的に改良し、再解釈し、今ではデザイン業界における基本的な理論と原則となっています。この理論の支持者は、ミニマリストデザインを採用し、不要な詳細を削除することで、製品とユーザーに大きなメリットをもたらし、より良い結果を生み出すことができると信じています。
伝統的な産業では、「Less is More」の成功例が数多くあります。
1979 年、ソニーは、ほとんどのユーザーが録音よりも再生をはるかに望んでいることに気づき、従来のテープレコーダーの録音機能を削除し、当時必須と考えられていた外部スピーカーも削除しました。次に、残りの部分を小さな箱に入れて、ステレオヘッドフォンとペアリングします。世界中で人気のウォークマンポータブルプレーヤーです。

1984年、IBMはマウスとトラックボールの構造を簡素化したトラックポイントを発明しました。これにより、モバイルデバイス上のマウスの機能が効果的に置き換えられ、トラックボールのスペースを占有しすぎるなどの欠点が解決されました。現在、トラックポイントは Thinkpad ノートブックのシンボルとなっており、同様のデザインが他の多くのブランドのラップトップでも使用されています。

2007年、Appleは携帯電話のボタンを簡素化し、物理キーボード全体を廃止してiPhoneを発売した。世界中でスマートフォン革命を牽引してきました。

これらはすべて、レスのアイデアによってもたらされた大きな成功です。しかし、実際の設計作業では、このアイデアを十分に深く理解していないために、間違いを犯してしまうことがあります。したがって、具体的な設計を Less にするか More にするかは、実際の状況に基づいて決定する必要があります。たとえば、次の例をご覧ください。
1. 百度の商用製品の詳細
Baidu Promotion の Fengchao システムでは、アカウントの基本構造は、アカウント > プロモーションプラン > プロモーションユニット > キーワードです。図に示すように:

つまり、1 つのアカウントに複数の「プロモーションプラン」が存在する可能性があり、プロモーションプランに複数の「プロモーションユニット」が存在する可能性があり、プロモーションユニットに複数の「キーワード」が存在する可能性があります。ここで PM は新しい機能を考案する必要があり、次のようなスケッチを提供します。

PMは次のように説明した。「ロケーターが必要です。これにより、ユーザーは「アカウント全体」、「プロモーションプラン」、「プロモーションユニット」、または「キーワード」を検索することを選択できるようになります。」私はそれらを簡単に描き、「少ないほど良い」という原則に基づいて組み合わせました。 ”
それを読んで混乱し、「アカウント全体を見つけたい場合は、どうすればいいですか？」と尋ねました。
PMはこう返答した。「すべてのアカウントで、何も選択せず、直接「表示」をクリックしてください。 ”
私：「めまいがする…」
これは、インターフェース上のコンテンツを合理化する一方で、ユーザーエクスペリエンスを犠牲にする典型的な例です。このデザインは最もシンプルで省スペースですが、ここでは機能が明確に表現されていません。議論の結果、次のように変更されました。

つまり、元のドロップダウンボックスと入力ボックスの前に 4 つのオプションが追加されます。これら 4 つのオプションは、分析の 4 つの異なるレベルに対応しています。レベルを選択した後でのみ、そのレベルの特定の選択コントロールが下に表示されます。この変更により、ユーザーのタスクは次の 2 つのステップに分割されます。1. 分析するレベルを選択します。 2. 特定の分析オブジェクトを選択します。プロセスは長くなり、クリック数が増え、インターフェース上の要素はより複雑になりましたが、メリットは明らかです。プロセス全体がよりシンプルでスムーズになり、ユーザーはほとんど何も考えずに始めることができます。したがって、インターフェース要素の「詳細」は、実際のユーザーエクスペリエンスを向上させます。「Don't make me think」という本に書かれているように、「クリックするたびに、考えずに明確かつ曖昧さのない選択をすれば、何回クリックしても問題ありません。」
2. ウェブページ上の斜体文字
多くの英語の Web ページでは、デザイナーが一部のテキストを斜体にすることを選択します。英語の場合、斜体は特定のフォントではより美しく見え、この効果は特定の状況では特別な意味を持ちます。たとえば、Wikipedia では、図に示すように、本のタイトルや注釈を書くときに斜体がよく使用されます。

上記のスクリーンショットでは、「この記事は…のラインについてです」という行は注記であり、iPhoneを紹介する本文ではないため、Wikipedia では斜体を使用しています。これらのスタイルを適切に使用すると、読者の読書効率が向上し、美観も向上します。
しかし、斜体自体については、中国語のウェブページにはあまり適していないと思います。理由は簡単です。中国語の Web ページでよく使用される 12 ピクセルのフォントサイズでは、斜体の中国語文字の認識率が低くなります。たとえば、次のスクリーンショットは、航空会社の Web サイト上の 2 つの異なる言語での同じ機能コントロールを示しています (問題をより明確にするために、繁体字中国語を選択しました)。

スクリーンショットから、左側の英語バージョンの斜体テキストが Arial フォントで適切に表示されていることがはっきりとわかります。見やすくて美しい。しかし、右側はもっと悲惨です。中国語の 12 ピクセル Songti フォントは、斜体スタイルを追加すると認識度が大幅に低下します (これは、ルートヴィヒ・ミース・ファン・デル・ローエが「過剰装飾」と呼んだものに少し似ています)。特に、画数が多い漢字は重なって見えることがあります。
明らかに、この例では、中国語版を設計する際には複雑さを軽減し、斜体スタイルを削除すると、より良いエクスペリエンスが提供されます。
3. 再生ボタンと電話ボタン<br />多くの電子製品では、デザイナーは再生ボタンを表すために右向きの三角形の記号を使用します。これは業界標準となっています。このシンボルを見れば、自然と正しい理解が得られるでしょう。したがって、同様の機能を再度設計するときには、このシンボルを直接使用できます。

上の写真に示されている 3 つのまったく異なる再生ソフトウェアでは、再生機能を表すボタンを簡単に見つけることができ、グラフィックの下に「再生」という単語を書く必要はありません。これによりスペースが節約され、機能性の定義も伝わります。ここでの「Less」は「More」の効果を実現します。
しかし、これは、製品のボタンを設計するときに、テキストなしでグラフィックのみを提供する Less アプローチを引き続き使用できることを意味するのでしょうか? 答えは間違いなく「いいえ」です。例えば：

これらは、あるブランドの電話機のボタンです。数字キーの上にある 3 つのボタンの具体的な意味を推測できる人はいますか? 特に、1 番目と 3 番目のボタンです。この製品の設計者を除いて、ほとんどのユーザーは、最初は正確な結論を導き出せないかもしれません。この製品を使用するユーザーにとっては、機能上の混乱だけでなく、さらに重要なことに、製品を操作するときに、ボタンを押した後に何が起こるのかまったくわからないという問題に直面します。期待がなければ、多くのユーザーはそれをまったく試さないことを選択するため、機能自体は便利であっても、うまく宣伝することは難しくなります。もし Less が不明瞭な表現という犠牲の上に成り立っているのであれば、それは Less の本来の意図から外れてしまいます。そういった細かい部分に関しては、ボタンの下にテキストを入れたり、グラフィックを直接テキストに置き換えて表現したりすることを検討すべきだと思います。
要約する
1. シンプルなデザインにより、製品の使用がよりスムーズかつ効率的になり、より優れたユーザーエクスペリエンスが提供されることがよくあります。
2. しかし、私たちは時々「Less is More」という言葉を十分に理解していないことがあります。当初の意図は、盲目的な「シンプルさ」ではなく、「過剰な装飾」に反対することでした。
3. Less は UI のシンプルさだけではなく、プロセスと認知の面でのシンプルさと使いやすさも重要です。 UI を合理化するためにプロセスを台無しにすると、結果は逆効果になります。
4. より核となる原則は、今でも古典的な格言である「私に考えさせないでください」です。
著者: xidea

<<: 基本構造、ドキュメントタイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

>>: nginxの基礎を学ぶ