先日、とてもクールなデザインのサイトを見つけたので、このBlogに紹介しました。それが
Shared Source Initiative
http://www.microsoft.com/resources/sharedsource/default.mspx
です。Silverlightが使用されているのは、中央のコンテンツのトップ部分です。詳細とみてみると、後ろにHashTableのコンストラクタ部分のコードがスクロールされており、その前に様々な人種の人たち、そして、タイトルとタブ切り替えようのボタンが最前列に配置されている(様に見えます。)
レオナルドダビンチは言いました。
「遠くにあるものほど青くかすむ。」
さて、ハッシュテーブルの部分は青くかすんでますね。もし人に、このページを数秒見せて隠した状態で、コードは何色だった?という問いをした場合、数人は白と答える可能性があります。それは遠くにあるものは霞んで見えるので、コードが遠くにあると認識した場合は、白色のコードがあると思ってしまうからです。実際には青い色がかったグレーです。トップのタイトル部分とボタン以下に青いレイヤーが存在しているようにも見えますが、実装自体はよくあわかりません。
さて、今回の投稿のインタラクションにまだ入っていませんが、さらに、余談です(かえってこれねー)Shared Source Initiativeのページを開いた場合に、アニメーションが走ります。結構、長いですよね。しかし、アニメーションの部分は実際のコンテンツの中では単なるタブの切り替えボタンでしかないので、無視しようと思えば無視できます。無視できる人は二回目以降の訪問者となります。では一度目の訪問者は、アニメーションを見えるわけですが、このアニメーションがまた素敵です。
1.コードを表示。
2.人々を表示。
3.コンテンツのグループを表示。
上記の順序でアニメーションが流れます。つまり、このページの説明をしているわけです。
「コードを共有するコミュニティです。あなたは何がしたい?」
これは私の勝手な解釈ですが、似たような印象を受ける人もいるでしょう(多分)
なので、このサイトは素敵だと前、思って紹介したのですが、今日、改めて見てみるとインタラクションの部分も優れています。
サイトのコンテンツタブ的な意味合いをもっているボタンにカーソルを持っていくと、
ボタンが上部に移動したのがお分かりでしょうか?WPFやSilverlightでよく見かけるサンプルでカーソルを特定コントロールの上部に持っていくとコントロールが拡大するというものがあります。これでよく問題になるのが、コントロール自身が動いたり周りのコントロールに何らかの影響を及ぼして、実際にアクションを起こしたかったコントロールを邪魔してしまうという類の問題です。カーソルを持っていくと変化するというのは、このコントロールは押せるよーとコントロールが主張しているわけですが、押すか押さないかはユーザが決定することなので、押す予定もなかったコントロールがオーバーなアクションで、ユーザの行動を阻害してしまったら、それは問題なわけです。もしかすると、その動き自身が不愉快な印象を与えていたとしても、ユーザはそのコントロールの動きが不愉快だと認識するのではなく、サイト自身が不愉快なものと認識してしまう可能性もあります。さて、このサイトのコントロールのインタラクションはどうでしょうか?
ボタンが上方向へ移動します。おそらく、3つを選ぼうとした場合はカーソルは横方向への移動が目的です。縦にボタンが移動しても、邪魔にはなりません。
また、このボタンの下部は透明化されていて境界をユーザが認識することができないようになっています。これもとても優れているデザインだと思います。おそらくこのボタンは配置している全体のPanelより下部を突き抜けています。ボタンが移動しても、一番下までボタンが存在しています。こうすることにより、ボタンが移動した場合でもカーソルがボタンコントロールから外れることを防いでいます。認識はさせないけど、機能は残す、これは技ありです。すごいです。
もっとボタンコントロールの細部を見ていきます。私はこのコントロールをタブ的な動きをさせるためのボタンと認識しました。それは
丸の中にある三角でそのように認知しました。誰もこんなことをいちいち説明しないと思いますが、どこまでが一つのグループかこのデザインは明確です。丸の中の三角部分だけ独立していて、そこを押すと別の動きをすると思う人はありいないでしょう。むしろ、丸と三角はこのボタンのアクションを抽象的に表現していると解釈してしまうという方がおそらく自然です。もちろん三角はページが遷移、とかコンテンツが切り替わるという事を素直に予見させてくれます。ペタンとしたデザインがデザインらしさ(=それ自身がコントロールではない)を意図しています。なので、このボタンはタブ的な動きをすると私は思ったわけです。実際に押してみるとそのように動きます。(もちろん動いた後のボタンはSilverlightのボタンではない事は知ってますよ)
さて、もう一つのインタラクションです。ボタンの状態を表現しています。3つの状態です。
1.カーソルが上部にない。
2.カーソルが上部にある。
3.ボタンが押された。
このインタラクションは、カーソルを持って行った場合に何が起こるかをユーザに知らせるためのインタラクションデザインとなっています。三角が中にある丸の色が変わりますが、そこに注意を引かせるためのインタラクションですよね。この丸が何を意図しているかは先ほどの考察のとおりですので、注意を惹かせて、このボタンを押すと何が起こるのかという事を言葉で説明するのではなく、コントロール、デザイン、アニメーションといったSilverlightで提供されている機能で実現しているわけです。
このSilverlightアプリケーションが意図したいこと、何の目的で作られているのか、私なりの考察をしてみました。もちろん間違っているかもしれませんが、こういったインタラクションは受け取り手が正です。もし提供者がいや違うといったところで、ユーザがそう受け取れなかったら敗北です。アプリケーションではなく駄プリケーションです。おそらく、今回紹介したサイトはものすごく成功していると思います。
最後になりましたが、かなり生意気なことを書き綴ってしまいました。もし、気分を悪くした方いらっしゃいましたら、大変申し訳なく思います。
以上