UI UX ページトップへ戻る 人間中心設計

【怒りのUI】ページトップへ戻るボタンのアニメーションを考える

こんにちは、デザイナーのスライです。
なぜか、無性にコードを書きたい衝動に駆られました。。。

衝動を抑えるのは苦手なタイプなので、今回は前から気になっていた
「ページトップへ戻るボタン」について書こうと思います。

怒りのUI 第4回目「ページトップへ戻るボタンのアニメーションを考える」です。

ページトップへ戻るボタン

ページトップへ戻るボタンの例
縦に長いページでは、ページ最上部までスクロールさせるのは骨の折れる作業です。
特にスマホの場合はスクロール量も膨大になり、大変です。

そんな問題を解決するために、「ページトップへ戻るボタン」があります。

ページ最上部までスクロールさせる手間と時間を解消し、
快適な操作性をユーザーにもたらします。

スムーズスクロール

//スムーズスクロールの例
$(function(){
  $('#buttonNormal').click(function(){
    $('body,html').animate({
      scrollTop:0});
    return false;
  });
});

「ページトップへ戻るボタン」の多くは、クリックした際アニメーションが発動します。
スルスルとリンク先へスクロールしていくアニメーションです。

このアニメーションを「スムーズスクロール」と呼んでいます。

アニメーションが発動することで、ユーザーはリンク先へ遷移したことを認識できます。
これにより、ユーザーはより快適な操作性を体験できる訳ですが、
私は以下の点がずっと気になっていました。

それはスクロール位置による挙動のバラつきです。

スクロール位置がページ最上部に近ければ、スクロール速度は遅くなり、
逆にスクロール位置が遠ければ、スクロール速度は速くなります。

これらの問題点から、私は以下を考えました。

  • 挙動にバラつきがあることで、ユーザーはストレスを感じないか？
  • そもそもスクロールをユーザーに見せる必要はあるのか？

スムーズスクロールの目的

<!-- 通常のアンカーリンクの例 -->
<h1 id="pageTop">SAMPLE</h1>
<p><a href="#pageTop">link</a></p>

通常のアンカーリンクには、アニメーションがありません。
クリック判定の瞬間（ページ内遷移の場合loadingが発生しない）にリンク先へ遷移するため、
遷移したのか判断に困るユーザーもいるでしょう。

この問題を解決する手段として、スムーズスクロールがあります。

つまり、スクロールするアニメーションをユーザーに見せることは目的ではない。
遷移したことをユーザーに伝えることが目的なのです。

これらを踏まえて、私は新しい「ページトップへ戻るボタン」を考えてみました。

新しいアニメーションを考える

考える上で注視したのは、以下の点です。

  • 安定した挙動であること
  • 遷移したことが認識できる

安定した挙動であること

スクロールのアニメーションを加えると、スクロール位置によって挙動のバラつきが生じます。
従って、通常のアンカーリンクと同じく0秒で遷移させることを考えました。

遷移したことが認識できる

例えば別ページに遷移する際、loading処理が走り、画面がチラつきます。
この現象を模すことで、ユーザーは遷移したことを認識できるのでは、と考えました。

新しいページトップへ戻るボタン

//ページトップへ戻るボタンの例
$(function(){
  $('#buttonOpacity').click(function(){
    $('body,html').animate({
      opacity:0}, {duration:'fast'})
    .animate({
      scrollTop:0}, 0)
    .animate({
      opacity:1}, {duration:'fast'})
    return false;
  });
});

アニメーションの順序は以下の通りです。

  1. コンテンツが非表示になる
  2. リンク先へ遷移する
  3. コンテンツが表示される

従来のスムーズスクロールにあった、スクロールのアニメーションを取り払うことで、
スクロール量による挙動のバラつきを解消しています。

クリック判定後にコンテンツの非表示・表示をさせることで、
ユーザーはリンク先へ遷移したことを認識できます。

コンテンツの非表示・表示をふんわりと表現することで、
ガタつきのない心地良い挙動を意識しました。

まとめ

快適なUIは、表面的なデザインだけではなく、挙動も大きく関係します。
この挙動は快適なのか？と見直すことで、サイト改善の手がかりに繋がるかもしれません。

ボタンの挙動一つで、サイトのUIを台無しにしてしまうことは十分にあり得ます。
様々な当たり前に疑問を持ち、より快適なUIをユーザーに届けましょう。

最後に、今回作ったデモファイルを以下にアップしてあります。
非常にシンプルな作りですが、参考までにどうぞ。

デモファイルのダウンロードはこちら

関連記事