ユーザーエクスペリエンス分析: インターフェースデザインにおける構造設計

インターフェースの視覚的な階層を構築する要素には、色の目立ち具合、画像とテキストのサイズ、そして最も基本的なコンテンツの構成が含まれます。

構造設計とは、インターフェース コンテンツをグループ化し、インターフェース内の情報とデータを設計して構造化された方法で提示するプロセスを指します。

適切な構造設計により、インターフェース情報の伝達がより明確かつ高速になります。では、構造設計はどうでしょうか?

構造設計 - コンテンツのグループ化

線、ボックス、背景色を使ってグループ化する

これは最も一般的なグループ化の方法であり、UI デザインにおいて長い歴史があります。

線を使ってグループ化する

ボックスを使用してグループ化する

背景色のグループ化を使用する

線、フレーム、背景色など、これらはすべて目に見える境界です。これらの目に見える境界を導入する本来の目的は、情報の提示をより明確にすることですが、これらの視覚要素を追加すると、ある程度インターフェースの乱雑さも増します。そのため、空間の距離を利用してインターフェースのコンテンツをグループ化する人が増えています。

空間の距離を利用してインターフェースコンテンツをグループ化する

XP から win7 への変更は明らかです。

ウェブデザインでも同じことが言えます。ますます多くの新しいインターフェースがミニマリストのアプローチを採用し、数本の線と背景色のみを残し、ブロック間の距離を広げてグループ化することが多くなっています。

探検好きな人は、目に見える境界線なしに、なぜ距離に応じて情報を明確にグループ化できるのかと疑問に思うかもしれません。

20 世紀初頭、ドイツの心理学者のチームがこの現象について研究を行い、人間の視覚がどのように機能するかを説明しようとしました。彼らは多くの視覚現象を観察し、ゲシュタルト原理を提唱しました。この現象の原因は「近接」原理です。

ゲシュタルト原理：近接性

物体間の相対的な距離は、物体がどのように一緒に配置されているかを私たちが認識する方法に影響し、互いに近い物体は一緒に属しているように見え、離れている物体はそうではないように見えると言われています。

上の写真では、左側の星は水平方向に近いため、星が 3 列に並んで見えます。また、右側の星は垂直方向に近いため、星が 3 列に並んで見えます。

読者の皆さんは、もう一つの現象に気づいたでしょうか。私たちは自然に、上にある星を左と右の 2 つのグループとして捉えます。なぜそうなるのでしょうか? 2 つのグループ間の距離は、右側の列間の距離と同じです。これは実際にはゲシュタルト原理のもう一つの原理、「類似性」です。

ゲシュタルト原理: 類似性

類似性原理は、グループ化の認識に影響を与える別の要素を示しています。つまり、他の要素が同じであれば、類似したオブジェクトは一緒に属しているように見えます。上図において、グループを区別する要素は配置の方向です。

要素の類似性を利用してインターフェースコンテンツをグループ化する

この原則の適用について

上の画像では、「ドキュメント表示」グループには同様のアイコンがあり、「表示/非表示」グループには同じチェックボックスがあり、2 つの情報グループが明確に区別されています。

認証コードでの申請もございます

テキストの色を使用してグループ化します。

上記では、構造設計の 1 つのレベルであるコンテンツのグループ化について説明しました。構造設計には、情報とデータの構造化された表示という別のレベルもあります。

構造設計 - 情報とデータの構造化された提示

人々がウェブを閲覧するとき、多くの場合、すべての単語を注意深く読むのではなく、目的の情報を見つけるために素早くスキャンします。対象に関連する情報には非常に敏感ですが、それ以外の情報は見ても気づきません。そのため、簡単に閲覧でき、重要なポイントを強調表示することが重要です。

構造化されたデータは閲覧や理解が容易になります

同じデータが左側では乱雑に見え、区別が困難です。

構造化された数字は読みやすく、覚えやすい

銀行カード番号のデザイン

上の写真を見て、郵政貯金カードと中国工商銀行カードのカード番号をそれぞれ報告してください。郵貯カード番号を一度で正確に申告するのは難しいと思いますし、正しく申告できたかどうかも不安です。

さらに、完全なデータではない場合でも、分離されたフィールドによって便利な視覚的な構造を提供できます。

視覚的な階層により情報の構造を理解しやすくなります

左右に2つの段落があり、右側の構造レベルが明確です。

Web 環境では、ユーザーが簡単なブラウジング プロセスで必要な情報をすばやく見つけられるように、構造化された情報とデータが非常に重要です。

インターフェースデザインの 3 つの主要要素のうち、構造は基礎であり、深く研究する価値があります。構造を色やサイズと組み合わせて初めて、使いやすいインターフェースを設計できます。

原題: ユーザーエクスペリエンス分析: インターフェースデザインにおける構造設計

キーワード: ユーザー、エクスペリエンス スコア、インターフェイス、デザイン、構造、インターフェイスの構築、ビジュアル、ビジュアル階層、要素、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化