次の2つのうち、どちらが使いやすいですか。
カルーセルは年代順ではないので、プロモーション用のスペースとして使用されている、テキストが少し入った大きな写真だとしましょう。
以下の例をご覧ください。
公開サイトのカルーセルナビゲーション要素にイベントトラッキングを追加しました。 カルーセルをナビゲートしたユーザーは、メインのサイド矢印を圧倒的に使用しました。下の2次ナビゲーション矢印を使用したのは10%未満です。そして、実際に<.5%がドットをクリックした人はいませんでした。
ドットにはスライドの数を示す目的がある場合があります(人にとって重要ですか?)が、ユーザーを引き付けたり、ユーザーに対して十分なサービスを提供したりすることはできません。
カルーセルの方向と利用可能なアクションを示すには、矢印の方がはるかに適しています。さらに良いのは、右側の画像のように、2つの方向矢印が互いに隣り合っている場合です。右の方が遠く離れています。
ドットは進行状況を示すのに便利ですが、ドットはwayから小さな click target ナビゲーションに使用できます。スワイプがスライドを変更する手段であるiPhoneのホーム画面などのモバイルアプリケーションに最適です。
カルーセルを作成する場合は、ナビゲーションボタンを大きくします。デスクトップユーザーにはキーボードナビゲーションを許可し、タブレットには swipe を許可します。通常、カルーセルコンテンツとの進行状況インジケーターの両側にナビゲーションボタンが表示されると思います。
via Hype&Slippers on dribbble
この最近のUX SEの質問を参照して、カルーセルがあまり良いアイデアではない理由を確認してください。
少量のページがある場合、5ページの例のように、ドットを使用できます。 (ドットはコンテンツの内側に収まります。)
利点は、ユーザーがページ間をすばやく移動して、自分がどこにいるかをよりよく理解できることです。
多数のページがある場合、たとえば、12個のドットがあるとしたら、矢印を使用することをお勧めします。ドットが多すぎると、実際のテーマから注意が引き付けられなくなります。コンテンツスペースへの適合の問題は言うまでもありません。
わかりました(上記の私の以前のコメントを参照してください)。ポートフォリオやギャラリーのウェブサイトなど、テキストを含む大きな写真が数枚の場合は、間違いなくドットを使用します。すぐにいくつかの考え-または実際には長所と短所の緩いリスト:
ドット:
数字付きの矢印:
そして、そのために:ドットと矢印のような組み合わせを使用するでしょう。 BBCは実際にこれをニュースサイト( http://www.bbc.co.uk/ )で使用し、Appleは点と矢印も使用します(最初に非表示になっています) )製品のプレゼンテーションページ( http://www.Apple.com/iphone/ )
-乾杯-
これには本当に2つの問題があります。
まず、それほど重要ではありませんが、矢印は明らかにナビゲーションUI要素であり、ドットはページネーションになりました。ドットは触れやすいかもしれませんが、十分に強力なクリックキューとして機能しません。そのため、大規模なニュースサイトでは両方を使用しています。彼らはお互いに褒め合います。そのため、私はyoの両方を使用することをお勧めします。
第二に、そして根本的に、残りのコンテンツをプレビューする方法のないカルーセルは、私にとってより問題です。カルーセルの最初のスライドが最も成功することは誰もが知っています。そして、その後のスライドごとに収益が減少します。ユーザーが各スライドをクリックして関連性や有用性を確認するのは、悪い習慣のIMOです。基本的に、その画像ギャラリー(それがそうではないように聞こえません)を除いて、カルーセルにコンテンツを埋め込むだけです。
そのメッセージがページ上のスペースを正当化するのに十分重要であるなら、それを与えてください。勇気がないなら、それを落としてください。 320upに進むと、必要なコンテンツとドロップする余裕のあるものに焦点を当てることができます。
幸運を!
インタラクションデザインの観点から追加したいのは、ユーザーをナビゲートする原理です。
コンポーネントの有用性と使いやすさは、設計のすべての側面と同様に、テストに基づくべきであるというコメントに同意します。
しかし、ユーザーをナビゲートするなどの原則は、あなたがどこにいるのか、どこにいたのか、そしてどこに行くのかを知る必要があることを示しています。
ドットがあると、機能的または美的目的に役立つかどうかに関係なく、フィードバック(別の相互作用設計原則)が提供されます。
矢印は、ユーザーの認知的負荷を軽減するための明白な選択です。たとえば、「視覚的な構造を提供してくれてありがとう。前に戻るか前に進むことができると思います」
特に美的なスタイリングに関しては、どの組み合わせが機能し、何が機能しないかをテストして見つけるのはあなたの責任です。