No.31 視覚的に何であるかを示し文字で説明する - UIデザイン原則

カテゴリー

情報表示系

オブジェクトの存在や状態を視覚的に把握できるようにし、文字情報でそれを補足する。

01

✕ Bad

アイコンがなく文字だけで状態を説明

ファイル一覧を確認してください

プレゼン資料.pdf共有中

売上データ.xlsxロック

写真.jpg同期中

設計書.docエラー

テキストのみで状態が一目でわからない

✓ Good

アイコンで視覚的に示し、テキストで補足

ファイル一覧を確認してください

📄

プレゼン資料.pdfPDF • 2.4MB

👥 共有中

📊

売上データ.xlsxExcel • 1.2MB

🔒 ロック

🖼️

写真.jpg画像 • 3.8MB

🔄 同期中

📝

設計書.docWord • 0.8MB

⚠️ エラー

アイコンで視覚的に把握し、テキストで補足

02

✕ Bad

意味が分からないアイコンだけが表示

ツールバーのアイコンを確認してください

アイコンだけでは意味がわからない

✓ Good

ホバーで説明テキストが表示される

ツールバーのアイコンにカーソルを合わせてください

ホバーで説明テキストが表示される

03

✕ Bad

「エラー」と文字だけで視覚的な強調がない

システム状態を確認してください

データベース接続エラー

API サーバー正常

キャッシュ警告

テキストだけで視覚的な強調がない

✓ Good

赤い×マーク+「エラー」で分かりやすい

システム状態を確認してください

データベース接続エラー

API サーバー正常

キャッシュ警告

アイコン+ステータステキストで分かりやすい

No.31視覚的に何であるかを示し文字で説明する

オブジェクトの存在や状態を視覚的に把握できるようにし、文字情報でそれを補足する。

01

✕ Bad

アイコンがなく文字だけで状態を説明

ファイル一覧を確認してください

プレゼン資料.pdf共有中

売上データ.xlsxロック

写真.jpg同期中

設計書.docエラー

テキストのみで状態が一目でわからない

✓ Good

アイコンで視覚的に示し、テキストで補足

ファイル一覧を確認してください

📄

プレゼン資料.pdfPDF • 2.4MB

👥 共有中

📊

売上データ.xlsxExcel • 1.2MB

🔒 ロック

🖼️

写真.jpg画像 • 3.8MB

🔄 同期中

📝

設計書.docWord • 0.8MB

⚠️ エラー

アイコンで視覚的に把握し、テキストで補足

02

✕ Bad

意味が分からないアイコンだけが表示

ツールバーのアイコンを確認してください

アイコンだけでは意味がわからない

✓ Good

ホバーで説明テキストが表示される

ツールバーのアイコンにカーソルを合わせてください

ホバーで説明テキストが表示される

03

✕ Bad

「エラー」と文字だけで視覚的な強調がない

システム状態を確認してください

データベース接続エラー

API サーバー正常

キャッシュ警告

テキストだけで視覚的な強調がない

✓ Good

赤い×マーク+「エラー」で分かりやすい

システム状態を確認してください

データベース接続エラー

API サーバー正常

キャッシュ警告

アイコン+ステータステキストで分かりやすい