ビフォー
アフター（1つ内容が増えてますが）
この変更については、まだ100%納得しているわけではないのだけど、とりあえずいきさつを書いておこうかな。まず、きっかけはこの文書。
「タブ」というのは本来同じリソースについて、複数の異なる視点での表示に切り替える為に使うもの。今現在使っているこのはてなダイアリの「日記を書く」では今書いている記事を「編集」「プレビュー」をタブで表示切り替え可能だが、これは良くできている。なんだか思いがけず「はてな」を褒めてしまったな。ところが、タブブラウザのそれは非常に出来が悪い。極めて多くのユーザーが使い勝手の悪い方法でタブを使用している。すなわち全く関係のない情報をタブで並列してしまっていたり、Googleの検索結果のリストとそのリンク先とをタブで並列させてしまったり。それではリストを逐次選択しづらいだろうに。
Hatena::agenda – フォーム部品を不適切に使うな（強調は私による）
初見では、なるほどと思うのが半分、ホントにそうか？と思うのが半分くらいでした。
タブブラウザの例はピンとこないけども、確かに（同じリソースについて、複数の異なる視点での表示に切り替える為に使
っている）はてなダイアリーやWikipediaのタブ切り替えUIは、自分の中で引っ掛かり無くなじんでいる印象がある一方で、（異なった情報を並列している）Amazon.co.jpのタブはごてごてしていて、一見してわかりにくいという印象がありました。
なので、うちのサイトのタブUI、「プロフィール」・「ウェブログ本文」・「過去ログ」などを切り替えるインターフェイスも悪例なんではないかという懸念が少しあったんですよね。
で、このままじゃ検証できないんで少し調べてみると、ソシオメディアのUIデザインパターンのページでは、タブの並列切替として、その役割をタブには、並列な関係を持つ情報を1つずつ格納する
と定義してます。
なるほど、タブの役割がそうだとして、並列するなら確かに各タブに格納される情報はなんらかの共通性を持っていないといけません。「プロフィール」や「ウェブログ本文」、「過去ログ」はそういう意味では共通性は薄いと言わざるを得ないでしょう（せいぜいドキュメントと言う共通性くらいかな）
ちなみに、アップル ヒューマンインタフェースガイドラインでは、タブは「分割コントロール」に分類され、あなたのアプリケーションや、親ウインドウのモードや表示を切り替えるために使用され
ると書いています。前述の同じリソースについて、複数の異なる視点での表示に切り替える
ことを一言で表すとしたら「モードの切り替え」ですかね。
だとするなら、これに変わるUI部品を設定しないといけない。先のソシオメディアのページを概観すると、現在位置のしるしという部品があった。
システム内の情報空間のうち、現在どこに位置しているのかを視覚的に表明する
役割があって、どっちかってと、これが近いかも、ということでコチラを採用してみた。
位置固定にするか、常にページの上端にくっつくよう移動するか（CSSで言うとpositionプロパチがabsoluteかfixedか）で悩んだけれども、あんまりfixedな部品を増やすと可視性が悪くなるので、とりあえず位置固定（position: absolute;）にしておきました。
これもフォントサイズなどと同様ユーザが切り替えられるようにはしたいですね（ウェブ上のUIはデスクトップアプリと同程度かそれ以上に柔軟にカスタマイズできるべきだと思ってます）。ま、一応の落としどころはこんな所です。
意味区切りを明確にして、項目の固まりごとにマージンを設けてみました。また「本文」では伝わりにくいので、「ウェブログ」にしてみました。
Popularity: 2% [?]
- キーワード：
サイト内
サイト外
読者のコメント
0件