Yahoo! Design Pattern Library :: Navigation Tabs の訳

Yahoo! UI Libraryの訳を一通り終えたので(修正すべき箇所はたくさんあるんですけど・・・)、今度はデザインパターンをちょこちょこ訳して見ます。

正直、すごい訳しにくいな・・・無理に訳さないでそのまま英語で呼んだ方が意味内容を理解しやすいかもしれないです。

http://developer.yahoo.net/ypatterns/pattern_navigationtabs.php

Navigation Tabs

Problem Summary

The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.

EXAMPLE:

Main tab navigation from Yahoo! News

Use When

There are 3 - 10 category titles.
The category titles are relatively short and predictable.
The number of categories is not likely to change often.
The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
The categories belong to a single site.
You need to represent the highest level navigation options on a site.
You need to indicate the user's current location in the set of available options.
You need to change the entire page and not a sub-section of content within the page.
You need a way to control the highest level of navigation

Solution

  • Present a single-line row of tabs in a horizontal bar under the site branding and header.
  • If the first tab is labeled Home then it should point to the site's home page.
  • The complete tab area is clickable-- not just the tab label.
  • Tab navigation should be maintained on all pages that are linked to by the tab set.
  • When the list of categories becomes too long and suggests the need for a "more..." link, consider using a left bar navigation instead.

Maintaining the Metaphor

  • The selected tab should come forward in terms of prominence from the other tabs. Unselected tabs should sit back visually to reinforce the notion of where the user is via the selected tab.
  • The page that is delivered by selection of the tab should be visually connected to the tab via design cues: color, brackets, borders etc. Selection of another tab redraws the entire page and presents the new information tied to the new selection.
  • Never stack multiple rows of tabs as this leads to confusion about the selected layer versus inactive layer.
  • Tabs should always appear in the same locations as a user navigates within the tab set from one tab to another.

Rationale

  • Tabs provide context. They offer the ability to give visual indication of a user's location within a body of information.
  • Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
  • Tabs provide navigation. They provide the ability to navigate the site

Accessibility

Allow the user to navigate across the tabs in a logical order with the Tab key.
A focused tab can be selected with the Enter key.


ナビゲーションタブのデザパタ


問題の概要

ユーザーは、サイト内のコンテンツと特徴となっている部分を特集して、それがサイト内のどこにあるのかが明確になっていることを要求します。



こんな時に使おう

  • 3〜10のカテゴリ見出しがある時
  • カテゴリのタイトルが比較的短めで、内容の予想がつきやすい
  • カテゴリの数がそれほど頻繁に変わらない
  • コンテンツ表示にページ全体のwidth(幅)を必要とする
    • 他の方法として、レフトバー(左側表示のバー)を使うってのもある
  • カテゴリの属しているサイトが一つだけ
  • 最も高階層(カテゴリの階層?)での選択ナビゲーションを作らないといけない時
  • ユーザーのいる場所を、ナビで示さないといけない時。
  • ページを変える時は全部変える(ページ内の一部のサブのコンテンツを変えるような場合ではない)
  • 最も高階層のナビゲーションを操作しないといけない時(深い層にいても、一番高い層のカテゴリ・リンクで飛べる)


ソリューション

  • 水平なバーの中に単線のタブ列をセットして、サイト・ブランディングとヘッダーの下部に設けます

(*サイト・ブランディング・・・サイトのロゴマークだったり、イメージ写真などサイトの指標となり付加価値をつける要素かな?)

  • 一個目のタブにHOMEと記すのであれば、HOMEタブはサイトのホームページ(トップページ)を示すべきです
  • カテゴリが長くなりすぎて「もっと読む」のリンクを作らないといけないような時はレフトバーで代わりのナビゲーションをすることも考えた方がいいでしょう。


メタファーの保持?

  • 選択されたタブは他のタブよりも前面で目立つようにするべきです。選択されていないタブは引っ込んで見えるようにするべきでしょう。ユーザーが自分で選択したタブによって、今 自分がサイト内のどこにいるかを強く意識させるためです。
  • あるタブを選択して飛んだページのタブは、色・ブラケット・境界線などのデザイン要素で 視覚的な連続性をもたせておくべきです。
  • 複数のタブを横方向に重ねてはいけません。選択してあるレイヤとアクティブでないレイヤとの混同を招きます
  • ユーザーを他のタブへと誘導させるためにも、タブはいつも同じ位置に出てくるべきです。


理性的なお話

  • タブはコンテキスト(文脈)を教えてくれます。いろんな情報がありますが、中でもタブはユーザーの位置を視覚的に示すことに長けています。
  • タブは現実世界のメタファーの上になりたっています。タブが選択された状態は、そのタブが他のタブよりも物理的に前にある という ファイルフォルダータブのメタファーによって強められます。(*図書館にはタブつきの分類検索の紙があるけど、あんな感じかな?)
  • タブはナビゲーションします。タブはサイト内をナビゲートしてくれます。


アクセシビリティ

  • TABキーを押すと 論理的な順番でタブのフォーカスが移るようにしておく
  • フォーカスされたタブはENTERキーで押せるようにしておく