web-dev-qa-db-ja.com

タブ間の相互参照、悪い習慣?

ページ内リンクは混乱を招く可能性があることが知られていますが、ページコンテンツを簡単にナビゲートするのにも役立ちます。

タブについては、いくつかの設計ガイドラインもあります。良い記事はこれです "タブ、使用済みの権利" | Nielsen Norman Group

最初のタブのコンテンツから3番目のタブへの参照など、悪い習慣であるかどうかは、私にはわかりません。

更新:これをより明確にするために、例を見てみましょう。ストアのセクションが異なる4つのタブがあります。音楽|本|ゲーム。最新の映画を紹介した最初のタブで、3番目のタブ「関連書籍」へのリンクを入手できますか? 2つのタブのコンテンツが同時に表示されませんが、この方法でタブを変更しても大丈夫ですか?

2
Madalina Taina

リンクがクリックされたときに何が起こるかをユーザーが認識している限り、問題はありません。このリンクが別のタブに移動することをユーザーに知らせる視覚要素を追加します。また、リンクをクリックすると、タブがTAB AからTAB Dに変更されたことを視覚的に示すフィードバックが表示されます。

さらに、クリックする前にユーザーを同じ位置に正確にナビゲートする戻るボタンを提供すると非常に便利です。

編集(例を追加): enter image description here

1
DesignerAnalyst

これは、ユーザーが何を表示または表示する必要があるかによって異なります。

あなたが参照する記事は#3の重要なポイントにヒットします:

ユーザーが複数のタブのコンテンツを同時に表示する必要がない場合にのみタブを使用します。異なるタブの背後にある情報を比較する必要がある場合は、前後に切り替えると、短期記憶に追加の負担がかかり、認知負荷と対話コストが増加し、すべてを1つの大きなページに配置するデザインと比較して使いやすさが低下します。

ユーザーがプロセスを完了する必要がある場合:

その場合、現在は見えなくなっている情報を記憶するようユーザーに要求しているため、タブ間を移動するのは難しい場合があります。これを回避する方法は、完成した情報をタブバーの中に置くことです。 これは、1つのページにアコーディオンのように振る舞う(「タブ」ではなく)支払いの「ステップスルー」で見られ、ステータスはヘッダーに入れられます(完了を示すチェックマークのようなアイコンが付いています)。

ユーザーが閲覧のみの情報を相互参照する必要がある場合:

タブは機能します(ただし、上記の引用を参照してください)。参照されているマテリアル間に論理的な一貫性がある場合は、コンテンツをグループ化したいだけかもしれません(しかし、私はあなたのユースケースを知りません)。

ユーザーとテストし、同時コンテンツを見ないことでユーザーが理解に苦しんでいないことを確認します。

情報は時間順に並べることも、空間的に隣接させることもできます。時間順に並べ替えることで、より多くの記憶が可能になります(コンテンツを比較および分析する必要がある場合)。

mockup

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

更新:更新された質問としてのeコマースコンテキスト。

商品ページに「関連」オプションがあるAmazonの例(および他の無数のサイト)を使用できます。

コンテンツは次のいずれかを表示できます。

  • これでユーザーが購入したもの
  • ユーザーが検索したもの
  • ビジネスオーナーが宣伝しているもの(本よりも多くの映画を売りたいですか?私たちのビジネス目標は何ですか?)

Amazonには、ユーザーが水平方向に表示できるスライダーがあります。必要に応じて、いくつかの丸薬またはタブを使用してコンテンツタイプでフィルタリングしたり、コンテンツのバンドを縦に積み上げたりできます(ただし、うるさくなる可能性があります)。

このクイックイメージを見る: enter image description here

0
Mike M

私にとって、「関連本」リンクをクリックして、本を閲覧しているときに「映画」タブでremainをクリックするのはかなり予想外です...

デフォルトのブラウザの戻るボタンが機能し、実際のユーザーでのテストで直感が確認される限り、異なるタブへのリンクを使用しても、この特定のコンテキストでは問題ありません。

0
Aprillion