web-dev-qa-db-ja.com

自動スクロールギャラリーの動作

いくつかのサービスを提供する小さな企業Webサイトがあります。

ホームページには、提供されるサービスのショーケースがあります。縮小された形式(小さな写真)でいくつかのアイテムを含むストリップがあり、ストリップの下には、ストリップで現在選択されているアイテムに関する完全な情報を含む大きな体験写真を表示する非常に大きなコンポーネントがあります。概略的には次のようになります。

enter image description here

ギャラリーでアイテムを自動的にスクロールさせたいのですが、インタラクティブにする必要もあります。ユーザーが自分の選択したアイテムに集中できるようにする必要があります。

ここで動作を定義する最良の方法は何ですか?具体的には、自動スクロールを停止した後、いつ再度オンにするのですか?私の問題の1つは、一番下の要素がページの幅全体を占め、かなり大きいということです。そのため、マウスがそこに置かれているという事実は、必ずしも何も意味しません。

既存のウェブサイトの同様の要素の例は高く評価されています。

ありがとう!

編集

私ははっきりしていなかったかもしれません-「自動スクロール」によって、写真が徐々に見えなくなって他の人に置き換えられるわけではありません。その意味ではアニメーション化されていない。選択はストリップの次のアイテムに切り替わるので、たまに変化します-おそらく約5秒。

編集2

私が考えていた動作は、 here に近い動作です(画像の変更が表示されるまで、ページをしばらく表示し続けます)。

4
  • 疑わしい場合は、ユーザーを制御するにします。

スクロールして開始できます。サムネイルの1つをクリックするとすぐに、停止します。その画像を表示します。それは彼らが興味を持っているものです! 10秒後に再びスクロールを開始する必要があると思われる場合は、衝動に抵抗してください。代わりに、必要に応じて、ユーザーがもう一度自動スクロールアップを開始できるようにする画像の上に何かをフェードインします。それは「スライドショー」と言うハイパーテキストかもしれません。それはクリック可能なスライドショーボタンかもしれません。

スクロールする理由は、そこにあるものの範囲を表示することです。彼らが興味を持っており、サムネイルから画像の1つを選択する方法を知っていることを彼らが示したら、あなたはあなたの目的を達成しました。それらから制御を奪うことによってそれを破壊しないでください。

11
James Crook

このタイプのローテーション広告は、近年非常に人気があります。ただし、認識できる動作はまだ確立されていません

disney.com.a または abc.com のようなサイトには、常に回転する画像があります。提供されたインターフェースを介して特定の画像が選択された場合でも、回転は続行されます。

別の例は skins.net で、自動回転を無効にする一時停止ボタンを実装しています。

画像に収容可能なテキストが含まれている場合、ユーザーは自動回転に非常に苛立たしいと感じるかもしれません。これは、回転を停止するためのインターフェースがなく、一時停止ボタンの読み取りに実際に関心がある場合に適していると言えます。

ユーザーがサムネイルをクリックできることを確認したら、自動回転をオフにする必要があると思います。これが実際の例です australianopen.com

1
Denzo

マウスのホバー位置に依存することは正確ではない、または信頼できないとあなたは正しいと思います。写真の自動サイクリングには、連続アニメーションに必要なものが含まれている必要があります。一時停止して再生するための明らかなコントロールです。ユーザーは、必要に応じてスライドショーを停止および開始できます。これは、このページの他のユーザーが示唆しているように、ユーザーがサムネイル(または体験的な写真)をクリックしたときに自動的に一時停止することと組み合わせることができます。ただし、明示的な一時停止/再生コントロールにより、ユーザーがアニメーションを一時停止できることができます。画像をクリックすると、発見しにくくなります。

次に、アニメーションは本当に煩わしく、 1996年以来そのように認識されている であるため、ロードした直後にアニメーションを一時停止する私のようなユーザーがいます。リストと体験画像がページ上の唯一のものである場合、これは問題にはなりません。それは、アニメーションがユーザーの注意をそらすものがないためです。ただし、アニメーションの上または下に読むテキストがある場合は、潜在的な問題があります。

いいえ自動サイクリングを検討しましたか?デフォルトで最も説得力のある体験的な写真を表示するか、ユーザーが検索エンジンからアクセスしている場合は、それぞれの検索基準に最も適合する写真を選択してみてください。または、ホームページに体験写真を表示せず、サービスリストを拡大するためのスペースを使用して、ユーザーが各アイテムをよりよく評価できるようにします。以下のその他のサービスへの小さなリンクを使用して、各アイテムを別のページの関連する体験写真へのリンクにしてください。ユーザーが複数のサービスに関心がある場合、一部のユーザーは、[戻る]をクリックして元のページに戻り、次のサービスを選択する場合があります。これは一部のユーザーにクリックを追加しますが、ユーザーがアニメーションを制御できるかどうか、およびどのように制御できるかを理解する必要があるユーザーよりも優れている場合があります。

私は率直に言って、自動サイクリングがサポートするはずの活動を理解していません。ユーザーがテレビを見ているようなアニメーションリストを受動的に凝視することをユーザーは本当に期待していますか?サービスリストは、決められた順序で決められたペースで展開する必要がある物語のようには聞こえません。 (穏やかな)関心のある項目が体験領域から離れて循環する場合、それが再び現れるまでユーザーが待つことを本当に期待しますか?これは、ユーザーが集めた熱意を少しでも無効にするのに十分な場合があります。それは逆効果です。

おそらく懸念は、サイトが提供するサービスが1つだけであると想定しているため(ユーザーが望んでいるものではない)、ユーザーがデフォルトのアニメーション化されていない体験型の写真で[戻る]をクリックすることです。ユーザーが[戻る]をクリックする速さを考えると、アニメーションが役立つとは思えません。各体験写真が適切なサービスであるかどうかを評価するのに十分な長さである場合、ユーザーが別のサービスが表示されるのを見る前に[戻る]をクリックするのに十分な長さです。

ユーザーはそれぞれの手にマウスを持っていて、考えもしないように使用しています。彼らはサービスリストをスキャンして、選択した順序で最も興味があると思われるアイテムを選択し、アイテムが自分で表示されて介入するのを待つのではなく、好きなだけ長く見たいと思います関心のあるアイテムが消えないようにする。各サービスへの関心はユーザーごとに大きく異なるため、経験的な写真が長すぎたり少なすぎたりすることなく、適切なサイクリング頻度を見つけることは実際の課題です。

1

マウスを小さな絵の上に置いたときに回転を停止することをお勧めします(以下のデータを表示します)。マウスが上にある限り、アニメーションは停止します。マウスが小さな画像から出たら、アニメーションを再開できます。

このようにして、ユーザーは1つの画像から別の画像に好きな速度でジャンプできます。1つの画像に戻りたい場合、アニメーションを再起動して次の画像を待つ必要があるため、この場合、一時停止ボタンはイライラする可能性があります。反復。

クリックしたままにして、現在選択されているセクションに入ります。

0
ALoR