サイトメッセージチャートの書き方

前に、サイトストラクチャからいきなりワイヤーフレームを描くのは乱暴で、その間に「サイトメッセージチャート」といって、各ページでユーザーに提示されるメッセージとページ間を結ぶユーザー導線を一望するような図を描いてみるのはどうか、というエントリーを書きました。

http://chushoww.blogspot.com/2008/09/blog-post_23.html

で、これを描くためのツールをずっと探していたのですが、いろいろ試してみた結果、Judeのステートチャート図で描くのがよさげ、という結論に達しました。

Jude
http://jude-users.com/ja/

ためしに、Firefox の製品情報サイトを図にしてみたのがこれです。

http://dl.getdropbox.com/u/223789/site_message_chart_sample.png

こう書いてしまうと、じつにあっけないもんですよね。しかし、このあっけなさで、サイトデザインをいったん把握しておきたいんですよね。そうしないとワイヤーフレームを描くという行為がなんだか当てずっぽうなものになってしまうわけで。

さて、以下、作図のしかたの簡単な説明なんですけど、Jude でステートチャート図を描いた経験があることが前提になってしまいますので、悪しからず。

いや、特に知らなければ読みとれない記法があるわけでもないですし、その気になればパワポなんかで書いてもいいわけです。Jude じゃなきゃ書けないというわけではありませんよ。念のため。だけど、この図を描くのに、なるべく作図のオペレーションに気をとられないようにするには、と考えたときに Jude がおすすめかな、ということです。

えー、前置きが長くなりました。では、いきます。

一見しておわかりいただけるように、なにしろ「ステート(状態)」をページに見立てて描いていくわけです。当然、ステートの「名前」はページのタイトルになりますね。

そして、ステートの「内部遷移」の「イベント」に、当該のページにおけるユーザーへのメッセージを書きます。「イベント」と一緒に「ガード」と「アクション」を入力できますが、ふつう、これらを使うことはないでしょう。でも、ある条件の下でのみ表示されるメッセージの場合は、条件を「ガード」に入力するのがいいかもしれませんね。メッセージの記述順は、ユーザに提示する順番、もしくは、重要度の高いものから、と考えてよいでしょう。

ページ遷移=ユーザー導線は、「遷移」の矢印つきの線でページとページを結ぶことで表現します。「遷移」の「イベント」に、当該の導線に対応するリンクやボタンのラベル名を入力します。「アクション」には、その際の、ユーザーの動機や要求を想像して入力しておきます。

Jude のステートチャート図では、ステートを入れ子にすることができます。
必要に応じて複数のページをグルーピングしておくと、作図が冗長になる(導線だらけになる)のを避けることができます。グルーピングのためのステートの「名前」にはグループのタイトルを入力します。グループの「名前」は、それがページではないことをあらわすための記号(例:"▼")から始まるようにするといいでしょう。

また、グループ内に含まれるページに共通するナビゲーション上の要件や特徴を明示したい場合は、グループのステートの「ステレオタイプ」に書いておくのがよさそうです。たとえば、ランダムにアクセスされる並列コンテンツの一群であれば「ランダムアクセス」とか。認証が必要なコンテンツの一群であれば「要認証」とか。

このようにして、あるページでユーザーに提示されるメッセージの内容とオプションのラベル、あるオプションを選択するユーザーの動機や要求、そして、オプションを選択した結果として提示される次のメッセージの内容とオプションのラベル... と、こういった流れがスムーズに、自然につながっていることを確認しながら、要件段階で定義されたサイトの目的とユーザーのニーズをページに分解していけばいいのではないかと、こういうわけです。

しかし、いまのところ、いってみれば、これはプロトタイピングの段階ですね。これからいろんなケースに適用してみながら、本当に使って役立つものになるのかどうか、見極めていきたいと思います。

-----------------
sent from W-ZERO3