web-dev-qa-db-ja.com

レスポンシブサイトのカルーセル-ナビゲーション矢印を保持または削除する必要がありますか?

レスポンシブなウェブサイトを設計していますが、サイトにあるカルーセル要素について質問があります。

カルーセルには左右の矢印<content_content_content>があり、その中の前のコンテンツと新しいコンテンツを示しています。

あなたは何がより推奨されていると思いますか:

  • タブレット\モバイルバージョンの矢印を維持します(コンテンツの場所が少なくなります)
  • 矢印を削除し、カルーセル内の次の要素を部分的に表示します。これにより、ユーザーは追加の要素があり、「スワイプ」してそれらを表示できることを理解できます。
2
user28168

矢印を非表示にし、ユーザーがジェスチャーを使用できるようにするか、画像を2つに分割し、右半分を右矢印のように動作させることをお勧めします。矢印を保持したい場合は、矢印を大きくして、モバイルデバイスをクリックしやすくすることを忘れないでください。

また、カルーセルから遠ざけることをお勧めします。カルーセルについては、さらに多くの研究が行われており、見た目ではカルーセルは効果的ではありません。 自動画像スライダーやカルーセルを使用せず、流行を無視

1
Igor-G

私の最初の推奨事項は、コンテンツタイプにカルーセルを使用することが正しいアイデアであることを確認することです。カルーセルとのユーザーインタラクションは通常非常に低いためです。自動回転カルーセルのインタラクション数はわずかに多くなりますが、多くはありません。したがって、カルーセル内に重要なコンテンツを配置する場合は、最初の「スライド」に配置してください。

ナビゲーションに関する実際の質問への回答として、ナビゲーション矢印は絶対に残しておくことをお勧めします。これがユーザーのカルーセルであることをはっきりと示す必要があります。通常のようにページネーションインジケーターがあるかどうかはわかりませんが、通常は十分ではありません。

矢印を維持する場合のスペースに対する懸念については、メディアクエリで矢印の位置を調整するだけです。カルーセルのコンテンツのすぐ下に移動するように移動してください。おそらく、それらを絶対的に配置して、カルーセルの上にZインデックスが付けられ、不透明度が低くなるようにします。これらは両方とも、必要な水平方向のスペースの量には影響せず、矢印のサイズによっては、もう少し垂直方向のスペースが必要になります。

タッチデバイスの場合、カルーセルをスワイプする機能を有効にします。 「ピーク」機能を有効にすることもお勧めします。これは、ユーザーが少しだけドラッグして、左右に別のスライドがあることがわかるときです。

カルーセル、その統計、パターン、ベストプラクティスなどに関するいくつかの優れたリンクを以下に示します。 http://weedygarden.net/2013/01/carousel-stats/http:// bradfrostweb.com/blog/post/carousels/

1
brandongray

まず最初に、クリックとスワイプの両方の操作を使用する適切なプラグインを使用する必要があると思います。私が今まで見た中で最高のものの1つはロイヤルスライダーです: http://dimsemenov.com/plugins/royal-slider/ -応答性が高く、タッチとデスクトップの両方に対応しています。

矢印は通常ボタンとして機能し、モバイルでの実装が非常に悪い場合は、スライダーのコンテンツの側面をタップして矢印を表示し(デスクトップのホバーアクションと同じ)、次に表示されたばかりの矢印をもう一度タップする必要があります。 。

ただし、矢印は、ユーザーがクリックして別のコンテンツ部分を表示できることを示しています。したがって、スワイプのサポートを追加する場合は、スワイプする機能が他にもあることをユーザーが理解できるようにする必要があります。

0
Dominik Oslizlo

このタッチのオプションは間違いなく:

矢印を削除し、カルーセル内の次の要素を部分的に表示します。これにより、ユーザーは追加の要素があり、「スワイプ」してそれらを表示できることを理解できます。

ある場合は、前のパネルのスライバーも表示します。これは、スワイプしてスクロールでき、ユーザーがそれについて考える必要さえないことを明確に示しています。矢印ボタンは、コンテンツをオーバーレイしている場合、コンテンツを難読化する可能性があり(特に小さい電話画面の場合)、場合によってはコンテンツが矢印を難読化する可能性があるため、問題があります。水平スワイプスクロールは、タッチUIでの快適なアクションであり、ボタンを押すよりもはるかに優れています。

また、最も余分なコンテンツ以外のカルーセルの自動転送は避けてください: http://www.nngroup.com/articles/auto-forwarding/ 。まだお読みになっていない場合は、 カルーセルの使いやすさ を読んで、このテーマの背景を説明することをお勧めします。

0
obelia