2008年9月23日火曜日

サイトメッセージチャート

サイトストラクチャを書いて、OK なら次にワイヤフレームを書くっていうのは、プロセスとして少し乱暴ですよね。各画面のワイヤフレームに盛り込むべき、メッセージ、ナビゲーション、コンテンツにはどんなものがあって、どう配置される(要素間の関係を持つ)べきなのか、その根拠を全部サイトストラクチャに求めるのは無理なんで。

このサイトにはどんなコンテンツや機能があるのか、とか、それらをどうグルーピングしてどんなふうにサイトの全体像を結んでいくのかっていうのは、たいていサイトストラクチャで明らかになります。各画面にそれなりの名前をつけて、セクションの系列をツリー構造にまとめてね。場合によっては、画面ごとの矩形のわきに、各画面の主要な構成要素を書き込んだりして。

でも、それだけだと、いわゆるユーザ導線っていうのが見えてこないわけです。すべての画面は他の画面で行われたユーザの選択の結果として表示されるもんだととらえて、各画面がサイトの目的とユーザのニーズをマッチングさせるためのパスとして有効に機能するためにはどうすればいいのか、なんていう視点での設計やデザイン、これは、サイトストラクチャの記法では描き切れない。

この問題は、でも、ぼくの記憶では、2001年とか2002年あたりから、ユーザエクスペリエンスなんて言葉とともに、いろんなとこで言われるようになった、いまやもう、相当古い話ですね。サイトストラクチャだけじゃなくて、ユーザ導線図も書こうなんていって。

でも、ユーザ導線図なんていって、サイトストラクチャの画面と画面を結ぶ線が増えただけみたいな図を書いても、正直なんだかなーというかんじでした。書くのが面倒な割に、得られるものが少ないっていうか。

ぼくは、ユーザ導線図というのをまともに書いたことがたぶんないです。そのかわり、導線として問題になりそうなところや、特に手をかけなくちゃいけないところだけを抜き出して、局所的なポイント解説つきの画面遷移図をサイトストラクチャに添えたりしてました。

それでこれまで特に問題はなかったと思うんですが、ただ、後輩の Web ディレクターを指導してとかってときにですね、やっぱりユーザ導線設計のあたりにも、思考や作業を誘導するような作図法やツールが確立されているべきだよね、なんて思うようになりました。

それで、どうしたもんかな、と、ここんとこ考えてみてるんですけど、たとえばこれがユーザ導線って思い定めながら画面をあらわす矩形と矩形の間に線をひっぱっているときに、頭の中でいったい何を確かめているのかというと、ある画面においてユーザに何をメッセージして、そこから次にとりうるアクションのオプションとして何を提示して、で、ユーザのとったアクションの結果として何を見せるかって、その連鎖のおぼろげなイメージなんだと思うんですよね。じゃあ、そのイメージを、おぼろげな状態のままでいいから、そのまま図に定着させちゃえばいいんじゃないか。

たとえば、まず、サイトとしてユーザに伝えようとしているメッセージを各画面ごとに書き出してみる。それこそ、ようこそ、からはじまって、新着がありますよ、おすすめはこれですよ、今、こんなキャンペーンをやってますよ、とかね。コンテンツや機能のリストではなく、あくまでもサイトからユーザに向けてのメッセージという視線で。粒度もこれくらいがいいと思います。あんまりくだくだしく書かず、画面がいっぱいあって俯瞰でみてもそれぞれを一発で確認できるように。

次に、各画面でユーザとりうる選択肢を書き出します。これは、ユースケースのように、「〜する」という形式で。それから、それぞれの選択に対応する遷移先の画面へ線を引きます。

線の上には、必要に応じて、線の引き出し元となる選択肢のラベル「〜する」に対応するユーザのマインドを想定して書いてみる。たとえば、「詳細情報を読む」に対して「これってどういうこと?」とか。

こうすれば、画面Aのメッセージ - 画面Aの選択肢 - 線ABのユーザマインド - 画面Bのメッセージ ... といった連なりを確認することができるようになると思います。全体としておおきなアミダくじみたいになるでしょうね。たんにサイトストラクチャの画面間の線を増やしただけのようなユーザ導線図では、結局、どことどこがつながるのかくらいしかわかりませんが、これなら、ユーザをどう導いてどんな体験をさせるのかまで描けるでしょう。

そうすると、サイトストラクチャとワイヤフレームの間に入って、ワイヤフレームを作成する上での検討材料としてもかなり役に立つものになるんじゃないでしょうか。サイトメッセージチャートとかいってね。

ちょっとためしに書いてみて、いいサンプルができたらアップしようと思います。
-----------------
sent from W-ZERO3

0 件のコメント: