デザインは説明的でなければならない

まずはこのフォームをご覧ください。
どう感じますか？

次にこちらのフォームをご覧ください。
こちらはどう感じますか？

後者は「見やすい」「わかりやすい」と感じたはずです。
反対に、前者はおそらく「見にくい」「わかりにくい」と感じたはずです。

ではなぜ「見にくい」「わかりにくい」のでしょうか？
結論から言うと、このスライドは**「説明的でない」**からです。

人は無意識に規則性を探します。¹
順を追って説明します。

このフォームを見た時に、
ユーザーは、「青色の四角形」に関して以下の様な説明を定義することを考えます。

青色の四角形の説明
各記入欄のタイトルの文末にある「青色の四角形」は、「ユーザーに対する注意を促すバッジ」である

しかしながら、
フォーム末尾にある送信ボタンは上記の定義に反することになり、
送信ボタンを**「説明できない」**ことになります。

**「ユーザーに対するアラートのバッジ」**と、
**「ユーザーがイベントをトリガーできるボタン」**は、
機能が全く異なるものなので、**説明（デザイン）**も変えましょう。

緑色の四角形の説明
縦一列に並んだ「緑色の四角形」は、「ユーザーに対する注意を促すバッジ」である

青色の四角形の説明
「青色の四角形」は、「イベントトリガー」である

「アプリの概要」では、文頭にインデントがあり、まずこの時点でユーザーは、

「見出し以下の文章はすべてインデントされる」

という規則を考えますが、すぐに次の行で棄却され、

「見出しの下の一文はインデントされる」

という定義を考えつきます。
しかしこれもまたすぐに「問題」という見出しのところで棄却されることになります。

「見出し以下の文章はインデントなしで始まる」

というシンプルな規則に統一しましょう。

規則を定義し、説明的なデザインにすると以下の様になります。
ずいぶん見やすくなりませんか？

以下が説明のリストです。

説明は長くなりすぎない様に気をつけてください。
長くなりすぎるとユーザーが規則を覚えられなくなります。

記事では省略しましたが、このドキュメントになるまでに、以下の修正を加えました。

気づけたでしょうか？

おわりに

よく「シンプルなデザインを心がける」等のメソッドがインターネットに落ちていたりしますが、
「説明的なデザイン」を心がけた結果「シンプル」になるものです。² ³

などを意識しつつ、「説明」が膨大にならない様に気をつけ、普段のクリエイティブに活かしてみてください。