インタラクションデザインを知る会

WEBサイトを作る上で知っておいた方が楽しくなるインタラクションデザインの話。

WEBアプリケーション、ゲーム、家電、色々な状況に応じて考えるべき構成要素や原則は異なる。

だからここではWEBサイト(難しい動きしない)を原則とした話にします。

あと、ここでは単なる装飾目的のアニメーションは対象外です。

第一回：初めまして、インタラクションデザイン

そもそもインタラクションデザインってなあに？

それは「相互作用設計」だよ。なんでITの説明っていつも難しい漢字なんだろうね。

要は「ユーザーがなんか操作したら、反応するデザイン」のこと。

例えば、ボタンをマウスオーバーしたらボタンの色が変わったり。

なんでインタラなんたらが必要なんですか？

ユーザーが「ちょっと未来」を想像できる。(あ、これ押したら動きそう)
だから誤操作を防げる。(あ、これ押したらマズいやーつ)
つまりユーザーのストレスが軽くなる。

ということは、作り手からすると何がウマー？

ユーザーに、作り手がやりたいことをやってもらいやすくなる
だから、誤動作やエラーが相対的に起こりにくくなる
わかりやすいから、売上アップとか期待できる

UXと何が違うの？

定義の範囲が違う。UX(User Experience)は広くて、インタラクションは狭い。
UXはサービス全体に影響する。体験を通したデザイン。
インタラなんたらは、ピンポイントアクションを知覚的にして、ユーザーストレスを軽減するデザイン。

インタラなんたらの構成要素

見た目。色とかカタチとか。
動き。色が変わったり、大きさが変わったり。
時間。ヌルッと動かすか、シュッと動かすか、とか。
(場合によって)音。エラーダァ！ピコーン！とか。

という訳で最後に、インタラなんたらの原則。これ忘れちゃアカンやつ。

説明がなくても操作できる。Macすげー。iPhoneすげー。
操作がしやすい。電卓すげー。
反応する時間が適切。でかいファイルアップロードするときクルクルするのすげー。
統一性がある。エラーメッセージは全部赤。こえー。

以上、今回は教科書的なはじめのいっぽでした。

初めのうちは、単なる装飾目的よりもユーザー知覚目的に絞った方が良いでしょう。

色々なWEBサイトを見て、要素に対して「コーチ！これ、なんのミーニングがあるの？」と問いかけてみるといいでしょう。

第二回：ナビゲーションのあれこれ

インタラなんたらをやる上では、そもそものUIパーツデザインを知る必要がある。
なので最初にUIパーツのパターンを紹介し、そのうちインタラクティブな目線に移っていこう。

ナビゲーションってなあに？

リンクを辿っていくこと。道しるべ。

知りたい情報にたどり着くための方法は、検索とナビゲーションがある。
とある研究結果によるとユーザーの使用率は、検索30%、ナビ70%らしい。
参考文献が404だったので引っ張れず
ぼくもgoogle以外のサイトで検索することはほとんどない。ナビを使う。
ナビ一つ取ってもいろんな種類があるので、見ていこう。