mgn901のUI設計三原則
mgn901.iconがUIの設計を行う中で経験的に見出した原則。
mgn901.iconのUI設計三原則
1. 問題に関係する情報を分類する。
解決したい問題に関する情報を分類する。
情報がもつ属性を明らかにする。
5W1Hなど
エンティティを明らかにすることに重なる。
2. 情報へのパス(対応可能なユースケース)を増やす。
エンティティが属性を通して別のエンティティと繋がっていることがある。
パスがある、ユースケースをサポートしているというのは、一方のエンティティから他方のエンティティにアクセス可能であるということである。
3. 情報をフィルターする方法を用意する。
同じ種類の情報、エンティティが大量にある場合、属性が特定の値をもつことを条件とした絞り込みができるようになっている必要がある。
絞り込みはフィルターのUI以外でも行える。目grepで使いやすくなるのであれば、それでもよい。 効果
それぞれのユーザの直観に従った操作をサポートできる。
ユースケースが無限にあり得る状況下で、様々な使い方をサポートすることが可能になる。
限界
情報を整理するためのUIしか作れない。
あらゆるアプリケーションが情報の整理と捉えることもできそうだが……。
限られたパターンのUIしか作れない。
エンティティ横断的により幅広く適用することでどうなるか?
東京学芸大学 教室検索(非公式).iconを例にした適用例
1. 教室の空き状況は時限ごとに変化するので、「時限」「教室」を扱うアプリになる。
2. 分類した情報から考えられるユースケース
空き教室 by 時限: その時限の空き教室を知りたい
空き時限 by 教室: その教室の空き時限を知りたい
3. 建物ごと、フロアごとに整理して表示
https://gyazo.com/4805d37a9d864404ec5274f9539e625c