複雑な情報をどう見せる？

複雑で多数の切り口のある情報モデルを上手く見せている
ユーザーインタフェースについての情報交換スレです。

地理情報や3Dモデル、流体などの可視化の例は検索すればいろいろ
あるんですが、概念的なモデルについては検索では探し難いのです。
＃ゲームに実例が多いと思い、ム版やシュミレーション版でなくこちらに立てました。

例えば「地下街」の3D透視マップに下水の配管やセーブ可能場所、
悪魔出現度合いの分布を表示するのは想像し易いと思います。
しかし、「軍団」などの概念的なモデルで組織構成や職種分布、
所有兵器も把握できるようなUIは中々想像が難しいと思います。

ゲームなどで上手く表現している例を御存知の方、情報提供宜しくです。

・複雑で多数の切り口のある情報モデルを表現している。
・表現する対象の情報モデルはなんでも良い。
・二次元／三次元表示を問いません。
・ゲームの例に限りません。OSのUI、ビジネスソフト、CG作品でもOK。
　動かないコンセプトモデル、自分の考えたUIの絵でもOKです。
・インタラクティブに切り口を切り替えたり操作できれば尚良し。
・なるべく画の見れるURL付きでおねがいします。

以降、例を何レスか挙げます。

地下街の例に近い地理情報モデルの例。

モデル：鶯谷の町
切り口：ラブホテル分布、銀行、危険箇所(警察)、他の町一覧
ttp://www.lovehomap.com/uguisudani.htm

地理情報なので飲み屋街とかも加え易いですね。

音楽PVですが、1:52〜2:07に出てくる五角形の情報の空間表示と
操作は視認性が良さそうに見えます。(PerfumeのElectro World)

モデル：三人が戦っている電子世界？(多分)
切り口：不明
ttp://www.nicovideo.jp/watch/sm184039

アイコンを2D配置したページを3D空間に直交的に配置して
ページ毎に操作、殴る、などしていますね。

どうみてもこの板向きじゃないよね。
この板が過疎板と知っての暴挙かい？

「先進的UI」「可視化」で良く例に挙げられるのがデスクトップUIの
Looking Glassですが、XPのUIなどに比べてそれほど情報量は増えないですね。

モデル：動作中のウィンドウ
切り口：(多分)ウィンドウの使用頻度、実行中アプリ
ttp://www.atmarkit.co.jp/news/200701/11/lg3d.html

以下、ゲームに限りませんが情報提供ヨロシクです。

>>3
何このCapsule、と思ったら本人かw　しかしほとんど歌手の意味がないw

スレはとりあえず面白そう。

>>4
どこに立ててもスレ違いと言わるのは判ってますが、
多分「ＸＸゲームの全体マップの作りが良い...」と言うような話だらけに
なると思ったのでここにしました。すみません。
情報提供スレは過疎版の方が長続きしますから。

次世代ゲーム機はドリキャスしかもっていないので
最近のゲームは殆ど知らないんですが、PS3のLittle Big Planetです。

モデル：作成済の図形、作成中の図形、図形ライブラリ(？)
切り口：作成済の図形、作成/削り中の図形を重ねている(？)
ttp://www.nicovideo.jp/watch/sm602730

操作と図形の選択を階層化してるみたいなんですが、
どうやってユーザーに理解させてるんだろ。うむむ。

すれ違いじゃないけど情報は集まらなさそうだｗ
でも興味深い内容だね！

>>6
どうもです。ニコニコでPerfume見てたら、うちの６才の娘が

「えーっ！チョコレートディスコってアイマスが歌ってんじゃないの！？」

と叫んだのを聞いて色々と反省しています。。。

>>9
>情報は集まらなさそうだｗ

そ、そんなぁー　orz。

シュミレーションゲームとかに良い実装例がありそうな気がするんですが...
＃伝説のオウガバトル以来やっていない
「今のはこんなに進化してんだぜ」とか言う書き込み募集中です。

ビジネス系など、ゲーム以外で一般的な複雑な情報モデルの見せ方だとツリー構造があります。
eclipseのJDT(Java Development Tools)を例にします。

モデル：Java開発プロジェクト
　　　　(ディレクトリツリー、ソースファイル内の構造、プラグイン、ライブラリ)
切り口：プロジェクト内のファイルをツリー構造で表示
ttp://jpf.sourceforge.net/resources/images/ide-eclipse-04.png

モデル：同上
切り口：プロジェクト内のクラス継承階層を表示
ttp://upload.wikimedia.org/wikipedia/he/c/c9/Class_Hierarchy_View_Screenshot.png

Windowsエクスプローラなどで使われているディレクトリツリー(物理的な構造)と
クラスの継承階層(論理的な構造の一つ)を切替えて使います。

ゲームだと一階層を画面全体に表示して、コマンドで階層を上下するUIで
ツリー構造を表現することが多いかと思います。

>>11のような古典的なツリー構造だと「新人採用基準.doc」と言うファイルは
　ルート->「組織」->「部」->「課」->「人事課」
　ルート->「プロジェクト」->「新人採用」
のどちらにも置きたいんですが、ショートカットを作るなど管理が面倒です。

この問題を解決するためにファイルにタグを付けてファイルシステムを
DBっぽくしようとする動きがVistaに乗らなかったWinFSなどですね。
＃本当はBe OSみたいに本当にDBにしたかったらしいですが...

Mac OSXはかなり進んでいるようで、ファイルの拡張属性にタグを
自由に設定できるらしい。

ttp://journal.mycom.co.jp/column/osx/253/index.html

結果としてSpotlightによる検索によりディレクトリ構造に縛られない
見せ方が可能になっています。

モデル：ファイルシステム
切り口：メタデータのタグ、ファイル名、ファイル内の単語
ttp://journal.mycom.co.jp/special/2007/topstory_leopard/007.html

こういってしまうとあれだが、結局階層化して整理するしか無いんじゃねってのが。

つまるところ、アイコンや並べ方と言ったインターフェイスをどう工夫するか
とか、どういうポイントに注目して分類（階層化）するかといった話にならざ
るを得ないのではなかろーか、とか思ったり思わなかったり。

Spotlightは便利だけど階層構造が不要になるわけで無し。

階層構造は分類の一手法にすぎんだろ

他の方法教えてくれぃ。

>>15
フォルクソノミーでもいいし、クラスタリングでもいい。分野を絞ればもっといろんなのが出てくるだろう。
階層構造は木構造を用いる分類の一手法にすぎんよ。

たしかにどうやっても『階層構造が不要になるわけで無』いけど、
それは単にデフォルトで階層構造が使われてるからにすぎないし、
たとえばインターネットのページも階層構造だけど、
基本的に使うのはハイパーリンクによるグラフ構造じゃないか。
なら階層構造だけに拘らす、別の観点を探すほうがいい。

>>16
うーんなるほど、階層構造だけってのは言い過ぎだと言うことがよく分かったThx!

>>17
Google Mail登場時に階層構造をなくしたのがニュースになっていましたので、
データの表現として階層構造が非常に多いのは確かですね。

>>16
手動のタグ付けによる分類をフォルクソノミーって言うんですね。勉強になります。
http://d.hatena.ne.jp/keyword/%A5%D5%A5%A9%A1%BC%A5%AF%A5%BD%A5%CE%A5%DF%A1%BC

＃英語忘れたけど「タグ付けマンセー！」な人を「Tagging厨」と言うらしい。

情報モデルの構造とユーザーへの表現が同じ形式にできて、
かつユーザーが理解し易い構造があればソフトウェアに
取り入れられるんですが、中々難しいんですよね。

＃ERモデルやUML2.xだとそのままに近い表示をしていますが、表記法が
＃専用化されているので理解可能なユーザーは限定されてしまいますし。

で、どうしてもユーザーに見せる表現は構造を変換したり、
工夫しないといけないんじゃないか、でもどうやって？
-> ゲームソフトは頑張ってるかも -> スレ立て、に至ります。

で、Google Mailです。
>>12 の例と同じタグ付け(ラベル)による分類で、ツリー構造はありません。

 モデル：メールのスレッドの束
 切り口：スレッド毎に複数付けられるラベル単位。色の付いた楕円がラベル。
 http://gmail.1o4.jp/screen/label.png

受信箱は「Inbox」と言うラベルが付いた全スレッドを表示しているに過ぎません。
「試され太郎」と言うスレッドは「Inbox」「あとで返事」「携帯」の３つの
ラベルが付いています。＃「Inbox」ラベルは受信箱中では表示されない。

恐らくスター、下書き、送信済、ゴミ箱なども内部的にはラベルで実装されて
いるんではないでしょうか。

首都圏って道路の代わりに線路作るべきじゃね？

>>16で分類の手法として出して頂いたクラスタリングの例を出しておきます。

検索エンジンMooterのStar Burstクラスタエンジンです。

モデル：検索エンジンの検索結果
切り口：文法解析を行って生成したキーワードを使ったクラスタ分析
http://www.mooter.co.jp/moot/?keywords=UI&search=Star+Burst

上の例は「UI」と言う言葉をStar Burstボタンで検索した結果です。
ユーザーインタフェースと地方へのUIターンなどの検索結果が７つ以下の
クラスタ(グループ)に分類され、更に各クラスタをクリックすると、
絞り込まれた検索結果が表示されます。(最後にMooter検索ボタンを押す)

UI -> Windows -> AERO
UI -> ターン希望者 -> 対象 -> 無料職業紹介事業 -> 定住支援

＃クラスタリングは各データの値だけで「自動的に」複数の
＃グループに分類する解析方法で、外から分類基準は与えません。
＃この分類結果を見てグループ毎に特徴が見つけられるかを「人間が」
＃分析するのがクラスタ分析となります。詳しい説明は以下を参照。

http://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%BB%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0
http://psy.isc.chubu.ac.jp/~oshiolab/teaching_folder/datakaiseki_folder/11_folder/da11_01.html

SASやSPSSなどの統計解析ソフトウェアでクラスタ分析を行う場合、
素早く連続して分析を行うことはできなかったので、Mooterで

UI -> Windows -> AERO -> GLASS -(やっぱ戻って)-> DESKTOP

というように簡単に絞り込んだ分析結果同士を比較できたのは、
(人間が分析する能力を上げると思うので)目からウロコでした。
＃S言語ならSToolkitと言うGUIライブラリで作れそうです。

このスレが見られなくなってるな

test

test

UIは結構重要だよな
マニュアル読まない人が増えてるから、わかりやすくしないとすぐに放り出される