へたれwebディレクターの覚え書き

メニューの表示にタブデザインを採用するサイトが増えています。

が、個人的には、ただ見栄えがいいからとの理由でタブデザイン（タブインターフェース）を採用するのは反対です。

ちょっと前に『タブインターフェースと“世界観”』というタイトルで、タブインターフェースを使うのに適した条件を、自分なりに考えて書いてみました。
が今読んでみると、内容がアバウトで我ながら意味不明な点もあります。
そこで今回は、もう少し具体的に条件を考えてみます。

これが正解というわけではなく、あくまで自分のための覚書きです。ご意見などあればいただけるとうれしいです。

タブインターフェースを使うための条件

1. タブの中にある情報が一つ、もしくは複数なら並列関係である
2. ページの遷移が発生しない
3. 複数タブの情報を同時に見る必要がない
4. タブがデフォルトのままでもコンテンツの価値を失わない
5. コンテンツの内容をタブのタイトルだけで伝えることができる

以下、それぞれの説明です。

1・タブの中にある情報が一つであること、または複数なら並列関係であること

1-1・タブの中にある情報が一つ

タブは、一つのデータを複数の条件で出し分ける目的に向いています。

例として、wikiのようなサービスが挙げられます。
Wikiでは、1ページ毎に、それぞれのページに対応した「閲覧」「wiki文法での編集」「リッチテキストでの編集」「ページ管理」といったメニューが存在します。それぞれのメニューに主従関係はありません。
このようなコンテンツの場合、タブインターフェースによる切り替えは理にかなっているといえます。

1-2・タブの中にある情報が複数の場合は、すべてが並列関係

タブは、上下関係のない同じ種類の情報が大量にあったとき、それをある一定のルールに基づいてグループ分けして表示する目的に向いています。

ニュースサイトは（通常）、1ページに1つの記事が掲載されています。それぞれに上下関係はありません。このような状態を「並列関係」と規定します。

Amazon.co.jpにはかなり大量の情報がありますが、商品情報は（基本的に）「1ページ＝1商品」です。このような場合に、タブによるグループ分け表示は適しています。

タブは並列関係にある同じ種類の情報を、あるルールにのっとって分割するから意味があります。情報に階層関係、主従関係があると、デフォルトのタブを開いている状態のときに他のタブをクリックしたらどのような結果になるかをユーザーが想像しづらくなってしまいます。

Amazonの場合、並列関係にある商品のみにタブが使われています。もし同じ種類に属さない、商品以外の「欲しい物リスト」や「カートを見る」がタブに含まれたら、とたんに難しいインターフェースになってしまうでしょう。

2・ページの遷移が発生しないこと

タブインターフェースを採用するなら、タブをクリックしたときにページ遷移をさせないほうがいいと思います。
ユーザーが、「タブをクリックしたらページ遷移が発生する」と想像しづらいからです。
ページ遷移が発生するかどうかわからないということは、タブを切り替えたときに「切り替えた前の状態が保存されているかどうか」の予想がユーザーにはつかない、ということです。

タブインターフェースを採用しつつページ遷移が発生する例として、Yahoo!メールとYahoo!カレンダーで起こる問題を考えてみます。

会議参加依頼のメールが届いて、その予定をYahoo!カレンダーに登録しようするときのフローを考えてみましょう。

1. 会議参加依頼のメールが届く。参加を決める。
2. 予定を登録しようと、タブ「カレンダー」をクリック。自分のカレンダーが表示される。
3. カレンダーに予定日時を入力。
4. 続いて場所も入力…しようと思ったときにメールに書かれていたはずの場所を確認していないことに気づく。
5. 場所を確認しようと、メールのタブをクリックして、該当メールに戻る…つもりがメールサービスのトップページへ遷移してしまった。
6. 慌ててカレンダーのタブをクリックしたら、カレンダーサービスのトップ画面が表示。カレンダーに入力途中だったデータは消えた。最初から入力しなければ。
7. 凹む。

ページの遷移が発生することをユーザーが想像しづらいタブインターフェースでは、情報のリセットが行われると想像するのが難しく、「元のタブに戻れば以前の状態が保存されている」ように錯覚しがちです。

これがもしタブインターフェースでなかったらどうでしょう。
もしボタンメニューだったなら、ユーザーは「メニューをクリックすると単にページ遷移が起きる、だから入力途中のデータはなくなる」と想像がついたはずです。

3・複数タブの情報を同時に見る必要がないこと

上記「ページの遷移が発生しない」の例でもわかるとおり、カレンダーとメールは同時に表示しつつ利用することがあります。このような場合は、タブインターフェースを採用するべきではありません。

タブは小さなスペースで多くの情報を表示するのに適していますが、それらの情報を比較しながら閲覧することに向いていません（というか同時に表示されないので比較すらできません）。

4・タブがデフォルトのままでもサービスが価値を失わないもの

タブは、クリック率の低いインターフェースです。

ですから、「タブをクリックしてくれないとユーザーに楽しさが伝わらない」「クリックしなければサービスの目的が満たせない」ような場面で採用するべきではありません。

ヤフーのトップページにあるニュースコンテンツは優れた例だと思います。

「トピックス」という名前で注目の記事が表示されています。一般のユーザーは、トピックスの記事を目にすれば十分です。
もし他の記事を見たくなったり、他の記事を見る必要が生じた場合には、きっとタブをクリックしてくれるでしょう。
もともとニュースを見ることが目的なら、きっと「一覧」をクリックしてくれるはずです。

仮にユーザーがタブをクリックしてくれなくても、トップページの価値が下がることはありません。

5・コンテンツの内容をタブのタイトルだけで伝えることができる

ユーザーは「そのタブをクリックすることが自分にメリットがある」と感じなければクリックしてくれません。
ユーザーにそう感じてもらうにはまず、デフォルトのタグタイトルとタブ内に表示された情報を見て「自分は他のタグをクリックするべきか？」を判断してもらう必要があります。

上述のニュースの場合、ニューストピックスが表示されている状態で、「エンタメ」とのタブタイトルが目に入りました。そのときユーザーは、「エンタメ」をクリックするとどのようなコンテンツが表示されるのか容易に想像することができます。

逆にいうと、クリックして画面遷移しないと中身が想像できないコンテンツにはタブインターフェースは向いていません。

Amebaもタブメニューを採用しています。この「トップ」画面で、「ルーム」というタブ名からそこになにがあるか想像できるでしょうか？

タブ名「ブログネタ」も中身が想像できません。きっとブログを書くためネタがあるのかなと思いクリックすると、いきなり謎の生物が表示されます。

しかもamebaではタブを階層化させてしまっています。階層化された奥に「クチコミ番付」というコンテンツが存在するとは想像もできません。
「各コンテンツが並列関係にない」「各コンテンツが同じ種類の情報で構成されていない」ため、タブの中身を想像しづらくさせてしまっています。もし「ルーム」や「クチコミ番付」がキラーコンテンツだったらどうするのでしょう。（幸い、キラーではありませんが…）

余談ですがAmabaのトップページ、初めて「リクエスチョン」をクリックするといきなりタブメニューが消えてしまうのもインターフェースをさらに難しくしています。

最後に：ではいったい、タブメニューとボタンメニューではなにが違うの？

前述したYahoo!メールとYahoo!カレンダーは、見かけはタブメニューですがajaxを使っているわけではありません。実際の動きはボタンメニューのそれです。
しかしたとえ仕組みは同じでも、ビジュアルがタブかそうでないかで、ユーザーがうける印象は大きく異なるのではないでしょうか。タブメニューとボタンメニューの違いは、仕組みの違いだけで判断されるべきではないと思います。

ビジュアルの違いでユーザーが受ける印象はどう変わるのか？の例として、「なぜチェックボックスとラジオボタンは別のグラフィカルデザインが用意されているのか」を考えて見ます。

チェックボックスは複数項目が選択可能です。一方、ラジオボタンは一つだけ選択させるときに使います。

ではチェックボックスのプロパティになにかフラグが増えて、それがONなら複数選択できない、という仕組みがブラウザに用意されたらどうでしょう？
ラジオボタンは無用になるでしょうか？

しかしそれではユーザーが、「今、自分は複数の項目を選んでいいの？ それとも一つだけ選べるの？」というのを、画面を見ただけでは判断できなくなってしまいます。
ユーザーは、自分にどのような行動が許されているのかを、画面からの情報で判断するからです。


タブでメニューの表現はもちろんできます。しかし状況を考えずに使ってしまうとタブメニューであるからこそユーザーが感じることのできる「ここにある情報は並列で、同じ種類のものだ」という意味づけを失ってしまいます。

ユーザーの理解を助ける役割を果たしている「暗黙のルール」を、安易にweb製作者が破壊するべきではないと思うのです。

追記

今回のエントリーを書くにあたり、以下のページを参考にさせていただきました。

• Jakob Nielsen博士のAlertbox『タブの正しい使い方』
• ソシオメディア　UIデザインパターン『タブの並列切替』
• Apple Human Interface Guidelines　『View Controls』

タブインターフェースを採用することが決まったら、次に検討するのは「見やすく」や「高速に」などかと思います。それらについては参考ページに詳しいのでそちらをお読みいただくのがいいかと思います。

自分が何度も引っかかるので、覚え書きを残しておきます。
なお、以下の記述はWindows XP professionalでのものです。


XAMPPを何度かインストール（アップデート含む）をしていると、MySQLが起動しなくなるときがあります。
古いバージョンのMySQLがサービスとして残っており、それが新しいバージョンとconflictを起こしていることが多いです。

その場合、古いMySQLのサービスを止めてしまえば正常に動作するようになります。

1. コントロールパネルの「管理ツール」を選択
2. その中の「サービス」を起動
3. 「Mysql」をダブルクリック
4. 表示されるダイアログボックス内の「実行ファイルのパス」がXAMPPをインストールした場所と違うことを確認（同じなら正常に上書きインストールができているので原因が別のところにある可能性が）

5. コマンドプロンプトを起動
6. 現在XAMMPがインストールされているディレクトリに移動し、その中の「mysql\bin」に移動
7. mysqld-nt --removeを実行

9. XAMPPコントロールパネルからMySQLを起動

これで無事に起動に成功しました。


ネット上では「mysqld-max-nt --removeを実行」と書かれている情報があったのですが、mysqld-max-ntといファイルが見つからなかったので、とりあえず「mysqld-nt --remove」を実行したらうまくいったので、もうこれでいいことにしてしまいます。


以上、自分用メモでした。

『Yahoo!地域情報』と『Googleマップ』の検索フォームには、それぞれ検索例が掲載されており、初めて利用するユーザーが使い方に迷わないようになっているようです。

しかし実際に利用してみると、かなり差があるように思われます。

後学のため、どこに差があるのか、を文章化してみます。



『Yahoo!地域情報』は画面右上に検索フォームがあります。
最近のサービスによくあるように、「まず例に挙げられているキーワードを入力して試してみてね」と例文がフォーム内に表示されています。一見、親切そうなUIです。
（画像はクリックすると拡大します）



初めて使うので、まずは例文のとおりに「東京ミッドタウン、渋谷駅」と入力しました。そして二つ目のフォームにカーソルを移動。
すると、なぜか一つ目のフォームが、フォームでなくなりました。もうキーワードを修正できなくなってしまったのでしょうか。

実は入力不可になったと思われた一つ目のフォームは、キーワード上でクリックするとフォームが復活します。だからといってわざわざフォームを消す理由が分かりません。
仮に理由があったとしても、ユーザーに「入力できなくなった」と勘違いさせる以上の理由があるとは思えません。

混乱しつつ二つ目のフォームにも、例に挙げられているとおり「ホテル、郵便局」と入力して検索ボタンをクリック。

すると、見事に1件もヒットしません。

実は例にあった「東京ミッドタウン、渋谷駅」というのは、「東京ミッドタウンか渋谷駅の、どちらかを入力してね」という意味だったのです。わかりづらいです。


一方、同種のサービスである『Googleマップ』をあげてみますが、キーワードごとにかぎカッコでくくられており、どのように入力すればいいのか一目瞭然です。

例文が常時表示されているので、「一つ目のフォームに入力するのは場所？キーワード？時間？そのほか？」と悩むこともありません。

そもそもYahoo!地域情報の場合、フォームにカーソルをあてると例文が読めなくなる、という仕様も使いづらい一因です。
例文は初めてサービスを使ってみる人にこそ必要なものですが、そのようなユーザーがじっくりと例文を読んでから入力という行動を始めるとは思えないからです。


親切のつもりでつけた機能が、実は逆に使い勝手を悪くするというのはよくあるパターンです。
サイトを設計するときは、どのような熟練度のユーザーがどのように利用するかをイメージしながらUI構築をしないといけないのだと思いました。