WCAN 2007 winter レポート

5次元要素

インタラクションデザインには以下の5つの次元の要素があるとおっしゃいました。そして、Webに大きく関わる2、4、5についてお話されました。

1. 言葉
2. 視覚要素
3. 空間/物質
4. 時間
5. 行動

2D : 視覚要素

まずデザインで一番「見えてくる」部分である視覚要素について。

• ラベルがなくても理解できる要素
• すでにあるメタファー^[1]を利用する
• 想像しやすいイメージ

デザインがかっこいいアイコンでも、それが一体何を示していて何をユーザに躍起させようとしているのかが分かるアイコンやボタンのデザインを心がけることが重要ですね。

4D : 時間

時間という次元において、サイトを閲覧するペースやテンポをデザインすることがインタラクションデザインの1つであると分かりました。

• スムーズなテンポを作るためには
  • タスク終了までのプロセスを見せる
  • 次何をするのか、あとどれくらいあるのかがわからない恐怖を取り除く
  • 同じ時間でも短くみせる表現をする(プログレスバーなど)
• サイトによって時間の過ごし方が異なる
• 利用者とどのような関係をもちたいかを考える

WCAN mini Markup vol.4のレポートでもフォームについて話しましたが、ユーザがフォームを入力し終えるために、あとどのくらいの作業が必要なのか表示すること、ユーザがそのサイトに求めるインタラクションを考えたデザインが必要だとおっしゃいました。
「横断歩道にある、"あとどのくらいで青になるかわかるアレ"って心が安らぐよね」という例には納得。

インタラクションデザインの測定要素

どのようなインタラクションデザインが優れているか。

• 簡単に学習でき、覚えることが出来るかどうか
• 効率的に利用できるかどうか
• エラー頻度を押さえるか、回避方法があるかどうか
• 利用者に満足感を与えることが出来るかどうか

簡単か、効率的か、また、エラーに対する見せ方を測定すること。エラー処理に対しては、人間と実際に対話している時に置き換えると結構失礼なことをしているサイトがあるよ、とのことでした。確かに制作者のためのエラー表示じゃなにも意味がないですよね。^[2]

ボタンのデザイン

Webサイトのナビゲーションのデザインを現実のボタンと比べると、ずれているサイトが多いそうです。

現実

1. 触る
2. 押し込む
3. 離すと戻ってくる

よくあるWebサイトのナビゲーション

1. マウスhoverするとhover用の画像に変化
2. (ここがないことが多い)
3. マウス外すと元の画像に戻る

これを解決する1つのお手軽な方法としては:active疑似要素を指定する方法があります。確かにナビゲーションでアンカーに:hover疑似要素を指定する場合は多いですが、:active疑似要素を指定しているサイトは少ないんじゃないかなぁと思います(僕も含めて)。最近の例だとアップルのグローバルナビゲーションはそれを実践していますね。

そもそもデザインとは

1. 有意義な対話のための見た目を考える
2. すべてに意味を持たせる
3. 作業は分担でもプロセスは共有する

今回のお話から、単なるWebサイトの見た目だけでなく、サイトの目的とユーザとの関係にもデザインを加えるべきだ、ということを感じました。

最後に、インタラクションデザインとは、Webサイトと利用者の関係をつなぐデザインであるとおっしゃっていました。

見た目だけのデザインの話をしましょう

ヤスヒサさんが見た目のデザインだけでない話をされたのに対して、矢野さんは「見た目だけのデザインの話をしましょう」という入りでお話を進められました。主な内容はこんな感じ。

• 日本語のレイアウトに関するTips
• 画面レイアウトに関するTips
• 配色のコツ

次は文字スタイルのリッチ化だ

いろんなリッチ化が流行っている昨今ですが、改めて「文字スタイル」のリッチ化を考えよう、ということで、実際にスクリーンに映し出されたイラレの画面と、詳細な配付資料を見ながら文字レイアウトをについてひたすら掘り下げてお話されました。

全体を通して気になったポイントを挙げると、

• OpenTypeではイラレでカーニングを「オプティカル」するとキュッと文字間がしまる
• 日本語を20pt、半角英数を22pt
• 文字の左に縦にボーダーを引くと、左に文字が綺麗にそろってるようにみえる
• 画像とキャプションのスペースは、昔は1ミリ、今は3ミリ
• 欧文書体はTPO(その文字の歴史や国柄)もわきまえて使う

実際にモノを見せてもらいながらのセッションだったので、なかなか言葉に表せないのが残念です;-<

「微妙な素人臭さはこういう細かい違いが生みだす」という矢野さんの言葉に同意です。僕も人のこといえたものじゃないけれど、普段目にする文字だからこそ、細かいこだわりが"プロっぽくてリッチ"な印象を作り出す要因になってくるということですね。
また、文字の由来を知ることもいいよね、ということでこのあたりに由来が載っていて便利だと教わりました。

3次会で来年のWebを考える

あっという間に終わって(と言ってもまだ20時)、3次会は金山駅に移動し20名で。ヤスヒサさんに「来年Webにくるものってなに?」と聴かれ、うーんと悩んで「ブラウザの混乱が起こる」と予想。

Firefox 3、IE8、iPhoneのタッチインターフェイスを採用したSafari(Webkit)、Nintendo DSやWii搭載のOpera、携帯ブラウザ、とさらに多種に広まりそうなので、なんか混乱しないかなぁと。
混乱ではないけど、「訴えてやる!」って話題はありましたね。

さて、1年後にはどうなっているのでしょう。去年の今頃、誰もニコ動が流行るなんて言ってなかったし、正直予想ができません。