web-dev-qa-db-ja.com

クラシックフッター要素を無限スクロールレイアウトに統合するにはどうすればよいですか?

Infinite Scrolling は、ユーザーのウィンドウに事実上無限の量のデータを表示するためのかなり新しく効果的な方法ですが、1つのページ要素がこの方法に適していません。フッター。ドキュメントの脚が無限に離れているため、無限スクロールページのフッターはあまり意味がありません。

上記のリンクでUXムーブメントが推奨する古典的な解決策は、[もっと見る]ボタンを使用することです。この例では、古いTwitterレイアウトのように見えます。

enter image description here

このソリューションの問題は、それが無限スクロールではなく、無限クリックであることです。新しいコンテンツを読み込んだ後、時間をさかのぼって移動するつもりなら、ページ付けよりも効果的です。それ以外は、特定のページへのURLがないことを除いて、基本的にページネーションと同じ機能です。

Twitterは、Infinite Clickingを真のInfinite Scrollingから外し、フッター要素をサイドバーの下部に移動したようです。 enter image description here

これは非常にエレガントな解決策ですが、直感的ではないという問題があります。私は著作権、法務、会社情報の情報がほとんど常にフッターにあることを知っていますが、この写真を探すために、情報をどこに置いたかを見つけるために少し検索する必要がありました。

Facebookは、フッターと自動読み込みの無限スクロールの両方を備えているため、無限スクロールの世界では特に扱いにくい場所にあります。 enter image description here

繰り返しますが、「真の」無限スクロールではありません。画面の下部にドロップすると、コンテンツが3回しか自動ロードされないため(3回目)、3回ロードした後、「古い投稿」をクリックして手動で開始する必要があります。コンテンツを自動的にロードする方法。さらに厄介なことに、フッターがあります。ページがリロードされるたびに離れてしまうので、このスクリーンショットを取得するには、ページダウンを3回実行してフッターを表示する必要があります。

Infinite Scrollingの最適なソリューションは何かと思います。これらの「フッター」要素を、文字通りのドキュメントフッターとほとんど互換性のないレイアウトで維持します。 Facebookはフッターを用意して食べようとしているようです。Twitterのソリューションはエレガントですが、おそらく直感的ではなく、「さらに読み込む」ボタンソリューションは、無限スクロールの要点である見かけのないフローを中断します。

他の解決策はありますか? Twitterのサイドバーの "フッター"は思ったより簡単に見つけられますか?

17
Ben Brocka

おっしゃるように、これは新しい開発なので、本当に正しいやり方に入るまでにはしばらく時間がかかると思います。私が見ることができる2つの答えがあります:

  1. 現在表示されている画面の下部に永続的な固定フッターを配置します。ただし、ほとんどのフローティングツールバーが見苦しいように見えるため、これを実現するには、テクノロジを改善する必要があると思います。

  2. フッターは必要ありません。必要な情報をすべてヘッダーに入力してください。多分ヘッダードロップダウンメニューとして。それは問題であり、それを一緒に失敗させようとすることは貧弱であることに完全に同意します-あなたは物事を適切に行うか、まったく行わないかのどちらかです。私は、無限スクロールがあるページではフッターなしのアプローチを採用する傾向がありますが、他のページには、フッターを含めることができるより情報に基づいたページがあります。

10

無限にスクロールするコンテンツの下部ではフッターは避けられるべきだと思います。1つ注意点が下部にあります...

ユーザーがスクロールダウンしている理由は1つあります-より多くのコンテンツを見るためです。フッター情報は、その主な目的の邪魔をし続けるだけです。

Klout すべてのページでフッターを保持しようとします-フッターに到達する無限スクロール(フレンズなど)を含むページを含みます。フッターに到達すると、1〜2秒後にフッターが消えます。コンテンツの次のブロックで置き換えられます。 badの実装です!

オプション

次のオプションを順番に検討します

  1. tumblr がそうであるように、無限にスクロールできない他のページでフッター情報を利用できるようにします-それらはスクロールダッシュボードページのフッターを回避しますが、上部ナビゲーションからアクセスされるヘルプページにそれを含めます。

  2. リンクを上部に表示するようにすると、上部ナビゲーションを FlickriverLookBookCSSline のように上にスクロールするか、静的なままにするかを選択できます。 LooksLikeGoodDesign 、メインのスクロールコンテンツが他のページ要素によって乱雑になることをどれだけ気にかけているかに応じて。

  3. スクロールするページ以外にページがない場合は、Twitterと同じように、動的でないコンテンツ列の下部にフッター情報を入力します。

Flickriverは私のお気に入りであり、左上に静的に配置されたトップからトップへのリンクと右下に進行状況のインジケーターを表示するという点で素晴らしいです(これはsmallフッター情報)。また、Tumblrは右上の個別の戻るから上へのボタンでフェードインします。

無限スクロールと無限クリックの組み合わせ(無限スクリッキング!)

別のオプションがあります-Google画像のように、無限スクロールと無限クリックを組み合わせます。たとえば、Google画像でiPhoneを検索すると、[その他の結果を表示]ボタンを表示する前に、おそらく5ページの画像が表示されます。これをクリックすると、さらに5ページのスクロール可能なコンテンツが表示されます。

したがって、これはeveryページを取得するためにクリックしているように感じない妥協です。クリックするたびに実質的なコンテンツの量が返されます。 「実質的」という用語の解釈は、コンテキストによって異なります。配信される追加コンテンツの量と、ユーザーがクリックする必要がある頻度を比較して、より多くのコンテンツを取得するように注意する必要があります。これは、スクロールコンテンツが純粋に垂直(Twitterなど)であるか、CSSlineやGoogleなどの水平であるかによっても影響を受けます

これはGoogleで機能します。ユーザーが特に何かを探していて、十分に良い結果が見つかったときに停止します。 Flickriverでは機能しません。全体の要点は、クリックしなくても連続ストリームのように感じることを意図しているためです。 Google画像方式では、ボタンに到達したときにフッターを使用できます。

無限が終わるとき

無限にスクロールするページのフッターに関する注意点は、ユーザーが表示される無限にスクロールするページにある場合であり、ページ動作するが無限であるかのように-ntilそれは終わりに到達します。おそらく、ページには何百ものアイテムがあり、ユーザーはコンテンツに没頭して上下にスクロールしますが、突然何も表示されなくなります。これ以上コンテンツがないため、ページのスクロールが停止します。 LookBook はこの例です。

この時点で、ユーザーはなぜこれ以上アイテムが表示されないのか疑問に思います。おそらく壊れていると考えて、ユーザーは少し上にスクロールし、少し下にスクロールしてもう一度試してみます。ほとんどの場合、ページの下部にある目に見えないバリアの底を打ち破るようにです。

この場合、何かmustは、これが意図的かつ明確にコンテンツの終わりであることを示し、表示されるフッターがこの目的に役立ちますが、他の多くの終わりと同様に、コンテンツの装飾。

8
Roger Attrill

これは正解ではありませんので、あらかじめお詫び申し上げますが、is UXフォーラムなので、ここで何かを言う義務があると思います。個人的には無限スクロールには我慢できず、今流行りになっているのが残念です。多くの場合、ブラウザのリソースを消耗します。さらに重要なのは、特定の位置にリンクすることができないページ付けタイプの機能をユーザーに提供することです。

多分それは私のOCDが作動しているだけかもしれませんが、コンテンツアイテムの長いリストを表示している場合、たとえば、8画面を無限スクロール位置にすると、そのビューを別の人に送信できません(またはブックマークするなど)。私ができる最善のことは、元のURLを送信して、それが8回の無限スクロールダウンであったことを誰かに(または自分自身に注意して)伝えることです。従来のページネーションは古く、エキサイティングではありませんが、少なくとも私は結果のリストのどこにいるのかある程度のコンテキストがあり、簡単に再びそこに戻ることができます。

1
snipe

私が見た別の選択肢があり、それは何も失うことのない完璧なソリューションだと思います。

フッターを表示するボタンを追加するだけです。

このような - enter image description here

右下にあるボタンをクリックすると、フッターが表示されます enter image description here

実際のサンプルpolyvore.com/dresses/shop?category_id=3を入手してください

1
iliyas Safi