web-dev-qa-db-ja.com

点か矢か?

次の2つのうち、どちらが使いやすいですか。

  • カルーセルにドットがある
  • カルーセル内のスライドの位置と数を示すテキストが付いた、前後の矢印があります。

カルーセルは年代順ではないので、プロモーション用のスペースとして使用されている、テキストが少し入った大きな写真だとしましょう。

以下の例をご覧ください。

enter image description here

21
Rich

公開サイトのカルーセルナビゲーション要素にイベントトラッキングを追加しました。 enter image description here カルーセルをナビゲートしたユーザーは、メインのサイド矢印を圧倒的に使用しました。下の2次ナビゲーション矢印を使用したのは10%未満です。そして、実際に<.5%がドットをクリックした人はいませんでした。

ドットにはスライドの数を示す目的がある場合があります(人にとって重要ですか?)が、ユーザーを引き付けたり、ユーザーに対して十分なサービスを提供したりすることはできません。

カルーセルの方向と利用可能なアクションを示すには、矢印の方がはるかに適しています。さらに良いのは、右側の画像のように、2つの方向矢印が互いに隣り合っている場合です。右の方が遠く離れています。

23
Itumac

ドットは進行状況を示すのに便利ですが、ドットはwayから小さな click target ナビゲーションに使用できます。スワイプがスライドを変更する手段であるiPhoneのホーム画面などのモバイルアプリケーションに最適です。

iPhone

カルーセルを作成する場合は、ナビゲーションボタンを大きくします。デスクトップユーザーにはキーボードナビゲーションを許可し、タブレットには swipe を許可します。通常、カルーセルコンテンツの進行状況インジケーターの両側にナビゲーションボタンが表示されると思います。

enter image description here

via Hype&Slippers on dribbble

この最近のUX SEの質問を参照して、カルーセルがあまり良いアイデアではない理由を確認してください。

11

少量のページがある場合、5ページの例のように、ドットを使用できます。 (ドットはコンテンツの内側に収まります。)

利点は、ユーザーがページ間をすばやく移動して、自分がどこにいるかをよりよく理解できることです。

多数のページがある場合、たとえば、12個のドットがあるとしたら、矢印を使用することをお勧めします。ドットが多すぎると、実際のテーマから注意が引き付けられなくなります。コンテンツスペースへの適合の問題は言うまでもありません。

3
Aristos

わかりました(上記の私の以前のコメントを参照してください)。ポートフォリオやギャラリーのウェブサイトなど、テキストを含む大きな写真が数枚の場合は、間違いなくドットを使用します。すぐにいくつかの考え-または実際には長所と短所の緩いリスト:

ドット:

  • 多数のスライドに対してはあまり実用的ではない(おそらく最大7)
  • 「気分」または「印象」を示すスライドに適した抽象性
  • ニュースなどの技術的または「ドライ」コンテンツには抽象性が良くない
  • 利点:リスト内の任意のアイテムに直接クリックジャンプ
  • 利点:ドットはアイテムのサムネイルまたはタイトルを表示することもできます

数字付きの矢印:

  • 多数のスライド(7以上)でも機能します
  • 「ムード」や「印象」を示すスライドの具体性
  • ニュースのようなテクニカルまたは「ドライ」コンテンツに適した具体性
  • 欠点:リスト内のアイテムへの直接のクリックジャンプはありません

そして、そのために:ドットと矢印のような組み合わせを使用するでしょう。 BBCは実際にこれをニュースサイト( http://www.bbc.co.uk/ )で使用し、Appleは点と矢印も使用します(最初に非表示になっています) )製品のプレゼンテーションページ( http://www.Apple.com/iphone/

BBC News slider

Apple Slider

-乾杯-

2
tillinberlin

これには本当に2つの問題があります。

まず、それほど重要ではありませんが、矢印は明らかにナビゲーションUI要素であり、ドットはページネーションになりました。ドットは触れやすいかもしれませんが、十分に強力なクリックキューとして機能しません。そのため、大規模なニュースサイトでは両方を使用しています。彼らはお互いに褒め合います。そのため、私はyoの両方を使用することをお勧めします。

第二に、そして根本的に、残りのコンテンツをプレビューする方法のないカルーセルは、私にとってより問題です。カルーセルの最初のスライドが最も成功することは誰もが知っています。そして、その後のスライドごとに収益が減少します。ユーザーが各スライドをクリックして関連性や有用性を確認するのは、悪い習慣のIMOです。基本的に、その画像ギャラリー(それがそうではないように聞こえません)を除いて、カルーセルにコンテンツを埋め込むだけです。

そのメッセージがページ上のスペースを正当化するのに十分重要であるなら、それを与えてください。勇気がないなら、それを落としてください。 320upに進むと、必要なコンテンツとドロップする余裕のあるものに焦点を当てることができます。

幸運を!

1
Will Custard

インタラクションデザインの観点から追加したいのは、ユーザーをナビゲートする原理です。

コンポーネントの有用性と使いやすさは、設計のすべての側面と同様に、テストに基づくべきであるというコメントに同意します。

しかし、ユーザーをナビゲートするなどの原則は、あなたがどこにいるのか、どこにいたのか、そしてどこに行くのかを知る必要があることを示しています。

ドットがあると、機能的または美的目的に役立つかどうかに関係なく、フィードバック(別の相互作用設計原則)が提供されます。

矢印は、ユーザーの認知的負荷を軽減するための明白な選択です。たとえば、「視覚的な構造を提供してくれてありがとう。前に戻るか前に進むことができると思います」

特に美的なスタイリングに関しては、どの組み合わせが機能し、何が機能しないかをテストして見つけるのはあなたの責任です。

0
Haydyn Phillips