「トップに戻る」ボタンのアニメーションスクロールvsジャンプ
非常に長くなる傾向があるドキュメントページにback to topボタンを実装することを検討しています。
ボタンは画面の右下の固定位置に表示されます。
私の質問は、ユーザーがボタンをクリックしたときに、ページの上部へのジャンプをすぐに行う必要がありますか、それともビューポートが上部にスクロール（アニメーション）するJavaScriptソリューションを実装する必要がありますか？
これは派手な「映画のような効果」や装飾ではありません。アニメーションは実際に、ユーザーがドキュメントの前のセクションに戻っていることをユーザーに知らせる目的を果たします。これにより、特にユーザーが誤って[トップに戻る]ボタンをクリックした場合に、注意力の失明を防ぎ、混乱を防ぎます。
だからはい、アニメーション化します。
どちらも機能しますが、ページの上部が視覚的に明確であることを確認することがより重要です
ユーザーがhomeまたはscroll to topボタンを押すとどうなるかを見てみましょう。
- 画面が変わります（スクロールまたはジャンプにより）。
- これは、スクロールするかジャンプするかに関係なく、長いドキュメントでは認知的に混乱します。ユーザーは、コンテンツの新しいページに直面し続けます。
- ユーザーは、ページの上部であることを期待しています。
- ユーザーは視覚的に彼女がトップに戻ったことを確認します
- ユーザーはワークフローを続行します
これから何を学ぶことができますか？
スムーズなスクロールは摩擦1を減らすのに役立ちますが、ユーザーは＃2と＃3を通過する必要があります。
一方、＃3を処理できる場合は、＃1と＃2はそれほど重要ではありません。ユーザーがページ上部の向きをすばやく確認することを確認することで、ユーザーフロー全体の速度が向上します。
これはあなたにとって何を意味しますか？
- スクロールを考える前に、ページの上部が「一目で」ユーザーに明確であることを確認してください。
- スクロール対ジャンプは、二次的な決定です。お勧めします：
- ユーザーが頻繁にトップに戻る傾向がある場合（たとえば、特定のセクションに飛び込んでから、トップに戻って別のセクションを選択するなど）、スムーズさよりも応答性/速度とワークフローの方が重要であるため、ジャンプは問題ありません。これが、多くの長い技術文書がジャンプを使用する傾向がある理由です。
- ユーザーがドキュメントに不慣れな場合、またはドキュメント内の位置がコンテキストとして重要な場合、スクロールはその位置コンテキストをユーザーに伝えるのに役立ちます。
- スクロールはトランジションとして明らかに少しスムーズですが、アニメーションの有用性を過大評価するのは簡単です。 ..また、技術文書で迅速な回答を探しているユーザーにとって、サイトがイライラするほど遅くなる可能性があります....ここでimpressionジャンプによって伝達される応答性は、実際にユーザーエクスペリエンスを向上させる可能性があります。
の Home キーを押すと、ページの上部に移動します。
「トップに移動」ボタンが役立つのは、ボタンをクリックしたときにクリーンアップが行われる無限にスクロールするWebページ上だけです。
実装する場合は、いくつかの統計を収集してもらい、実際に何人が使用しているかを確認してください。多くの人がそうだとしたら、私は驚きます。
ジャンプ対スクロール
スムーズスクロールは、「映画のような」効果をもたらします。これは、特定のタイプのサイト/ウェブアプリでいいです。ただし、これが文書、特に技術文書の場合は、面倒なアニメーションを避けてください。
ユーザーの速度が低下する場合は、ウェブサイトの主な目的が生産性である場合は回避する必要があります。
そのため、ボタンが便利だとは思えませんが、実装する場合は、上にジャンプするようにしてください。
周りを見てください
同様の製品/サービスのドキュメントをご覧ください。コードの場合、 momentjs docs のようなものが良い例です。ドキュメンテーションタイプについてより具体的に説明できる場合は、いくつかの異なる例を探すことができます。
たとえば、設計要件を質問することから始めます。
-ドキュメントページの目的は何ですか？
-望ましい結果は何ですか。
トップボタンに戻ることは、情報アーキテクチャの問題を覆い隠すだけであり、ユーザーの複雑なコンテンツを処理する負担を課すと思います。
より構造的な解決策は、ドキュメントとその固有の構造および可能性の理解に焦点を当て、必要に応じて意味のある方法で再構成することです。このようなドキュメントページは進化し、おそらくより多くの価値を追加する可能性があります。
以下は、長いドキュメントページを処理するために検討できるいくつかのアプローチです。
テキスト編成が重要なので、ユーザーに手がかりを提供することが重要です。これには、セクションのタイトル、サブタイトル、イラストなどが含まれます。これにより、ユーザーはドキュメントを効率的に調査して、必要に応じて詳細を掘り下げる前に、ドキュメントの概要を理解することができます。
漸進的な方法で追加情報を開示するの方法を模索することもできます。これにより、原則としてページを大幅に短縮し、ユーザーにより多くの制御を与えることができます。
ナビゲーションメニューを提供するを検討してください。これは、[トップに戻る]ボタンよりも明示的で実用的です。
レイアウトを突然変更しないでください。代わりに、トランジションを使用して、「上にスクロール」ボタンを誤ってタッチした場合にユーザーが混乱しないようにしてください。また、ページ/アプリで実行される他のアクションについても同様です。穏やかな移行により、ユーザーは表示されている内容に変化があることを理解できます。
ここで、長いドキュメントページの場合、「トップに戻る」の代わりに、「アンカー」ナビゲーションを使用して、ユーザーがさまざまなセクション、章、またはタイトルをナビゲートできるようにすることをお勧めします。意味を説明するために作成した簡単な画面を見る
最後に、アクションに適用されるトランジションの使用について詳しくは、次のリンクを参照してください。
いい質問ですね。ページのサイズまたは長さが非常に長い場合は、下から上への即時遷移を使用しないでください。代わりに、title1、title2などへのジャンプのようなページ分割を提供します。
ページの長さが本当に長くない場合は、トランジションを使用できますが、微妙なアニメーションを使用できます。これはユーザーにとってすぐに変更できるものでなければなりません。