へたれwebディレクターの覚え書き 2008-05-26T16:43:16+00:00 Serene Bach タブインターフェースを使うための条件 http://www.studio-no9.com/sb/sb.cgi?eid=207 2008-05-22T00:59:23+09:00 2008-05-21T15:59:23Z メニューの表示にタブデザインを採用するサイトが増えています。が、個人的には、ただ見栄えがいいからとの理由でタブデザイン（タブインタ... takeyoshi TOMODA Web > UI / design
が、個人的には、ただ見栄えがいいからとの理由でタブデザイン（タブインターフェース）を採用するのは反対です。

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

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

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


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

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

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


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

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

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

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

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

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

Amazon.co.jpにはかなり大量の情報がありますが、商品情報は（基本的に）「1ページ＝1商品」です。このような場合に、タブによるグループ分け表示は適しています。
画面3・amazon.co.jpのタブ（クリックで拡大）
タブは並列関係にある同じ種類の情報を、あるルールにのっとって分割するから意味があります。情報に階層関係、主従関係があると、デフォルトのタブを開いている状態のときに他のタブをクリックしたらどのような結果になるかをユーザーが想像しづらくなってしまいます。

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

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


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

タブインターフェースを採用しつつページ遷移が発生する例として、Yahoo!メールとYahoo!カレンダーで起こる問題を考えてみます。
画面4・yahoo!メールとカレンダーはタブで切り替えるようなUIを採用している（クリックで拡大）
会議参加依頼のメールが届いて、その予定をYahoo!カレンダーに登録しようするときのフローを考えてみましょう。

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

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

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

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


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

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

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


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

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

ヤフーのトップページにあるニュースコンテンツは優れた例だと思います。
画面5・Yahoo!トップのニュースコンテンツは優れたUIだと思われる（クリックで拡大）
「トピックス」という名前で注目の記事が表示されています。一般のユーザーは、トピックスの記事を目にすれば十分です。
もし他の記事を見たくなったり、他の記事を見る必要が生じた場合には、きっとタブをクリックしてくれるでしょう。
もともとニュースを見ることが目的なら、きっと「一覧」をクリックしてくれるはずです。

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

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


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

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

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

Amebaもタブメニューを採用しています。この「トップ」画面で、「ルーム」というタブ名からそこになにがあるか想像できるでしょうか？
画面6・amebaのトップページにあるタブはタイトルから内容を想像できない（クリックで拡大）
タブ名「ブログネタ」も中身が想像できません。きっとブログを書くためネタがあるのかなと思いクリックすると、いきなり謎の生物が表示されます。

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

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

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


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

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

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

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

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


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

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

追記


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

タブインターフェースを採用することが決まったら、次に検討するのは「見やすく」や「高速に」などかと思います。それらについては参考ページに詳しいのでそちらをお読みいただくのがいいかと思います。]]> XAMMP再インストールでMySQLが起動しなくなったら http://www.studio-no9.com/sb/sb.cgi?eid=206 2008-05-19T00:27:32+09:00 2008-05-18T15:27:32Z 自分が何度も引っかかるので、覚え書きを残しておきます。なお、以下の記述はWindows XP professionalでのものです。XAMPPを何度かインストール（アッ... takeyoshi TOMODA Web > PG なお、以下の記述はWindows XP professionalでのものです。


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

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


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

画面1・Windows XPのサービス管理画面（クリックで拡大）
  1. コマンドプロンプトを起動
  2. 現在XAMMPがインストールされているディレクトリに移動し、その中の「mysql\bin」に移動
  3. mysqld-nt --removeを実行

画面2・コマンドプロンプトでコマンドを実行
  1. XAMPPコントロールパネルからMySQLを起動

画面3・XAMPPコントロールパネルからMySQLを起動
これで無事に起動に成功しました。


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


以上、自分用メモでした。]]> 地域情報サービスの検索フォーム比較 http://www.studio-no9.com/sb/sb.cgi?eid=205 2008-05-13T23:27:30+09:00 2008-05-13T14:27:30Z 『Yahoo!地域情報』と『Googleマップ』の検索フォームには、それぞれ検索例が掲載されており、初めて利用するユーザーが使い方に迷わないように... takeyoshi TOMODA Web > UI / design Yahoo!地域情報』と『Googleマップ』の検索フォームには、それぞれ検索例が掲載されており、初めて利用するユーザーが使い方に迷わないようになっているようです。

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

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



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


初めて使うので、まずは例文のとおりに「東京ミッドタウン、渋谷駅」と入力しました。そして二つ目のフォームにカーソルを移動。
すると、なぜか一つ目のフォームが、フォームでなくなりました。もうキーワードを修正できなくなってしまったのでしょうか。
画像2・Yahoo!地域情報（検索条件を入力中）
実は入力不可になったと思われた一つ目のフォームは、キーワード上でクリックするとフォームが復活します。だからといってわざわざフォームを消す理由が分かりません。
仮に理由があったとしても、ユーザーに「入力できなくなった」と勘違いさせる以上の理由があるとは思えません。

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

すると、見事に1件もヒットしません。
画像3・Yahoo!地域情報の検索結果
実は例にあった「東京ミッドタウン、渋谷駅」というのは、「東京ミッドタウンか渋谷駅の、どちらかを入力してね」という意味だったのです。わかりづらいです。


一方、同種のサービスである『Googleマップ』をあげてみますが、キーワードごとにかぎカッコでくくられており、どのように入力すればいいのか一目瞭然です。
画像4・Googleマップの地図検索
例文が常時表示されているので、「一つ目のフォームに入力するのは場所？キーワード？時間？そのほか？」と悩むこともありません。
画像4・Googleマップのサービス検索
そもそもYahoo!地域情報の場合、フォームにカーソルをあてると例文が読めなくなる、という仕様も使いづらい一因です。
例文は初めてサービスを使ってみる人にこそ必要なものですが、そのようなユーザーがじっくりと例文を読んでから入力という行動を始めるとは思えないからです。


親切のつもりでつけた機能が、実は逆に使い勝手を悪くするというのはよくあるパターンです。
サイトを設計するときは、どのような熟練度のユーザーがどのように利用するかをイメージしながらUI構築をしないといけないのだと思いました。]]> 『ケータイ白書』は掲載内容にもう一工夫欲しい http://www.studio-no9.com/sb/sb.cgi?eid=204 2008-05-13T00:46:37+09:00 2008-05-12T15:46:37Z 職業柄「ケータイ白書」は毎年、資料として購入しています。役だってはいるのですが、情報の載せ方にもう一工夫あれば、資料としてもっと使... takeyoshi TOMODA Web > マーケティング
役だってはいるのですが、情報の載せ方にもう一工夫あれば、資料としてもっと使い勝手が良くなるように思います。

年代別よりも職業別の集計を掲載して欲しい


ケータイ白書を見ていて「年代別の集計にどれだけ意味があるのだろうか？」と思うことがあります。

「ケータイを持つようになった」「パケット定額にした」「有料サービスを利用するようになった」「メールの利用が増えた」など、ケータイの使い方に変化があるのは、職業の変化（所得の変化、生活環境の変化）のほうが大きいと思います。

学生なら、「アルバイトをするようになったから支払い能力が上がった、だから有料サービスを利用しよう」、「友だちが一気に増えたからSNSを始めよう」などですね。

そうなるとケータイ白書の「10代・20代・30代」というくくりは、マーケティングの資料として使うのにはあまりに大ざっぱであることがわかります。

もっと細かく年代を刻むか、もしくは「小学生・中学生・大学生」などのように職業ごとに集計してくれたら…と思います。

前年度比の数字も掲載して欲しい


もう一点の不満は、前年度との比較が掲載されていないので「この数字は伸びてるの？」というのが分からない点です。

ケータイはおよそ2年に一度の頻度で買い換えられているそうです。つまり数年で大きく数字が変わります。
「今年どうだったか」の数字もいることはいりますが、来年再来年にどうなるか？を予測することのほうが実は重要だったりします。

予測をたてるためにも、前年度比くらいは載せて欲しいです。

まとめ


もしかしてもっと詳しい情報が知りたければ、ケータイ白書で使われているデータがさらに詳細に記載されている『ケータイ利用動向調査報告書』を購入してくれ、ということなのでしょうか。
10万円は個人には厳しいですが…。

]]> 鍋ぶたの取っ手の形が変わっただけで余計な気苦労から解放された http://www.studio-no9.com/sb/sb.cgi?eid=203 2008-05-13T00:35:57+09:00 2008-05-12T15:35:57Z webと関係ないのですが、便利だと思ったのでエントリー。無印良品で鍋とフタを購入しました。フタの取っ手の形に一工夫あり。直方体（に近い... takeyoshi TOMODA 使い勝手 > 使いやすい

無印良品で鍋とフタを購入しました。

フタの取っ手の形に一工夫あり。直方体（に近い形）なのです。画像1・MUJIで購入した鍋とふた

これだと、フタを裏返しにして置いたときに、取っ手が丸なのと違って、転がらないのです。
画像2・取っ手が直方に近い形状のため、フタが転がらない

これまでは熱くなっている鍋のふたを一時的に置くときに、転がらないかと慎重になっていたのですが、今は余計な気苦労をしなくて済むようになりました。

当たり前のようになっていたけど実は必要のない気苦労だった、というのは探せばwebの世界でもありそうですね。]]> テキストリンクとsubmitボタンの使い分けルール http://www.studio-no9.com/sb/sb.cgi?eid=202 2008-05-11T23:11:18+09:00 2008-05-11T14:11:18Z htmlにはページ遷移とユーザーからのフォーム入力内容受け取りの機能があり、それぞれテキストリンクはページ遷移submitボタンはフォーム入力内... takeyoshi TOMODA Web > UI / design
  • テキストリンクはページ遷移
  • submitボタンはフォーム入力内容の反映
と役割を担っています。

しかし最近ではajaxの一般化もあり、このルールにあてはまらないUIのサービスが増えてきました。

一度、ルールを整理してみようと思います。

テキストリンクとsubmitボタン、どちらを選ぶべきか


テキストリンクとsubmitボタンでどちらを選ぶべきか？を表にしました。
表1

以下、それぞれの内容です。

1・「遷移」か「実行」か


図1・Flickrの画像プロパティ編集画面
Flickrの画像プロパティ編集画面です。ここでは画像が撮影された時刻を編集しています。

編集完了ボタンを見ていただきたいのですが、編集して保存する場合は【SAVE】というsubmitボタン。これは一般的なUIです。
しかしキャンセルがsubmitボタンではなく“click here if you are not sure of the date.”とのテキストリンクになっています。

考えてみるとこのUIは理にかなっています。
Flickrのこの場面の場合のキャンセルとは、「編集を反映しないで編集画面を終える」のではなく厳密には「編集を反映しないで画像表示画面（前ページ）へ遷移する」です。
ページ遷移ですから、テキストリンクでいいのです。

ちなみに画像表示画面で直接タイトルを編集する場合は、キャンセルはsubmitボタンです。キャンセルしてもページ遷移が発生しないからこのようにしているのだと思います。
図2・ajaxによるタイトル編集画面

2・選択された内容は一時的反映か、記憶されるか


サービスの動作を設定し反映する場合、その設定に2種類あります。
「その設定が一時的なもの」か「その反映が記憶される」かです。

Yahoo! Japanの検索条件の設定は、検索条件を「動画」にしても、次にこのページに訪れるときはデフォルトの「ウェブ」に設定が戻ります。

本来、「設定の反映」はsubmitボタンのほうがいいと思われがちですが、このように設定が保存されないものは、テキストリンクのほうが一時的であることが伝わりやいと思います。図3・Yahoo! Japanの検索条件設定はテキストリンク

3・SVOCの“O（動作の対象）”はthisか


Flickrの一覧にある「削除」は
「この画像を削除」
を表しています。この場合、テキストリンクでも違和感がありません。

逆に検索ボタンなどは対象語がない、という状況は考えられません。
このような場合は、submitボタンを選択しましょう。

それをクリックしたら、まわりの内容も反映されるか


submitボタンは本来、フォーム入力に利用されるものです。
フォームでのsubmitボタンは、それ単独で利用されることはほとんどありません。ユーザーは「submitボタンを押すと、そのまわりにある入力フォームの内容が反映されるんだな」とのイメージをすでに持っています。

一方テキストリンクは、ページ遷移で使われます。ページが遷移するだけですから、そのページないでなにか入力されていても関係なく「ただページが移動するんだな」と理解します。

ですので、ページ内の入力項目が反映されるボタンにテキストリンクを使うべきではありません。

まとめ


長々と書きましたが、これが絶対に正解というわけではないと思います。
ご意見などあればいただけるとうれしいです。]]> プルダウンメニューの利用に適した条件とは http://www.studio-no9.com/sb/sb.cgi?eid=197 2008-03-19T03:25:22+09:00 2008-03-18T18:25:22Z ユーザーからの入力を求めるときのインターフェースはいくつかありますが、中でもプルダウンメニュー（ボタンダウンメニューとも呼ばれる）... takeyoshi TOMODA Web > UI / design
  • 限られたスペースでも設置できる
  • こちらが想定した内容に限定した入力をさせることができる

というメリットが魅力的で、ついつい多用しがちです。

ここではあらためて、プルダウンメニューはどのような条件で使われるべきなのかを考えてみます。


プルダウンを使うのに適した条件とは　


次の条件に当てはまる場合、プルダウンが適していると思われます。
  • 必ずしも入力必須でないもの(選択肢を選ばなくてもなんとかなる)
  • もし入力必須なら、どの選択肢を選べばいいのかすぐにわかるもの
  • 選択肢から複数を選ぶ必要がないもの
  • 直接入力するより選んだほうが早く入力できるもの


選択肢を選ばなくても動作可能なもの


たとえば「さらに詳細に絞り込む」ときなどがこれにあたります。
amazon.co.jpの場合、プルダウンが条件絞り込みに使われています。が、プルダウンがデフォルトのままでも、目的のページにたどり着くことができます。
図1・amazonのプルダウンはデフォルトのままでも利用できる

googleの検索オプションはさらに徹底しています。複数のプルダウンがありますが、すべてデフォルト設定のままで問題なく検索機能を利用できます。
図2・googleは検索オプションを細かく指定できるが、指定しなくても問題なく使えるようになっている

Yahoo!ブログの検索機能は、検索条件に「ブログ」「記事」「画像」を選べます。「絞り込み」というよりは「選択」であり、一見、プルダウンに適していないように思えます。
しかし検索結果を複合表示する「全体」を用意することで、デフォルトのままでも問題ないようにしています。
Yahoo!ブログの全体検索結果画面

（選択が必須の場合は特に）どの選択肢を選べばいいのかすぐにわかるもの


プルダウンは、選択肢をじっくり読むことに適していません。
「設問を見た時点でユーザーは答えを思いついており、あとは選ぶだけ」という状況で使われるべきです。
選択肢の文をじっくり読まないと選べないんのなら、別のインターフェースを検討するべきです。

自分が選択するべき項目以外は確認しなくてもいいもの

「あなたの住んでいる国は？」という設問が合った場合、答えはすぐに「日本」と浮かびます。
ユーザーがするべきことは「日本」を探すだけです。日本以外にどんな選択肢があるのかを読んで確認する必要はありません。シーランド公国があってもなくてもユーザーには関係のないことです。

プルダウンは、すべての選択肢を読まなければ選べないような設問に使うべきではありません。「すべての選択肢を」「よく読まないと」判断できないのなら、別のやり方を検討するべきです。

選択肢は少ないほうがいい

たとえ簡単な質問でも、選択肢が多いとどれを選べばいいのか混乱することがあります。
図4・選択肢が多すぎると逆に複雑化する

複数選択したくならない


ホテルの予約をしたいとき、「ツインだとうれしいけど、ないのならダブルでもいいや」という状況はあり得ます。画面のようなフォームだと、そのニーズに応えることができません。
図5・部屋選択の悪い例

プルダウンメニューを使うときは、ユーザーが複数選択したくなるかどうかを前もって検討するべきです。

直接入力するより早い


たとえば「生まれた年を選択してください」とプルダウンから選ばせるなら、もしかしたら直接入力してもらったほうがユーザーにとっても楽かもしれません。
本当にプルダウンが便利なのかは、設問ごとに検討されるべきです。


アクションコマンドとしてのプルダウンを考える


プルダウンから選択すると、直後になにか動作が起きるUIのページを見かけます。
ユーザビリティー系の本には、動的なプルダウンは推奨しないと書かれていることが多いです。
本当にそうなのか、そうならばどのような理由からなのか、を考えてみます。

ページ遷移


プルダウンを選択したとたんにページが遷移するインターフェースを見かけることがあります。リンクショートカットに使われていることが多いようです。

しかしショートカットを用意したくなるような「頻繁に使われるリンク」「重要なリンク」なら、もっと別なやりかたでフィーチャーするべきです。

また、プルダウンのボタンをクリックするまでどんなリンク先があるかわからないわけですから、あまりいいUIとは言えません。

明確な理由やメリットがないのに、一般に定着しているUIルールから逸脱するのは避けるべきだと思います。

ただ、check*padのような例外もあります。
図6・check*padではプルダウンショートカットを採用している

ここで表示されているページは、すべてユーザーが入力したモノです。つまりユーザーはプルダウンボタンをクリックする前からどんな選択肢があるのかを知っています。

このサービスは「とことんシンプル」がサービスの大きな魅力になっています。クリック数を少なくすることは、このサービスを選んでいるユーザーの希望に適います。

しかしcheck*padはあくまで特殊な例であり、普通のサービスでは、このようなUIは選ぶべきではないでしょう。

選択された項目がすぐに反映


webサービスでは特殊ですが、オフィスソフトなどでは当たり前の用に使われているインターフェースです。
ワープロソフトなどでは、フォントを選択した直後にそれが画面上で反映されます。
図7・選択直後にフォントの設定がかわる

クリック数を減らす以外にも、プルダウンで表示されている内容と、実際に表示されているものとの不一致を避けるという意味で、実は優れたインターフェースかと思われます。

fashionwalker.comでは、ソート条件にプルダウンが使われており、条件を変更した直後に画面上で反映されます。プルダウンで表示されている条件と実際の表示とがずれることを避けています。
図8・fashionwalkerのソート条件

しかし条件と表示件数を続けざまに変更すると、画面の表示内容がついてこれないようです。
動的なプルダウンを使うのなら、正常に動作することは必須条件だと思われます。そうでないと、ユーザーを混乱させることになります。

また、Yahoo!ショッピングのように、ソート条件を並べて表示しても問題ないわけですから、本当にプルダウンにしなければならないのか？をよく検討したほうがいいでしょう。
図9・Yahoo!ショッピングのソート条件

プルダウンを動的な絞り込みに使う


Yahoo!グルメでは、まず都道府県を選ぶとさらに詳細なエリアの選択プルダウンが動作する仕組みになっています。
図10・Yahoo!グルメでは都道府県を選ぶと、さらにその内訳エリアを選択できるようになる

OPTGROUPを使って項目を階層化し一つのプルダウンにまとめるやりかたもありますが、リストが長くなるだけで使い勝手があまり改善されないからか、それほど一般的ではないようです。

Yahoo!グルメのプルダウンは絞り込み目的です。選択は必須ではないですし、都道府県だけで絞り込みをやめることもできます。
渋谷の店を検索したい場合、プルダウンで「東京」「渋谷」から階層を辿ることもできますし、検索窓に直接入力「渋谷」と入力することもできます。

また、どうしても「渋谷」で検索したい場合、そのユーザーは渋谷が「東京都」であることを知っているので、わき道にそれるということはありません。

「選択肢を選ばなくてもいい」「どの選択肢を選ぶべきかすぐにわかる」との条件を満たしていますし、階層化するよりもいいのなら、採用してもよさそうです。

一方でYahoo!ブログのカテゴリ選択に使われているプルダウンは悪い例です。
ディズニーランドに行った日記を書いてカテゴリを「テーマパーク」にしたいとき、「テーマパーク」がどの親カテゴリに存在するのかわからない可能性があります。直接「テーマパーク」を入力するフローは存在しません。
図11・Yahoo!ブログのカテゴリ設定

そもそも「テーマパーク」というカテゴリが存在するのかも前もってわからないので、「どの選択肢を選べばいいのかすぐにわかる」というルールにも反しています。

カテゴリを入力させたいのなら別のUIを検討するか、タグのような「アバウトなカテゴリ」にしたほうがいいかもしれません。


最後に


今回はプルダウンに限った話でしたが、フォームに違和感がある場合、他にも検討するべき要素はたくさんあります。

1年前のエントリー「会員登録フォーム3つのポイントと5W1H」は未だに有効だと思いますので、そちらもお読みいただけるとうれしいです。]]> ケータイがコミュニティーツールであることを意識した機能 http://www.studio-no9.com/sb/sb.cgi?eid=198 2008-03-08T01:45:30+09:00 2008-03-07T16:45:30Z ちょっと前に、「初心者にとって、友だちから教えてもらったケータイのアドレスを登録するまでの手段が難しすぎる」といった内容のエントリ... takeyoshi TOMODA 使い勝手 > 使いやすい データを登録してもらうための工夫』）。

「ケータイへのアドレス登録は、まだ使い方を把握しきれていないケータイ購入直後に行なうことが考えられのに、メーカーはユーザーレベルを想定せずに機能を設計しているのでは」という内容でした。

この件について、「最新の機種同士なら、ケータイ同士をくっつけるだけで自分のアドレスを相手に伝えることができる、IC転送という機能がある」と教えてもらいました。
これはすばらしい進化だと思います。


「作ったモノを楽しく使ってもらうには？」というのは、モノヅクリをする人なら絶対に考えなければいけないことだと思います。

ケータイでいえば、ビジネスツールであり、ガジェットであり、コミュニティツールでもあります。
そしてそれぞれの役割ごとに、利用してもらうための要件があります。

コミュニティツールとして楽しめるのは、コミュニケーションをとる相手あってのことです。ケータイでいうと
  • 電話をする相手が存在する⇒相手に電話をするための手段を入手している
  • メールをする相手が存在する⇒相手にメールするための手段を入手している

が絶対に必要です。
同じコミュニティツールであるmixiなどと、このあたりは変わりません。

つまりコミュニケーションツールとしてのケータイの楽しさを知るには、すでにケータイに複数の連絡先の情報が設定されていないといけないのです。
イコール、連絡先登録ができない人は楽しさに気づけない、ということになります。
（もちろん実際はほかにも楽しめる方法はあるのですが、今は措きます）


相手のメールアドレスを登録したくなったとき、これまでならどんな手段があったかというと、
  • 相手からメールが来たら、それを登録（相手にメアドをどうにか伝える必要あり）
  • 赤外線通信（赤外線受信モードのやり方がわからないと使えない）
  • 手入力（それが簡単にできるのなら苦労しない）

です。どれもケータイ初心者にとって敷居が高すぎです。

しかしIC転送だと、受取る側はなにもしないくていいのです。
「メールアドレスを交換する二人ともが使い方を知っていないと苦労する」だったのが、「どちらかが使い方を知っていれば簡単にアドレス交換できる」になりました。これは大きな改善だと思います。



みんながみんなコミュニケーションツールとしてのケータイの楽しさを知る必要はないとは思うのですが、とはいえ私はプランナーですので、どんな場面でも「みんなに使ってもらうためにはなにが必要なんだろう？」というのは考えていたいな、と思います。]]> もうちょっと頑張れAmazonおまかせリンク http://www.studio-no9.com/sb/sb.cgi?eid=196 2008-03-06T02:10:35+09:00 2008-03-05T17:10:35Z 雑談エントリーです。このサイトでは右カラムにAmazon.co.jpのアフィリエイトブログパーツ「Amazonおまかせリンク」を設置しています。Amazonおまか... takeyoshi TOMODA 日常生活

このサイトでは右カラムにAmazon.co.jpのアフィリエイトブログパーツ「Amazonおまかせリンク」を設置しています。

Amazonおまかせリンク(R)は、あなたのWebサイトの内容に沿った商品を自動的に表示する便利なリンク方法です。

というスグレモノ、のはずなのですが、実際には浄水器とかゲームとかばかりが紹介されているんですよね。

そして今はこれが。
図1・ドアラ著「ドアラのひみつ　かくさしゃかいにまけないよ」
絶対違う…。]]> サイトのリニューアルは「これからはこう使ってほしい」との提案があるべき http://www.studio-no9.com/sb/sb.cgi?eid=195 2008-03-06T01:55:52+09:00 2008-03-05T16:55:52Z サイトをリニューアルするとき、今あるコンテンツの扱いをどうするか検討すると思います。アクセス数をチェックして「このコンテンツは人気... takeyoshi TOMODA Web > idea/plan アクセス数をチェックして「このコンテンツは人気があるからもっとフューチャーしよう」「このコンテンツは使われていないから位置を下げよう」といったやり方が一般的です。

しかし、必ずしも今のユーザーの利用動向に合わせたリニューアルが、イコール正しいリニューアルというわけではないと思います。

私は、サイトのリニューアルは、「今こう使われているから」を考慮しつつも、「これからはこう使ってほしい」との提案があるべきだと思います。（そしてその提案は、トップページを見たら伝わる、というのが望ましいです）

機能が使われていないのは、「そのコンテンツが必要とされていないから」ではないかもしれません。
ユーザーに魅力を伝えきれていないからかもしれませんし、そもそもユーザーの興味をひいていないから、ひょっとしてユーザーが気づいてすらいないから、かもしれないからです。

サービスを提供する目的は「使ってくれると絶対に便利」「使ってくれたら絶対に楽しい」のはずであり、それには必ず使われ方の理想形があるはずです。


また、それらを明確にしよう、という視点で考えると、ペルソナやシナリオを作る意味もぐっと高まるように思います。


私たちがインターネットを通じて提供しているのは、単純にサービスではなくライフスタイルなのだ、というのを忘れないようにしたいです。]]>