12 May 2012

Recursive Drawing のインタフェース

Recursive Drawing という作品, コンセプトもそうだがインタフェースがいいなと思った.

この作品自体はどこかの美術系の学校のプロジェクトで作られたもので, あたらしいプログラミングのインタフェースの研究成果らしい. コンポーネントを作ってそれを組み合わせる, (タイトルにもあるとおり) 繰り返しを視覚的に記述できる, というところだろうか?

このような作品の本筋とはそれるんだけど, 自分は全く説明を見ずに使い方がわかったので, インタフェースがいいなあと思った. 原因を考えてみる.

  • 何かできるところにマウスオーバーすると何らかの反応がある
    • 何もできないところは何もない
  • 左のパーツ部分, クリックすると ‘drag’ と出る. 実際にここを間違えてクリックする人が多かったんだと思う. ちゃんとテストしている感じが出てる
  • オブジェクトのサイズ変更. 縁部分にマウスを移動すると縁だけが色が変わる. そうでない場合は全体の色が変わりオブジェクトの移動になる
  • 移動や回転も色が変わるというフィードバックでわかる
  • 関連しているオブジェクトはメインのフィールドだけじゃなくサブメニューのところも連動して色が変わる. そうやって関連を明示している
  • 階層構造は右メニューのディレクトリのようなインタフェースで表現

まとめるとユーザができること, したことへのフィードバックが重要. それ次第でこんなにもわかりやすくなるという例だと思った