私たちは Web サイトを設計していて、タブ付きのインターフェースできちんと解決できるいくつかの UI の課題に遭遇しました。ユーザーはサイトのさまざまな要素を操作し (いくつかの基本的な表示/編集/コピー/貼り付け機能が利用可能です)、一度に 1 つのタブに 1 つのオブジェクトのみを表示することで、作業が大幅に簡素化されます。
もちろん、私たちはタブ付きのインターフェースに完全に慣れていますが、初心者のユーザーはどうでしょうか? Web でガイダンスを検索しましたが、決定的なものは見つかりませんでした。初心者ユーザーにタブ付きインターフェースを提示した経験はありますか? それとも、誰もがタブを快適に使用できるようになり、予約なしで使用できるようになったのでしょうか。
使いやすさは重要です。このプロジェクトでは、他のほとんどのプロジェクトよりも重要です。素朴なユーザーがタブ付きのインターフェースに混乱した場合、それは機能せず、別の方法を見つける必要があります.
Steve Krug は、彼の優れた著書「Don't Make Me Think」( Sensible.com ) で、タブ付きインターフェイスを使用する利点について説明しています。
彼は続けて、Amazon.com で実証されたタブの成功の鍵を次のように説明しています。
明らかに、彼は本の中でこれらの箇条書き項目のそれぞれについて詳細を提供しています (ここでは彼を盗用しません)。初心者にも専門家にも同様に Web サイトを作成するためのガイドラインが必要な場合、この本は一見の価値があります。
タブは十分に一般的な場所になりつつあるので、タブを正しく実装している限り、タブを使用することを心配する必要はありません。アクティブなタブを他のタブと視覚的に区別できるようにしてください。
また、プログレッシブ エンハンスメントを使用してタブを作成し、JavaScript を無効にしてもコンテンツが残るようにしてください。これを行う主な方法は 2 つあります。
役立つと思われる設計リソースは、YUI Design Pattern Libraryとそのタブに関するセクションです。
タブがそのまま表示されている限り、ユーザーは理解できると思います。タブのように機能するリンク付きの垂直バーを表示する Web サイトを見たことがありますが、ユーザーにはすぐに表示されず、非常に混乱することがわかりました。
それらがタブを支持していることに同意しなければなりません。かなりトラフィックの多い Web サイト (その時点で 100 万を超えるユニーク ユーザー) に対して行った設計テストでは、タブが使用されていないことがわかりました。タブは、メイン コンテンツ エリアの右側に明確にマークされていました。その経験に基づいて、代替案を見つけるか、staticscan が提案したようにユーザビリティ テストを実行して、どれが機能するかを判断することをお勧めします。
何が使えて何が使えないかをアプリオリに判断できるとは思わないでください。ユーザビリティテストを行う
「高レベルのユーザビリティ問題の 80% を明らかにするには、わずか 5 人のユーザーが必要です」Jakob Nielsen
Google ユーザビリティ テストと学習を開始します。それは難しいことではありません。
私はlotharとricebowlに同意する傾向があります.最近では人々はそれにかなり慣れているようです. GUI 要素で最も重要なことは明快さです。ユーザーは、何かを押したときに何が起こるかを本質的に知っている必要があります (非アクティブなタブをクリックするとアクティブになることを知っています)。ナビゲーションでは、現在どのタブにいるのかを正確に明確にする必要があります。lothar が言ったように、ユーザーにすぐに表示されない場合、非常に混乱します。これらの問題に対処すれば、問題ないはずです。
SmashingMagazine に、タブを紹介する新しい記事があることに注意してください: タブのショーケース
タブなどは単なるツールです。それらをどのようにレイアウトして使用するかによって、その有効性が決まります。
私が心に留めようとしていることは次のとおりです。
1)近くに置いてください。最もよく使用するものは、できるだけ前面または上部近くに配置し、使用/調整の頻度に基づいて残りを埋める必要があります。
2)ママにも使いやすい。明確かつ論理的な方法でレイアウトされていない場合、すべてのインターフェイスは混乱を招きます。
3)理にかなっていると思う方法ではなく、使用方法を整理します。*私はよくタブを使用して、プロセスのステップを分割したり、基本オプションや詳細オプションなどの領域を分割したりします。類似性または使用法に基づいてグループ化し、どちらがより効果的かを判断します
4)それらを少なく保ついずれにしても、人間の脳は 7 ～ 10 桁を超えてジャンプするのに苦労するため、7 ～ 10 桁の範囲の上限を下回るように努めます。垂直アコーディオンも検討したいものかもしれません。
以前にタブ内にタブを埋め込んだこともあります。うまく機能しますが、ほとんどの場合、深さは 1 層のみです。
人々はタブの比喩 (バインダーやカード インデックスなどから) に慣れていると思います。特に、ウェブを長時間使用する人。IE が比喩を採用した場合、それはその比喩に対する共通の親しみを暗示していると思います。
だから、いいえ、私は彼らが混乱していないことを提案し、あなたがそれを選ぶことを提案します. おそらく、タブの使用法について、ようこそ/初めての紹介 (またはそのような紹介への目立つ「ヘルプ」リンク) を投稿してください。
私は、HTML で生成され、JavaScript で制御される、タブ付きのインターフェイスを使用するイントラネット アプリの開発者でした。これは、IE7 や Firefox よりもずっと前のことです。実際、それは一般的な Web サイトでも少し目新しいものでした。
幸いなことに、以前の開発者は、ダイアログ ボックスのように見えるようにすると (たとえ灰色の背景を使用しても)、人々は通常メタファーを理解することを発見しました。また、最初のページ読み込みですべてのタブのすべてのコンテンツを読み込み、タブ構造の外に保存/キャンセル ボタンを配置しました。このため、ほとんどの人は、タブ間を移動できること (DIV の非表示と表示には JavaScript を使用しました) と、保存によってすべての変更が保存されることをすぐに理解しました。
このような明白な比喩から逸脱したい場合は、いくつかのユーザビリティ調査を行う必要があります。
適切に実装されたタブ インターフェースは、ユーザーを混乱させるべきではありません。
他の人が言ったことに沿って、タブやその他のナビゲーション インターフェイスで考慮すべき最も重要なことの 1 つは、ナビゲーション スキームの現在の場所を明確にすることです。
もう 1 つの重要なポイントは、ブラウザーを壊さないことです。多くの AJAX または JavaScript の実装により、[戻る] ボタンが機能しなくなります。これは、一部の人にとっては小さな煩わしさであり、他の人にとっては大きな不便です。ここでターゲットオーディエンスを考慮してください。
個人的には、すべてのタブをプリロードするのではなく、各タブを独自のページとして持ち、テンプレート化の方法論を使用して、タブ化されているかどうかにかかわらず、ナビゲーション インターフェイスを管理するという昔ながらの方法を好みます。これはブラウザの履歴を維持し、javascipt の有無にかかわらず正常に動作します。