web-dev-qa-db-ja.com

スクロール可能なタブ

水平スクロール可能なタブを使用するかどうかそれらは、iTunesストアまたはこのデモで確認できます。 http://flowplayer.org/tools/scrollable/index.html#demos 垂直にスクロールしてコンテンツを表示しているときに、少し驚いたりすることがあります水平スクロールを開始します。

3
user3566

私はそれは単なる「ファンシー」なものだと思いますが、そこには実際に追加されたユーザーエクスペリエンスはありません。
デザインに適している場合はそれを使用しますが、それ以外の場合は特に必要はありません...タブナビゲーションはアニメーションがなくてもうまく機能します!

3

タブの有用性はせいぜい疑問です。付加価値は本当にありません。このようなスライドを表示するために、IMOのはるかに優れたアプローチは、多くのWebサーファーが最近よく知っている、画像の表示に似たものを使用することです。この例ではサムネイルを使用しています:

Example of slides with thumbnails

別のアプローチは、サムネイルを忘れて小さな円を表示することです:

Example using small circles instead of thumbnails

スライドの順序が重要な場合は、円の代わりに数字を表示することもできます。サイトの訪問者がアクセスできない可能性がある場合は、スライドを自動再生できます。自動再生は、ユーザーがサムネイルまたはサークルをクリックすると停止します。

3
Hisham

スクロール可能なタブは「ファンキー」に見えますが、個人的には「通常の」タブに傾いています。

タブが示す視覚的なメタファーは、個別のタブに編成された個別の情報です。スクロール可能なタブを使用すると、タブは長い水平スライドショーの切り欠きのようになります...これは、私見では、タブが「通常」表すものではありません。

Do n't Make Me Think (Steve Krug)の場合。 UIの動作が予想と大幅に異なる場合-ユーザーを混乱させ、タスクの邪魔になることがあります。

とは言っても、私はセクシーなUIの吸盤だと告白します。したがって、切り替え時にタブ間でアニメーションのようなものを押し込めると、タブのように感じられます(コンテンツのフェードアウト/フェードインはすぐに発生する可能性があります)。頑張れ。

1
scunliffe

現実世界のメタファーを見て、仮想世界で設計するための私の思考プロセスを開始するのが好きです。私たちが長い間、実世界用のナビゲーションおよび整理ツールを設計してきたので、ナビゲーションについて考えるとき、実世界の、試行錯誤された、真の、身近な比喩を見つけるのは簡単です。

実世界のタブは、幅広いカテゴリの整理とナビゲーションの両方のために設計されています。 3リングの主題バインダー、料理本、または車のオーナーズマニュアルにあるタブについて考える場合、タブを使用して一般的なカテゴリをすばやく見つけることができます。 IMO、スクロールする必要があるほど多くのタブがある場合、数が多すぎるか、タブ以外の別のレイアウトやメタファーを使用する必要があります。

別のタブレイアウトでは、Rolodexのように、カテゴリを縦に1列に積み上げることができます。アイテムを垂直に配置すると、水平よりも多くのアイテムを収めることができます。 Rolodexとは異なり、コンテンツはタブの左側または右側に表示されるため、これはかなり奇妙に見える「タブ」になりますが、仮想世界でますます使用されています。

別のメタファーは、目次、レストランのメニュー、ショッピングモールのディレクトリなどです。これらは通常、上から下にも編成されています。この場合、これらのカテゴリリストの例は実際には数ページになる可能性があるため、カテゴリをスクロールする方が適しているようです。スクロールせずに見える範囲またはページ境界を超えてカテゴリをスクロールする場合は、別のスクロールペインまたはメカニズムを使用します。タブとは異なり、カテゴリのスクロールリストはコンテンツから独立して移動する必要があります。スクロールリストで選択されている項目が詳細コンテンツペインで何らかの方法で繰り返され、選択と詳細コンテンツの間の接続が強化されていることを確認してください。 私のウェブサイトのスクロールサムネイルリストの例

1
user3581

メイティーボーイ、

通常、すべてのWebサイトが垂直方向にスクロールされ、水平方向のスクロールを提供することにより、ユーザーの読書体験の流れが中断されるため、あなたの懸念は私にとって意味があります。これで、これらのタブ内に表示したいデータは正確に何なのかという疑問が生じます。

これが問題になるのは、本当に素晴らしいグラフィックイメージがたくさんある場合、上記の「ヒシャム」の回答からいくつかのヒントを使用することは特に悪い考えではない可能性があるためです。あなたがたくさんのテキストを提供しているなら、それはユーザーにとってスムーズな読書体験ではないかもしれません。

一方で、デザインではミニマリズムが鍵となります。あなたが共有したデモには、クリック可能なタブと、私には意味のない次へ/前へボタンがあります。同じことをするために2つのクリック可能な領域を提供する理由。

tx

0
Ved