【Silverlight】Microsoftから学ぶSilverlightによるインタラクションデザイン。

  • 2009.03.31 Tuesday
  • 21:06
先日、とてもクールなデザインのサイトを見つけたので、このBlogに紹介しました。それが

Shared Source Initiative
http://www.microsoft.com/resources/sharedsource/default.mspx

です。Silverlightが使用されているのは、中央のコンテンツのトップ部分です。詳細とみてみると、後ろにHashTableのコンストラクタ部分のコードがスクロールされており、その前に様々な人種の人たち、そして、タイトルとタブ切り替えようのボタンが最前列に配置されている(様に見えます。)

レオナルドダビンチは言いました。

「遠くにあるものほど青くかすむ。」

さて、ハッシュテーブルの部分は青くかすんでますね。もし人に、このページを数秒見せて隠した状態で、コードは何色だった?という問いをした場合、数人は白と答える可能性があります。それは遠くにあるものは霞んで見えるので、コードが遠くにあると認識した場合は、白色のコードがあると思ってしまうからです。実際には青い色がかったグレーです。トップのタイトル部分とボタン以下に青いレイヤーが存在しているようにも見えますが、実装自体はよくあわかりません。

さて、今回の投稿のインタラクションにまだ入っていませんが、さらに、余談です(かえってこれねー)Shared Source Initiativeのページを開いた場合に、アニメーションが走ります。結構、長いですよね。しかし、アニメーションの部分は実際のコンテンツの中では単なるタブの切り替えボタンでしかないので、無視しようと思えば無視できます。無視できる人は二回目以降の訪問者となります。では一度目の訪問者は、アニメーションを見えるわけですが、このアニメーションがまた素敵です。

1.コードを表示。
2.人々を表示。
3.コンテンツのグループを表示。

上記の順序でアニメーションが流れます。つまり、このページの説明をしているわけです。

「コードを共有するコミュニティです。あなたは何がしたい?」

これは私の勝手な解釈ですが、似たような印象を受ける人もいるでしょう(多分)

なので、このサイトは素敵だと前、思って紹介したのですが、今日、改めて見てみるとインタラクションの部分も優れています。

サイトのコンテンツタブ的な意味合いをもっているボタンにカーソルを持っていくと、

Shared Source Initiative

Shared Source Initiative

ボタンが上部に移動したのがお分かりでしょうか?WPFやSilverlightでよく見かけるサンプルでカーソルを特定コントロールの上部に持っていくとコントロールが拡大するというものがあります。これでよく問題になるのが、コントロール自身が動いたり周りのコントロールに何らかの影響を及ぼして、実際にアクションを起こしたかったコントロールを邪魔してしまうという類の問題です。カーソルを持っていくと変化するというのは、このコントロールは押せるよーとコントロールが主張しているわけですが、押すか押さないかはユーザが決定することなので、押す予定もなかったコントロールがオーバーなアクションで、ユーザの行動を阻害してしまったら、それは問題なわけです。もしかすると、その動き自身が不愉快な印象を与えていたとしても、ユーザはそのコントロールの動きが不愉快だと認識するのではなく、サイト自身が不愉快なものと認識してしまう可能性もあります。さて、このサイトのコントロールのインタラクションはどうでしょうか?

ボタンが上方向へ移動します。おそらく、3つを選ぼうとした場合はカーソルは横方向への移動が目的です。縦にボタンが移動しても、邪魔にはなりません。

また、このボタンの下部は透明化されていて境界をユーザが認識することができないようになっています。これもとても優れているデザインだと思います。おそらくこのボタンは配置している全体のPanelより下部を突き抜けています。ボタンが移動しても、一番下までボタンが存在しています。こうすることにより、ボタンが移動した場合でもカーソルがボタンコントロールから外れることを防いでいます。認識はさせないけど、機能は残す、これは技ありです。すごいです。

もっとボタンコントロールの細部を見ていきます。私はこのコントロールをタブ的な動きをさせるためのボタンと認識しました。それは

Shared Source Initiative

丸の中にある三角でそのように認知しました。誰もこんなことをいちいち説明しないと思いますが、どこまでが一つのグループかこのデザインは明確です。丸の中の三角部分だけ独立していて、そこを押すと別の動きをすると思う人はありいないでしょう。むしろ、丸と三角はこのボタンのアクションを抽象的に表現していると解釈してしまうという方がおそらく自然です。もちろん三角はページが遷移、とかコンテンツが切り替わるという事を素直に予見させてくれます。ペタンとしたデザインがデザインらしさ(=それ自身がコントロールではない)を意図しています。なので、このボタンはタブ的な動きをすると私は思ったわけです。実際に押してみるとそのように動きます。(もちろん動いた後のボタンはSilverlightのボタンではない事は知ってますよ)

さて、もう一つのインタラクションです。ボタンの状態を表現しています。3つの状態です。

1.カーソルが上部にない。
2.カーソルが上部にある。
3.ボタンが押された。

Shared Source Initiative

S

Shared Source Initiative

このインタラクションは、カーソルを持って行った場合に何が起こるかをユーザに知らせるためのインタラクションデザインとなっています。三角が中にある丸の色が変わりますが、そこに注意を引かせるためのインタラクションですよね。この丸が何を意図しているかは先ほどの考察のとおりですので、注意を惹かせて、このボタンを押すと何が起こるのかという事を言葉で説明するのではなく、コントロール、デザイン、アニメーションといったSilverlightで提供されている機能で実現しているわけです。

このSilverlightアプリケーションが意図したいこと、何の目的で作られているのか、私なりの考察をしてみました。もちろん間違っているかもしれませんが、こういったインタラクションは受け取り手が正です。もし提供者がいや違うといったところで、ユーザがそう受け取れなかったら敗北です。アプリケーションではなく駄プリケーションです。おそらく、今回紹介したサイトはものすごく成功していると思います。

最後になりましたが、かなり生意気なことを書き綴ってしまいました。もし、気分を悪くした方いらっしゃいましたら、大変申し訳なく思います。

以上
コメント
コメントする








    
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
<< April 2018 >>

あわせて読みたい

あわせて読みたいブログパーツ

selected entries

categories

archives

recent comment

  • 【キーボード】6年前のRealForceを復活させることはできる!?その3
    art55 (05/22)
  • 【キーボード】6年前のRealForceを復活させることはできる!?その3
    分解大好き (05/18)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    art55 (02/04)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    Gen (02/04)
  • 【キーボード】RealForce が壊れて帰ってきた。
    art55 (04/29)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    art55 (02/23)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    かるあ (02/22)
  • 【C#】Dictionaryの実装・データ構造・アルゴリズムを観察する。
    art55 (01/16)
  • 【C#】Dictionaryの実装・データ構造・アルゴリズムを観察する。
    karuakun (01/16)
  • 【NetOffice】【Excel】死なないExcelプロセスをKillする。
    art55 (12/05)

recent trackback

recommend

recommend

recommend

C#プログラマのための.NETアプリケーション最適化技法 (Programmer's SELECTION)
C#プログラマのための.NETアプリケーション最適化技法 (Programmer's SELECTION) (JUGEMレビュー »)
Sasha Goldshtein,Dima Zurbalev,Ido Flatow,サシャ・ゴルドシュタイン,ディマ・ズルバレフ,イド・フラトー

recommend

ろんりと集合
ろんりと集合 (JUGEMレビュー »)
中内 伸光
とてもわかりやすいです。

recommend

recommend

シャノン・ノイマン・ディジタル世界
シャノン・ノイマン・ディジタル世界 (JUGEMレビュー »)
市川 忠男
4章がリレーショナルデータベースな内容になってます。ページ数があまりありませんが、ポイントがものすごく的確にまとまっていて、感動します。

recommend

recommend

東プレ Realforce91UBK-S 静音キーボード 静電容量無接点方式 変荷重 ブラック NG01BS
東プレ Realforce91UBK-S 静音キーボード 静電容量無接点方式 変荷重 ブラック NG01BS (JUGEMレビュー »)

テンキーレス、静音のRealForce91UBK-S。スコスコ感がたまらなく気持ちいいです。家と会社で2台持ってます。

recommend

recommend

プログラミング.NET Framework 第4版 (プログラミングシリーズ)
プログラミング.NET Framework 第4版 (プログラミングシリーズ) (JUGEMレビュー »)
Jeffrey Richter
発売予定美 2013年10月10日。.NET Frameworkとお付き合いする人のバイブルですね。

recommend

recommend

キャット・シッターの君に。
キャット・シッターの君に。 (JUGEMレビュー »)
喜多嶋 隆
私のイラストレータデビュー本です。

recommend

Essential .NET ― 共通言語ランタイムの本質
Essential .NET ― 共通言語ランタイムの本質 (JUGEMレビュー »)
ドン・ボックス,クリス・セルズ,Don Box,Chris Sells,吉松 史彰

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM