web-dev-qa-db-ja.com

下矢印付きのカルーセル:目的はありますか?なんていうの?

フルハイトの背景としてスライダー/カルーセルを使用している多くのWebサイトの中央に「下向き矢印アイコン」が配置されていることに気づきました。時々それをクリックすることができます。

この矢印には名前がありますか?それは目的を果たしますか?ユーザーにとってどのようなメリットがありますか?

enter image description here

38
Jacob Raccuia

これはゴーストアクションボタンと呼ばれ、特にフルサイズのWebサイトのスクロールせずに見える範囲で使用されます。上部の折り目が画面全体に表示されるため、ユーザーは下にスクロールして表示するものは何もないと想定する場合があります。

このボタンは、スクロールしなければ見えない場所にさらにコンテンツがあることをユーザーに通知します。これにより、ユーザーは下にスクロールして消費できます。


更新

@ jacob のコメントを参照-私の投稿を裏付けるためのいくつかの役立つ情報源:

視覚的手がかりを使用

ほとんどのコンテンツはスクロールせずに見える範囲であることをユーザーに通知します

すべてのユーザーがサイトの動作をすばやく確認できるように、デザイン要素でスクロールすることをお勧めします。画面外を指す矢印や「スクロールダウン」のコピーなどの微妙な視覚的手がかりは、ほとんどのコンテンツがスクロールせずに見える場所にあることをユーザーに通知できます。


スクロールを続けてください↓

紹介の形式として全画面を使用することの危険性は、ユーザーがスクロールすることでさらに多くの発見があることに気付かない可能性があることです。当社独自のEnvatoホームページでは、これを「スクロール」アイコンで否定しているため、スクロールせずに見える範囲を覗く必要があります。


NNGroupによる別の研究。 ページ折りが依然として重要な理由

2つの定量的調査では、フォールドがユーザーエクスペリエンスに及ぼす影響について、わずかに異なる見積もりを作成しています。しかし、どちらの数値も大きいです。つまり、スクロールせずに見える範囲と5倍の範囲では、5%の違いも10%の違いもありません。その差は66%〜102%程度です。現在の最良の推定値として単一の数値が必要な場合は、この範囲の中間点を考えてみましょう。84%は、スクロールせずに見える範囲での情報に対するユーザーの情報の扱いの平均の差です。巨大な。ひだを信じなさい。そこにあり、ユーザーエクスペリエンスはその場所で大幅に変化します。

ユーザーは楽しみのためにスクロールしません。彼らは目的のためにスクロールします。したがって、折りたたみについて話すことがページの最初にあるものに焦点を合わせる場合は、会話を続けましょう。


ここでのこの調査では、いくつかの代替案について説明しています。
親愛なるWebデザイナー、スクロールのアフォーダンスを壊すのをやめましょう

45
DPS

ネーミング

それはスクロール矢印と呼ばれています。アイコン自体はchevronと呼ばれ、 Material Designkeyboard arrow downと呼ばれていました。

目的

したがって、フルスクリーン画像と非表示のスクロールバー。 Appleデバイス(スクロールするまで表示されません))では、一部のユーザーは画像の下にコンテンツがないと考えている可能性があります。アイコンはそこにあることを示します。巨大 テスト済み それしかし、ほとんどの人はとにかくスクロールするようです。

enter image description here

ユーザーのメリット

スクロールは常にクリックよりも安価であるため、クリックはおそらくそれほど価値がありません(画面上のアイコンをターゲットにする必要がないため:フィッツの法則)。

多くの人は、設計を説明する必要がある場合はクールではなく、画像(オプションでコンテンツの一部が見える)でオプション3を選択するため、これは悪い習慣だと主張するでしょう。

カルーセルについて

あなたの例では、私はそれが悪い習慣だと言います:

  • カルーセル自体は一般に悪い習慣と考えられています(理由:とにかく最初にスライドした後にユーザーがクリックしない、ドットがカーソルに対して小さすぎるなど)。
  • カルーセルを使用している場合でも、通常はドットよりもサムネイルを使用し(情報量が多い)、前/次の矢印を大きくすることをお勧めします
  • アイコンが他のアイコン(前/次のスライド)に類似しすぎているため、アイコンをスクロールする別の招待(マウスなど)のほうがうまく機能する場合がある
16
Runnick

そのUI要素はBlock Scrollと呼ばれます。

ブロック(チャンク)に分割された単一ページのデザインでは、ブロックスクロール機能はブロックを一度に1画面ずつ表示してユーザーフローを改善し、ページを応答性の高い方法で機能させます。各ブロックはユーザーの画面の高さに応じて変化するため、ユーザーはページをスクロールするときに一度に1つのブロックしか表示しません。

Dominik Goreckiによるプラグインの2つのデモを見つけることができます。

この 最初のデモ では、ページは垂直スクロールバーを保持します-マウスのスクロールホイールを使用した場合とボタン(またはキーボードを使用した場合)を使用したページのスクロールを比較します  )代わりに。

2番目のデモ はブラウザーのスクロールバーを完全に非表示にし、ブロックスクロールでのみナビゲーションを可能にします。ユーザーエクスペリエンスの違いに注意してください。

ブロックスクロールjQueryプラグイン として利用できます。

2
SNag

私が知っていることから、それはスクロールダウン矢印/スクロール矢印と呼ばれ、通常、ウィンドウを1ページ下にスクロールするために使用されます。

また、ランディングページにウィンドウの高さを完全に占有し、ナビゲーションバーやヘッダーがない導入divがあり、ユーザーが矢印をクリックすると、通常のようにヘッダーとナビゲーションバーが表示されるWebページで使用されていることがわかりました地点。

1
Abhishek Gurjar

これはスクロールダウンと呼ばれ、ブラウザーのビューポートの「フォールド」の下にさらにコンテンツがあることをユーザーに知らせます。通常、全幅/全高のヒーローユニットがある場合、以下にさらに多くのコンテンツがあることは、ユーザーに常に明らかであるとは限りません。これは、ユーザーがコンテンツをクリックして次のセクションに移動するための簡単な方法でもあります。

1
Colin James

これらのタイプのカルーセルは垂直カルーセルと呼ばれ、Webサイトでさまざまな目的に使用されます。 Example1 はランディングページのバナーカルーセルで使用できます Example2 はアプリケーションのサイドバーで使用できます Example はギャラリー画像のサムネイルに使用できます。

最近のWebサイトは、より応答性が高く、モバイルフレンドリーです。ラップトップやデスクトップでさえタッチスクリーンで作られました。垂直カルーセルは、主に画像駆動型のWebサイトで使用され、ユーザーは上から下にスワイプまたはスライドして、タッチスクリーンデバイスで最も一般的なアクションであるスライドを変更できます。

ここの矢印の目的は、これが垂直カルーセルであることをユーザーに示すことであり、ユーザーは矢印またはスワイプアクション、あるいは上から​​下へのスライドアクションを使用してスライドを変更できます。

0