インタラクションデザインをレベルアップさせる、「インビテーション」の考え方

プラットフォームが多様化し、設計に求められるレベルが上がる中、特にWebで重要になってくるものの1つが「インタラクション設計」

従来のHTML＋CSS主体の画面から、振る舞い（Behavior）を含む設計へとレベルアッップすることで、様々な表現が可能になります。また、ブラウザー等の進化もそれを後押ししています。

その時に非常に役に立つ、”インビテーション”という考え方を少々書いてみたいと思います。

インビテーションを、意識的に仕掛ける

最初に、デザイニング・ウェブインターフェースに定義があるので引用、と。

インビテーションとは、ユーザをインタラクションへと誘導するためのプロンプト・合図のことだ。
そのインターフェースで次に起こることをさりげなく示す、状況に応じたツールチップや視覚的アフォーダンスが用いられることが多い。

判りやすいところで言うと、クリックできるところに矢印がパカパカ点滅しているとか、クリック可能な領域でマウスポインターの画像が変わるとか、そういうもの全般を指します。

これらを感覚的になんとなく処理するのではなく、

1. インビテーションでユーザに知覚させ
2. 適切なリアクションを提示する

という2段階で設計することで、より明確な意図の下でインタラクションデザインを行うことが可能になります。

インビテーションのタイミング

同じインビテーションでも、デザイニング・ウェブインターフェースでは多数の種類を定義していますが、「ボタンを大きくして、きらきらさせる」といった内容については、ここでは省略して、もう少し簡略化した形で考えたいと思います。

Webで主に起こるイベントハイドラで、インビテーションが多用されるのは

• ページ（及び領域）ロード
• マウスオーバー
• クリック
• ドラッグ＆ドロップ

だと思います。

1 ページ（及び領域）ロード

読み込みのタイミングで、ユーザに対してインビテーション提示することで特定のエリア・情報の存在を知らせたり、今後のアクションの方向を示すやり方です。

例えばマクドナルドのサイトでは、中央のコンテンツが読み込まれた瞬間、上から下へとずらずらっとコンテンツが降ってきます。（下の図左→右へ）

こうすることによって、画面に収まっている以上のコンテンツがこのページにあることを示し、アクションを誘います。

せっかく作った情報も、閲覧されなければ宝の持ち腐れです。
特に、クリックやドラッグ、特定領域へマウスオーバーしないと見れないようになっている情報の在り処を示すために、インビテーションが有効です。

また、Cookieを用いて初回訪問の人限定でインビテーションを出すなどの仕掛けも、最近はちょいちょい見られるようになりました。

2 マウスオーバー

マウスオーバー（onMouseOver）のタイミングで反応を提示するやり方です。
JavaScriptでの実装が最も多いのはこいつだと思います。

ロールオーバーでのインビテーションとしては

• エリアの背景をハイライトする
• エリアのデザイン（色など）を変化させる
• マウスポインタを変える
• アクションの結果を、その場でプレビューする

といったバリエーションがあります。

例えば、Windows Media Playerの楽曲評価の☆マークのところは、ロールオーバーでマウスポインタが変化しつつ、クリックの結果を提示します。（Webではありませんが、考え方は同じ）

3. クリック / ドラッグ＆ドロップ

ウェブの場合クリックがリンク移動に利用されることが多いため、これらは前の2つよりは比重が低いのが現状です。

今後Facebookのようなソフトウェア的な画面を持つサイトが増えると、インビテーションとしてのクリックも必要になってくるかもしれません。

これはアメリカの音楽視聴サイト「Grooveshark」のインターフェースですが、

• 楽曲を1回クリックすると選択状態になり、曲の左に「＋」アイコンが出現します。
• また、プレイリストへとドラッグする間、マウスポインタはドラッグ先に応じて「＋」または「-」のアイコンに変化し、次のアクションをメタファーでユーザに伝えます

今後、Webとソフトウェアの境目が徐々に融合するにつれ、こういう利用は増えてきそうですね。

と、こんな感じで紹介したインビテーション。
まだまだ自分でもちゃんと使えているわけでもない技法というか考え方なので、ちゃんと身に付けていかねばと思うこのごろです。

■ 関連エントリー

• コンバージョンUP400%を達成したVoices.comの顧客体験設計
• 完了画面は、ユーザを捕まえる最強のレコメンデーションツール
• ユーザビリティの問題を手っ取り早く改善するためのコツ 5ヶ条
• 全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」