web-dev-qa-db-ja.com

カルーセル:次と前のボタン

多くのウェブサイトはカルーセルデザインパターンを活用しています。

Carousel

最初のページで「前の」矢印が非表示になっているか、無効になっているかアクティブになっているケースをたくさん見ました。同じことが最後のページと「次へ」ボタンに適用されます。

ベストプラクティスとその理由は何ですか?

5
Igorek

目立たない

特定のコンポーネント内で、アプリの状態を視覚化して、ユーザーが何を期待できるかを理解できるようにします。 IOW、矢印を表示したままにしますが、明らかに非アクティブにします。このようにして、ユーザーはどこにあるかが一目でわかり、カルーセルが最初/最後にあることを視覚的に確認できます。

enter image description here

これにはもっと良い用語があるはずですが、想起よりも認識が頭に浮かびます。ユーザーは、状態が変化した後、どこにいるのかを学習するのではなく、どこにあるのかを確認します。

16
plainclothes

カルーセルはいくつかのケースで最良のパターンではないことに同意しますが、それを使用すると...

ベストプラクティスとは何ですか。なぜですか。

私は常に次のことを前提にしています。

  1. カルーセルが無限の場合(最後のページから最初のページにスクロールし続ける)、ボタンは常に有効のままにします。
  2. スクロールするページ/アイテムがない場合でも、矢印を表示して無効にします(回答の1つで提案されているとおり)です。これは、可能なアクションについてユーザーを教育するために行われます(パターンのこの状態でアクションが無効になっている場合でも)。
3
Igorek

私の意見では、ベストプラクティスはmodalityによって異なります。

  • 劣等性-superiority(たとえば、ゲームでの車のアップグレード)がある場合、両端はblocked良い。
  • 質(たとえば、ゲームのクラスやレース)にしかない場合は、open-endedソリューションがベストプラクティスです。
1
user3819867

カルーセル内では、UX開発者がカレット(矢印)を無効にすることでカルーセルコンテンツの最初から最後までそれらをルーティングするので、ビューの一部にユーザーの注意を引くために画像またはテキストを与えることができます。スライドが完了しているため、カルーセルで別のスライドを取得できない場合、そのユーザーがカルーセルにアクセスしようとして無効にしないと、アプリケーションにバグがあるため、ユーザーはUX開発者を非難することができます。

UX開発者がさらに改善した点は、ユーザーが特定のカルーセルスライドのインデックスを簡単に思い出せるように、カルーセルスライドごとにタイトルを追加できることです。

0
user76224

私は、[次へ]ボタンと[前へ]ボタンが常に表示され機能するように、アイテムを循環的に移動させることをお勧めします。

無効になっているボタンを見るのは面倒です。また、最初のロード時には、現在のビューの左と現在のビューの右のアイテムの数が等しいはずです。これは対称性を生み出します

0
Pavan

忘れがちなベストプラクティスの1つはsupport right-to-leftです。

アラビア語やヘブライ語のような右から左に書く言語では、次の矢印は左側にあり、アニメーション(ある場合)は右から左にある必要があります。

他の人が再利用するものをデザインする場合は、このオプションを忘れずに追加してください。

0
Flimm

一部のWebサイトでは、カルーセルの下にドット/ブロブの行があり、カルーセルのn番目の位置にある場合、n番目のドットは異なる色で強調表示されます。

ただし、 Norman Nielsen Groupの調査 によると、ほとんどのユーザーはカルーセル内のほとんどのコンテンツを表示していません。

カルーセルを使用する必要がありますか? いいえ。

0
Yvonne Aburrow

個人的には、画像スライダーやカルーセルを使うのは好きではありません。多くの人はおそらくそれが広告であると想定して無視しているため、これらはユーザーをバナー失明に導くでしょう。

これらの統計は、より良いアイデアを得るのに役立ちます http://erikrunyon.com/2013/01/carousel-stats/

本当に使いたいなら、これらのヒントを試すことができます。

  • 次/前のボタンをスライドに表示したままにします。
  • ユーザーが最後のスライドの次のスライドをクリックしたときに最後のスライドを接続して最初のスライドに戻ります(最初のスライドでも同じようにして、最後のスライドをリンクできます)。これにより、インタラクションをスムーズに保つことができます。
  • 自動スライドの使用は避けてください。
0