web-dev-qa-db-ja.com

矢印はタブ付きWebページをどのように指しますか?

矢印はタブ付きWebページを指すようになっていますか?選択に向けて、または選択の本体に向けて?ユーザーが別のアイテムを選択し、特に矢印が本文を指しているときに矢印が何も指さない場合、厄介なシナリオが発生するようです。ベストプラクティスはありますか?

enter image description here

43
Aaron Benjamin

どの関係を強調したいですか?それを使用して決定を通知します。画像の下向き矢印は「のタイトル」または「詳細」または「子を持つ」という関係を示し、上向きの矢印は「の詳細」または「タイトルを持つ」または「持っている」の関係を示します親"。

下矢印の方が一般的であり、したがってより多くのユーザーに馴染みがあると思います。たとえば、CSSセレクターでは、 ">"演算子は "has-child"関係(親から子へのポイント)のためのものです。ユーザードメインを利用していますか?次に、下向きの矢印を検討します。 ITまたは数学のドメイン/ユーザーについてのみ、子/リーフから親/所有者に戻る矢印が頻繁に見られます。

一方、特にドメインが新規または異常な場合は、無指向性または双方向ソリューションを使用して、指向性の質問を削除できます。

Spotifyヘルプでは、選択部分と本文の間に無指向性の強調表示があります: https://support.spotify.com/us/

enter image description here

基本的に:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

23
Will

Will's answer に追加します。方向性のないハイライトを探している場合は、Googleのマテリアルデザインの優れた例を次に示します

タブの使用に関するマテリアルデザインガイドライン

表示されているコンテンツに対応するタブはhighlightedです。

タブは一緒にグループ化され、タブのグループは順番にそれらのコンテンツに接続されます。

タブをコンテンツに隣接させておくと、2つの間の関係を維持するのに役立ちます。分離が大きすぎるとあいまいさが生じる可能性があるためです。

http://www.google.com/design/spec/components/tabs.html#

enter image description here

21

彼らは両方とも間違って不必要に見えます。タブ付きインターフェースの場合、タブの色は選択したページの色にする必要があります。

12
PhillipW

オプションAをお勧めします。これは、タブテキストから以下のコンテンツに、これが強調表示されたタブであり、以下のスクリーンショットに示すように、その内容は以下のとおりです

enter image description here

ユーザーがコンテンツを左から右にスキャンし、矢印が視覚的なインジケーターになるため、他のタブに移動した場合でも、これはうまくいきます。

つまり、タブの矢印が他のコンテンツを指していないことが心配な場合は、色を使用して選択したタブを強調表示する代替タブのデザインを見て、ユーザーが視覚的に簡単に接続できるようにすることができます。

enter image description here

enter image description here

enter image description here

したがって、タブはいつでもどこにいるかを視覚的に示す必要があります。したがって、矢印と色のどちらを使用するかを重視することは、2番目の関心事であり、ユーザーが現在どこにいるかを簡単に理解できるようにすることに重点を置く必要があります。これを引用するには xboothの記事

ナビゲーションを計画するときは、方程式の「どこに行けますか」という部分に焦点を当てることは簡単で、ユーザーが現在どこにいるかを説明することを完全に忘れてしまいます。現在地と目的地の両方を含めることが非常に重要です。相対位置がない場合、ナビゲートするのははるかに困難です。

適切に設計されたタブは、アクティブな状態で現在の場所、または非アクティブなタブと区別される視覚的な外観を明確に示します。アクティブなタブは、色(またはその欠如)、サイズ、フォントの太さなどで強調表示できます。

sablity geek からこの記事を引用する

アクティブなタブはコンテンツ領域に接続されているように見える必要があります。実際のタブのメタファーを強化するために、アクティブなタブがコンテンツを含むページに接続されているように見えるようにする必要があります。

したがって、焦点はユーザーの視覚的なつながりを確立することにあるべきです

12
Mervin

Skeuomorphを使用する場合は、不要なバロック様式の装飾を避けてください。

これが、現在のデスクトップ(木製のデスクトップ)からのオリジナルで、ユーザーに何を表現しようとしているのかを理解するのに役立ちます。

enter image description hereenter image description hereenter image description here

矢印はこの視覚的な比喩に何も追加しません、それらは気を散らして混乱させるのに役立ちます。

この有害な影響の例として、質問の動機となった混乱を引用します。

8
RedGrittyBrick

インターフェースの設計は、歴史的に、ユーザーの親しみを高めるために現実世界の物理的なものに基づいていたため、類推を通じてインターフェースがどのように機能することが期待できるかを簡単に伝えていました。これが、「フォルダ」、「デスクトップ」などをこれらの名前で呼ぶ理由です。タブ付きのインターフェイスでは、タブのあるフォルダーに例えれば、タブはフォルダーの内容を示します。通常、タブは次のようにタブがフォルダーに突き出るようにフォルダーに貼り付けられています。

folder tabs

タブを使用するアプリケーションは通常、アクティブなタブを目立たせ、他のタブを目立たなくすることで、「このコンテンツはこのタブの下にある」というこの関係を反映します(つまり、 、「バックグラウンドで」):

application tabs

あなたのケースでは、最初の例は「現実の世界」の類推を最もよく示しています矢印は下を指す必要があります。プラスチックのタブがコンテンツに少し突き出ているのと同じように。また、2番目の例は非標準です(したがって、予期せず、おそらく一部のユーザーを混乱させる可能性があります)。2番目の例は問題ありませんが、最適ではありません。私は最初のオプション、またはそれの修正でさえ、このようなもので行きます:

enter image description here

すべてのタブの下線バーがアクティブなタブの色になります。

6
insaner

オプションBは、タブとコンテンツの間の水平線を分割しています。 #それだけで不快に感じます。

オプションAは、完全なメニューと、コンテンツを読むように指示する流れの方向を示す矢印です。

矢印のない別のオプションCを試してみるとよいでしょうが、Aが良いでしょう。

5
user54626

中心的な問題は矢印か三角形だと思います。

最も重要なのは、タブが選択されたタブとしてその仲間から目立つことです。

それを超えてコンテンツへの接続の原則です。

1つの方法は、Mervin Johnsinghの例に示すように、コンテンツの背景色をシームレスにタブに流すことです。

タブの下部に異なる色の突起が必要な場合は、三角形ではなく小さな長方形を使用することをお勧めします。それでも、タブがページの上部にテープで留められているかのように接続を強調しますが、矢印の方向の混乱からは離れます。

2
Andy Dent

「下向き」の矢印は見出しを指し、ユーザーの目と注意を次のテキストに向けるように注意を向けます。あなたの目標が彼らにテキストを読ませることであるなら、それは良い視覚的な手がかりです。

「上」矢印は反対の効果を持ち、読者の目をナビゲーションバーに引き戻します。オプション2では、見出しや下のコピーではなく、常に「アイテム」を読み返すようにしています。それはおそらくあなたが望むものではありません。

矢印が「特になし」を指しているのは妥当なポイントです。上記の理由により、代わりに「上」矢印を使用しても問題は実際には解決されないようです。見出しに直接ではないにしても、少なくとも本文に向かって下向きにするのが望ましい場合があります。

すでに提案されているように、単に「アクティブ」タブを示すために、強調表示またはコントラスト/色を使用することもできます。

2
mc01

レンダリングで上向きの矢印(代替B)の解釈の1つは、テキストの本文が吹き出しのようなものであるというものです。これは、私の意見では矢印よりも自然に感じられるヘッダーからのもののように見えます。しかし、多くの人が言ったように、その場合はタブをコンテンツと同じ色にするほうが良いでしょう。

1
Hjulle

下向きの矢印は正しい方法です。

ここでの焦点は矢印の方向だったと確信しています。関連するポイントをカバーしています。
このサンプルでは、​​いくつかの誤った使用法があります。上部の長方形は、内部に電球が埋め込まれたスイッチのようなものです。押すと点灯します。ここで、彼らは暗くなります。そのままのボタンは明るくなります。天文学のブラックホールに関するページにふさわしいかもしれません。

ページタイトルのフォントサイズが、タイトルと本文の間に収まらない。進行性はありません。

矢印の方向の理由は、それらはポインタのようなものであり、旧市街の道路標識を考えてください。彼らは本物がどこにあるかを指します。

0
Rajan