web-dev-qa-db-ja.com

上下にスクロールして過去と未来を表示

エントリポイントから上にスクロールできること、および上にスクロールする必要があることをユーザーに理解してもらいますか、または質問しますか?

アイデアは、時系列の逆順に記事を表示しています。

また、エントリポイントから上にスクロールして、将来のイベントの詳細を時系列で確認することもできます。一番下にすぐに。

横方向の日付スクラバーもビューポートの上部に固定されています。

右にスクラブするか、上にスクロールすると、ユーザーが未来に移動します。左または下にスクラブすると、過去に移動します。

それは一種の奇妙なアイデアであり、私はRailsから抜け出すかもしれません。もちろん、これをユーザーテストしますが、探索する価値があるかどうかコミュニティに尋ねたかったのです。それを解決する方法に関するより良い提案。理想的には1つの画面で?

enter image description here

7

「アンカーリンク」OK

Webページの中央へのリンクは、Web自体と同じです。これはアンカーリンクまたはセクションリンクと呼ばれます。上にスクロールできることをユーザーに通知する強力なアフォーダンスがある場合は、問題ありません。

ウィキペディアはページの中央にリンクしています ユーザーを特定のトピックに誘導するため、多くの人がこれに精通しています。このためのアフォーダンスは問題ありませんが、大きくありません。多くの人々は、左側の空のナビゲーションとWikipediaヘッダーの欠如に気づき、ページの中央に到達したことに気づくでしょう。

ウィキペディアと同じ数のページビューがない限り、上にスクロールする可能性があることをより強く示す必要があります。

「誤った天井」を避ける

多くのWebページには、ユーザーが下にスクロールできる/すべきでないことが明らかでない「偽のフロア」の問題があります。ユーザーがページの中央から開始する場合は、「誤った上限」を回避する必要もあります。

同じテクニックを使用して、Nielsen/Norman Groupが 完全性の錯覚 の上部または下部のいずれかで呼び出すものを防ぐことができますあなたのビューポート。

簡単に言えば、表示されているビューポートの上部が、ページの上部であるように見えないことを確認してください。簡単な例:

enter image description here

上記の例のように、「カットオフ」コンテンツの上にWebサイトヘッダーを配置できます。ユーザーがコンテンツ領域の上部から実行されている不完全なコンテンツを見る限り、スクロールできる上のコンテンツがあることを強く示しています。

1
Tim Grant

一般に、ユーザーが上方向にスクロールして自分で新しいコンテンツにアクセスすることは期待していません。スクロールバーの使用は非常にトリッキーです。特に、両側(ページの上下)に無限スクロールを実装する場合、「今日」ビューへの唯一のアンカーは「横方向の日付スクラバー」にあります。ページの上部までは、未知の未来の日付に連れて行ってくれます。

イベントの並べ替えには、Facebookで採用されているソリューションをお勧めします。進行中のイベントを終了日で並べ替え、すべての将来のイベントを時系列で一覧表示し、最後に、すべての過去のイベントを時系列の逆順に一覧表示します。

最後に、すべての情報を把握するための明確な道筋がないため、この種のナビゲーションは重大なアクセシビリティの問題を引き起こす可能性があります。

0
Stefano

ご指摘のとおり、着陸時にユーザーが上にスクロールしない場合があります。しかし、それはユーザーがアプリを使用するときにユーザーが学習するものであることも理解する必要があります。時系列の逆順を使用しないことをお勧めします。私の理解では、ユーザーは現在のイベントと将来のイベントにもっと興味を持つので、将来のイベントがスクロールの自然な方向(下向き)である方が良いでしょう。それでも、ユーザーが上にスクロールしない可能性がある場合は、ユーザーが画面に到達したときにマイクロインタラクションを追加できます。最後の過去のイベントを明らかにし、今日まで自動的にスクロールするアニメーションである可能性があります。ああ、私が付け加えるかもしれませんが、両方向スクロールでは、プルリフレッシュ機能を使用できません。

選択する日が多い場合、日付スクラブは確実に機能しません。代わりに、今日、明日などへのクイックリンクを備えたカレンダーからユーザーが選択できるようにします。スクロール中、日付をスティッキーヘッダーとして使用します。これにより、ユーザーは常にスクロールしている日付を知ることができます。お役に立てれば。スクリーン付属。

Default Landing

While Scrolling

enter image description here

0
Nakul Saxena