web-dev-qa-db-ja.com

ユーザーは、複数の画像のインジケータとしてドットのある「スライド可能な」領域を認識しますか?

「バリアント2」の矢印ボタンのように、より多くの画像があり、ユーザーが左または右にスワイプしてそれらに到達できることを伝えるために、より明確な視覚的合図が必要ですか?

または、ユーザーはインジケーターとしてこれらのようなドットにすでに慣れていますか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

編集:この質問は主にモバイルディスプレイに関するものであることを完全に忘れていました。デスクトップ版はこれらのドット以外のものを使用します。
主な操作はスワイプであると想定されています。

それは、アディダスやナイキがするような1つの製品のファッション製品のプレゼンテーションについてです。つまり、それはホームページカルーセルについてではないです。したがって、画像はすべて関連しており、ユーザーはすでに製品の複数の写真を期待していると思います。

4
Big_Chair

矢印はカルーセルに複数の画像が含まれていることを示すため、矢印を削除すると、ユーザーが下のスライドインジケータードットに気付かない危険性があります。カルーセル内のスライドの数とセット内の現在の位置をユーザーに明確に示すため、ドットを削除することも危険です。

個人的には、矢印をホバーしたときにのみ見えるようにすることも2つの理由でしません。 1つ目は、これが発見を制限するためです。2つ目は、タブレットやモバイルデバイスがホバー機能をサポートしていないため、矢印が表示されないためです。

矢印の代わりに他の方法もあります。次のスライドの「プレビュー」を表示できます。これは、今後の予定があることをユーザーに示すための優れたツールとして機能します。

この記事には、カルーセルの使用に関するいくつかのより良いヒントがあり、ごく最近です: https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work- for-end-users /

6
Paj

ドットよりも明確な情報の手がかりが必要ですか?ドットに慣れているユーザーに関係なく、ドットには情報の香りがありません(ドットまたはそのリンクに含まれる可能性のある情報を示唆する視覚的またはテキストによる手がかり)。

Nielsen Norman Groupの 違反する4つのiOSルール では、

ユーザビリティテストでは、これらのドットは多くの場合、インターフェースで微妙すぎて、利用可能なコンテンツの別のビューがあることをユーザーに明確に示すことができません。そのため、機能間のナビゲートなどの主要な機能に使用したり、情報にアクセスするための唯一の方法として使用したりしないでください。

多くのファッションおよびeコマースWebサイトでは、ドットの代わりにサムネイル画像またはカラースクエアを使用しています。

Kohl's app product page screenshot

上記の例では、Kohlのアプリを使用して、上の画像をスワイプしてバリアントを表示できます。ただし、ユーザーがスワイプしない場合でも、ユーザーが失われることはありません。代わりに下の色の四角を選択することもできます。

したがって、矢印を追加することもできますが、現時点では必要ない場合があります。ほとんどのユーザーはおそらく、自分にとって最も興味深く見えるサムネイル画像を選択することに惹かれます(または、それらすべてを選択します)。また、サムネイルを一目見れば十分なガイダンスが得られるので、どの画像をもう一度見たいかを覚えておく必要もありません。

1
Gerald F.

今日では、バナー画像に複数の画像が含まれている可能性が非常に一般的です。そのため、左右に大きな矢印が付いたカルーセルを必ずしも配置する必要はありません。下部の明確なドットで十分です。ただし、ユーザーは矢印を探して、小さくてポイントしにくいドットよりもナビゲーションを簡単にします。

それは、ユーザーが行ったものを振り返りたいのか、単に画像をざっと眺めたいのか、画像のコンテキストに依存します。

最良のオプションは、マウスホバーで矢印を表示することです。これにより、スライドを切り替えるための矢印が使用できることがユーザーに突然注目されます。この場合、ドットは不要です。

たとえば、バナースライドに通常矢印が付いているeコマースWebサイトを見てみましょう。これにより、ユーザーは次のスライドが表示されるまで数秒待つことなく、オファー付きの製品を探すことができます。

ドットは、画像が7または8以下の場合に使用されます。矢印をクリックするだけで、より多くの画像を表示できます(ナビゲーションのしやすさ)

1
Hemalatha

ユーザーの常識に頼る必要はありませんが、ドットの両側にそれぞれ「<&>」矢印を配置することで、単純化できます。この方法では、画像ブロックのどちらかの側のマージンを危険にさらす必要はありません。

0
Stanley VM

画像の上に<>記号を使用すると、ユーザーに自然で包括的なシグナルを提供し、モバイルディスプレイとデスクトップディスプレイで同等のレスポンシブデザインを提供します。 「ドット」の決まり文句は避けてください:-)

0
FrozenButcher