2009年8月13日木曜日

トップとセカンドのデザインパターン

Webサイトデザインで2ndレイヤとか、セクションのトップページとかいわれる、グローバルナビをクリックすると表示されるページ。

こいつらをどう使うべきか、サイトによっては悩むことがあるんですよね。

とくに全体のトップページやナビゲーションが雄弁で、セクションのトップページが、それらの繰り返しにしか見えなくなってくる場合とか。

たとえば、グローバルナビがプルダウンになっているとき、末端の階層以外のノードをクリックされたら何出すの?みたいなことないですか。

例を出しちゃあれですけど、IBMのサイトみたいなやつ。グローバルナビの「ソリューション」のところにマウスオーバーすると、スッとプルダウンメニューが表示されますけど、そのままクリックして表示されるページは ... 。

まあ、これの場合、下位階層でよく使われるメニューをプルダウンに含めておいて、残りは「その他」扱い。で、「その他」とはすなわち 当該セクションのトップページってわけで、これはこれで、合理的なんですかね。マイクロソフトのオフィス製品が採用したメニューを小出しにするやり方と似てますね。

ともかく、このへんでどうも、なんとなく毎回(今日もまた)悩んでるってことは、サイトのトップページとセクションのトップページの使い方や連携のさせ方について、その手口をちゃんと究めてないんじゃないかな、と不安になりました。いつも雰囲気で片付けちゃってるだけなんじゃないか。

で、とりあえず、仕事のうちとして小一時間ほど考えてみたところを、メモしておきます。いや、これで済むとは思ってませんが、まずは、あくまでも、とりあえずということで。

まず一番、単純なのは、フィルターパターンって呼んでいいやつらだと思います。

サイトのトップページは、フィルターなしのコンテンツのリスト。セクションのトップページはカテゴリなど、なんらかのフィルターがかけられた上でのコンテンツのリスト。

ブログがそうですし、ニュースサイトもたいていコレですね。

個人的には、全部、これで済めばいいのに、と思います。でもそうはいかない。

たとえば、複数のコンンテンツの組み合わせで、より大きなひとつのメッセージを強く打ち出していきたい場合は、単純なフィルターパターンでは弱い。ってことがある。

そういうとき使うのが、フィーチャーパターンって呼んでいいやつらだと思います。

先に例をいっちゃうと、アップルの製品サイトはみんなこの構造ですね。iphoneとかね。

あと、小さな企業サイトなんかもこの構造になりますね。

トップページは、ウェルカムメッセージと、下位の各セクションのフィーチャー(特出しコンテンツ)の集合で出来上がっている。セクションのトップページは、さらに下位のサブページのインデックスになっていることもあるけれども、それ自体、末端のコンテンツとしての情報価値を持っている。みたいなかんじ。

これも悪くないです。個人的には、フィルターパターンとフィーチャーパターンで全部済んでくれたら、どんなに素敵だろうと思います。

あんまりよくないのはこっから先で。

フィルターパターン、もしくはフィーチャーパターンを階層化したい場合、ってのが出てきます。

ディレクトリーパターンって呼んでいいやつらです。ibm のサイトとかこれですね。

そう悟られないようにいろいろ肉付けはするけれども、骨格はどういったっていわゆるディレクトリ型サーチエンジンとして出来ています。

サイトのトップページはルートノード。セクションのトップページはルート直下のディレクトリ。

で、末端のコンテンツをリストするディレクトリにたどりつくまでの中間ディレクトリには、下位に配置されるコンテンツのフィーチャーと下位のディレクトリのリストが表示される、って具合になる。

たぶん、これでやっかいなのは、ディレクトリーツリーの"濃度"が一様にならなくて、へんに薄い部分ができちゃったときじゃないでしょうか。全体の濃度が一様になるように整理するのがわかりやすさにつながるとは限らなくて、なんてやってるうちに。

そんなとき、ディレクトリ型サーチエンジンであることを剥き出しにしないための工夫 = "肉付け"がそらぞらしくなってしまうことがあったりして。つまり、このセクションのトップページ、グローバルナビのプルダウンとたいして変わらないんだけど、ホントに必要?みたいな。ね。

あるいは、思い切って、いっそ剥き出しでいこうぜ! だって、別にサイトマップ作ったりするでしょ。そんなの作るくらいなら、メインのナビゲーションの中にちゃんと織り込んでおこうよ。つまり セクションのトップページって、セクション別のサイトマップってことでいいんじゃね? もっと魅惑的なメインのユーザー導線は、サイトのトップページからちゃんと張られていることだろうし!検索エンジンや他の参照サイトから直でくる導線のほうがよっぽど太いかも知れないし!

なんて管も巻きたくなってきます。

でもそれは管なので、たぶん賛同は得られなくて。では、どうしたらいいのか。

いや、だから、ひょっとすると、ぼくが知らない素敵なパターンが他にあって、それを使えば気持ちよくなれるんじゃないかな、と。いままでにだってそんなことがたくさんあった。

... 引き続き考えてみます。

3 件のコメント:

uenomanabu さんのコメント...

何の前触れもなしにかなり唐突感ありまくりなのですが、コメントさせていただきます。

あ、その前に、大変ご無沙汰しております。皆さんお元気でしょうか。それから、何度もリンクをはっていただき、ありがとうございます...

で、「トップとセカンドのデザインパターン」についてですが、これは、「トップページは必要か?」という問題と併せて、僕も長年悩んでいることです。最近は業務システムとかのアプリケーションばかりやっているので、あまりこの問題には直面しないで済んでいますが。

ちょっとうちの会社のサイトを作った時に考えたことをもとにして書きますね。

まず考えるべきことは、果たしてサイトには階層が必要なのか、ということだと思います。階層があるから、トップページとかセクショントップとかの概念が生まれてくるわけで。さらに、情報整理上の階層があったとしても、末端以外の中間階層にページが必要なのかという疑問も出てきます。例えばパソコンのハードディスクには階層的なディレクトリ構造がありますが、中間階層つまりフォルダは単なる入れ物としての表現になっていて、コンテンツは付随していません。だからウェブでも、中間階層では FTP でウェブサーバーの中を見てる感じでいいんじゃないかとか。

中間階層もページとして扱ってしまうと、いくつか問題が出てくると思います。

まず、本来のコンテンツ(パソコンにおけるファイル)と、それらにアクセスするためのUI(パソコンにおける Explorer)の区別が曖昧になってしまうことです。つまりユーザーの関心の対象であるオブジェクトの単位が分からなくなってしまいます。同じコンテンツがいろいろな抽象度で散在して、目的のオブジェクトに到達しているのかどうか判断できません。

それから、そもそもページという概念はどうなんだという更なる問題に行き着いてしまうことです。ウェブのデザインでは普通、グローバルナビゲーション的な共通要素を全ページに配置しますが、ページという紙メタファで考えた場合、同じ情報の複製を全ページに配置するというのはなんだか気持ち悪いです。つまり、今見てるページにあるグローバルナビゲーションは、直前に見てたページにあったグローバルナビゲーションと同じものなのかそれとも複製なのか、はっきりしないのです。これは、ページごとにブラウザが内容をリフレッシュして、その際に一瞬明滅するからだと思います。視覚的に紙芝居のように見えてしまうのです。

そこで僕はある時から、ページという考え方をやめました。URL はひとつのページを指すのではなく、画面のある状態を指すものだと考えるようにしました。GET メソッドで CGI にリクエストする場合にはまさにそうですよね。URL がクエリーになっていて、画面のある状態、つまり画面を生成する条件を示しています。

そう考えると、ウェブというのはデータベースと同義であり、「検索の状態」と「コンテンツを表示した状態」の2種類のテンプレートがあればよいということになります。これは別に突飛な表現ではなくて、Google を考えれば、ユーザー体験は「検索結果」と「検索結果からひとつを選んで表示したどっかのコンテンツ」だけで成り立っているわけで、階層というものはなく、すべてのコンテンツ(ページ)はフラットに扱われています。それに対して特に違和感はありません。

この考えをベースに、自社のサイトを作りました。テンプレートは、「一覧(検索の状態)」と「詳細(コンテンツを表示した状態)」のふたつだけです。グローバルナビゲーションはありません。(余談ですが、スクロールを前提とした画面のレイアウトに、段組みはおかしいんじゃないかと常々思っていたので、すべてシングルカラムにしました。)

次に考えるべきことは、トップページは必要なのか、です。

本質的には、もちろん不要です。トップページはスプラッシュ画面みたいなものなので、目的志向のユーザーには邪魔です。お仕着せのプロモーション画像とかよりも、ユーザーにとって意味のある何らかのコンテンツもしくは検索結果が出ていた方がいいでしょう。例えば、直近にアップされたコンテンツとか(ブログはこれですね)、前回ユーザーが離脱した時に見ていたコンテンツとか。

ただ、企業のサイトでは、リピーターよりもむしろはじめて訪れるユーザーを重視しますし、そういうユーザーに対しては企業の全体像を知らせたいですから、何かサイトを俯瞰するようなメニューを前面に出さざるを得ません。いきなり Google の検索ボックスみたいなのが出てきても困ってしまいますので。

それから、企業のサイトで扱うコンテンツというのは、その性質上、時系列とかあいうえお順とかで整理してもあまり意味がないので(企業ニュースは時系列でいいですけど)、どうしても定性的な分類属性を設定することになります。「製品情報」とか「サポート情報」とか。だから結局、サイトを俯瞰するメニューとしてそういうカテゴリーの一覧を出すしかないと判断して、自社サイトではトップページを作ってしまいました。

ということで、自社サイトでは、一見カテゴリー分類による階層があるように見えますが、カテゴリーは単なる検索キーなので、実際にはコンテンツはすべてフラットになってます(URLを見れば分かりますね)。ブログツールで作ってあるサイトなので、まああたりまえなのですが。それで、トップページからカテゴリーを選んで進んだページ(セクショントップ)は、サイト内検索の結果画面と同じテンプレートになってます。つまり、セクショントップというのもひとつの検索結果だよね、ということで。

ちょっと極端な例になっちゃいましたが、本質的にはどのサイトにも適用できる考え方なんじゃないかと思います。

ちなみに、トップページを作ってしまったのがもやっぱりくやしかったので、リベンジとして iPhone 版の自社サイトでは、トップページが無い的な表現にしました。ツリーの頂点であるという表現を極力排除しました。

次に悩んだのは、「トップページ(カテゴリーで俯瞰した状態)」と「一覧(検索の状態)」と「詳細(コンテンツを表示した状態)」をもっとシームレスにできないか、ということです。

コンテンツを検索するということは、対象のオブジェクト群を遠くから俯瞰したり近くに寄って見たりするということですから、そのズーミングの度合いとかフィルタリングの条件は、ユーザーが段階的に、スムーズに、変更できるようになっているべきだと思ったのです。

例えば Ajax を使えば、カテゴリーで俯瞰した状態からコンテンツを表示した状態までの状態遷移を、ひとつのテンプレートで実装できるかもしれません。単純な例として、ブログでたまにありますが、最初はブログのタイトルとスニペットだけが一覧で見えていて、そのうちのひとつで「全部見る」見たいなリンクをクリックするとその場で残りがロードされて表示されるみたいな。そうすると、サイトはもはや「トップページしかない」ことになります。

で、そこまで本気で考えたのですが、結局やめました。

というのは、ウェブの作法として、やはり末端のコンテンツにはパーマリンクとしてのURLが必要だろうということです。全部 DOM 操作で画面を作ってしまうと、全部同じ URL になってしまうので。まあリンク先を「#hoge」とかにしたリンクのクリックでスクリプトを実行するようにして、いろいろな画面の状態をURLと紐づけることはできますが、画面状態を再現するためのスクリプトが必要になってしまいますし、何よりも、JavaScript への依存度が高すぎて、アクセシビリティ対応なんてしようものならサイトをまるまるふたつ作ることになってしまって、だったら最初からアクセシブルな方でいいじゃん、となったわけです。

... ということで、ブログのコメントとしてはありえない文字数になってしまいましたが、常々考えていたことを書かせていただきました。

takahashihideki さんのコメント...

u、u、uenoくん! コメントありがとうございます。ueno... の文字を確認したとき、ヒヤッとして、それからカァーっとなりました。びっくりさせないでください。

しかもこんなに親切にいろいろ教えてくださって ... 。よく読んで、慎重にレスします。

今、反射的にいえるとすれば、uenoくんがいう、その「極端な例」に僕も惹かれてます、ということくらいかな。検索エンジンorフィードリーダーとパーマリンクとの往復が気持ちよくなってくると、"サイト(の階層構造)"というパッケージングは消滅するはず、とか言いふらしてました。

いや、でも、ちゃんとしたレスはまたいずれ。

まずは、お礼をいいたくて。

uenomanabu さんのコメント...

驚かせてすみませんー。
教えるなんてとんでもないですよ。
もともとは takahashi くんに感化されてウェブの仕事に転職したクチなんですから。