画面遷移のパターンは大きく四つ
アンケートや会員登録を行う場合，大きくは四つほどのパターンに分けられると思います。【1】最初にmailアドレスを登録してもらい，そのアドレス宛に入力画面のURLを送付して入力してもらう形式。システムとしては少し複雑になりますが，有効なmailアドレスを取得できるのは，運営を考えると非常に有効です。【2】単純に一画面で完結する入力画面。【3】複数画面で進んでいく方式。そして，【4】ECモールのように予め会員登録がされている場合のアンケートなどで，IDとパスワード（PW）から個人情報入力を引き出して，ユーザーの入力負担がないようにしたもの。
画面遷移のパターン
それぞれ，開発コスト（テスト・コストも含めて）が変わりますので，一概にどれが良いとは言えません。ただ，個人的には【3】と【4】には注意が要るように思っています。
【3】は次画面に行くタイミングでサーバー側で質問の分岐（男性なら女性用の質問はしないなど）を組み込むことがしやすいと思われがちですが，Ajax系のおかげで【2】でもそれは可能となっています。むしろ，複数画面になることでテスト・コストが少々かさむように思われます。さらに，サーバーで何かを細工するタイミングがあることで，少し警戒心が生まれますし，住所やmailアドレスを先に入力させておいてから，年収や家族構成などの細かな情報を質問されると，イメージとしてはかなり悪くなるように思います。
【4】で注意が要るのは，会員登録を前提にしているサービスであるならば，そのうえで展開されるすべてのことで，IDを入力すれば個人情報などを引き継げるようにしておかないといけない，ということです。会員登録時にいろいろと入力させられたにもかかわらず，キャンペーンのときに再度入力させたりすると，技術的に不信感を抱かれる恐れがあります。別のサイトに間借りをしているキャンペーンだったり，個人情報を引き継げないような事情があったとしても，ユーザーにとっては関係ありません。同じ会社だが部署が違うから，というのも同じです。ユーザーにとって，そのサイト内に見える事柄は，一貫した情報管理システムとして筋を通すことが求められます。
個人情報の取り扱い方法への同意
個人情報を大切に扱うという観点から，ユーザーにそうした情報を入力してもらう前に，入力された情報をどう扱うのかを説明する義務が生じました。そのためには，それに同意している人だけに情報を入力してもらうという，画面設計をしなければなりません。主なパターンとしては三つあると思います。【1】ボタン上に「同意」した人だけが進むように明記する方法。【2】ボタンを二つに分離して，「同意」を取り付ける方法。【3】チェックボックスで「同意」を取り付ける方法。そして，【4】ラジオボタンで「同意」を取り付ける方法。下図は，「個人情報の取り扱いについて」という文書があるとして，その下に続くもののイメージです。
ユーザーの「同意」を取り付ける代表的な例
論理的に考えると，どの方法も違いはありません。システム的にも，「同意した」というフラグ（データ的な印）を残して，証拠とすることも可能です。ただ，【1】は無意識にボタンをクリックするユーザーがいることを否定できません。【2】は少し考えさせますが，左右どちらのボタンが先に進めるかがわかっていれば，殆ど無意識で行けるとも考えられます。
【3】は，ユーザーに手間を一つ多くかけさせるので，ユーザー・インタフェース（UI）としては，嫌われるかもしれません。でも，手間をかけさせることで，逆にユーザーの行為を，自発的なものだと言うことができるようになります。人がある画面に行くのには，何か目的がある訳で，長々とした説明を読むためである可能性はほとんどありません。次画面以降が目的となる訳ですから，殆ど無意識にボタンを押してしまうとも考えられます。ですので，ユーザーの「意思」を明確にさせるためには，【3】のほうが正しいUIだと言えます。
では，【3】と【4】ではどうでしょうか。【4】には「デフォルト値」として「同意しない」が入っていることがポイントです。今ある状態を別の状態に変更するというのは，チェックボタンにチェックを入れるのとは，もう一つ上の覚悟や意識を必要とします。
ですので，この例の場合だと，下に行くほど，ユーザーの明確な「同意の意思」を得たと言えると考えられます。扱う情報や業務によっては，こうした念押しするようなUIも必要になるでしょう。
[名前]漢字とカナの順番について
名前を入力する時，多くの場合に「漢字」と「カナ」の二つを入力するような画面が用意されています。殆どのエンジニアは，その順番にこだわらないように思います。しかし，テストを兼ねていろいろな入力画面を触っていると，順番にも意味があるように思います。
名前（漢字）と名前（カナ）の順番
【1】と【2】に，システム的には何の差もありません。違いがあるのは，この画面を終了した後のユーザーのパソコンの状態です。日本語入力用の仕組み（IME）の設定にもよりますが，多くの場合，直前の変換を記憶します。ですので，【1】の画面を入力し終わったユーザーが，自分の名前を入力しようとした場合，カタカナが第一候補になります。これに対して【2】では，漢字が第一候補になります。「飛ぶ鳥あとを濁さず」的な配慮をする場合には，考えても良いポイントかもしれません。
読みやすく答えやすいレイアウトに
会員登録画面では，それほどでもありませんが，アンケート系の画面レイアウトで，見事だと思えるものにはそうそう出会えません。form系のタグを埋め込んだだけの画面と言っても過言でないものまであります。別に装飾をつけろとは言いませんが，紙媒体のアンケート用紙と比べても，貧弱さが気になるように思います。大切なお客様の声を吸収するモノが，「やっつけ仕事」で作られたものだとしたら，ユーザーはどんな思いがするでしょう。
せめて，情報が読みやすく，答えやすいようなレイアウトなりフォーマットを用意するのが，「礼儀」だと思います。CSSの浸透により，レイアウトやフォーマットは，きちんと骨組み（情報の構造化）ができてさえいれば，かなり自由に調整することができます。一部のユーザーは，そうした細かな配慮までも見ているものです。そして，そうしたものの蓄積が，そのサイトの信用度とかブランドに繋がっていきます。
アンケートのレイアウト（どちらが真剣に答える気になりますか？）
引き続き次回は，UI部品なども交えてもう少し考察を進めたいと思います。
| 三井 英樹（みつい ひでき） 1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。 |
