ページネーションとパンくずリストを併用した場合、落とし穴があることに気づきました。
ある日のできごと
上の画像のようなブログを見ていました。JavaScriptの学習に熱心な著者なのでしょうか。これは一覧ページの1ページ目ですね。次に2ページ目を見てみましょう。
2ページ目を見てみると、CSSの勉強をしていたようです。一番上にある「CSSフレームワークのBootstrap5を試してみた」の記事を読んでみましょう。
（ダミーテキストとして、夏目漱石の草枕を本文としています。）記事を読んでいたらこの人に興味が湧いてきたので、この人の他のCSSの記事も読みたくなりました。そこで、パンくずリストにある「ブログ記事」リンクをクリックしてみました。すると表示されるのは…？
「あれ…？JavaScriptの記事…ってことは1ページ目に戻っちゃった？CSSの記事を見ようと思ったのに…」
ページネーションとパンくずリスト併用時の落とし穴
問題点は、ページネーションの2ページ目からきたユーザーに対しても、パンくずリスト上の一覧ページへのリンクを1ページ目にしていたことです。
普通に考えれば、2ページ目からきたユーザーには、パンくずリストのリンクも2ページ目にするべきです。そうでないとユーザーが困惑してしまいます。
解決策
ユーザーがパンくずリストからでなく、ブラウザの 「戻る」機能 で1つ前のページに戻ればこの問題は考えなくても良くなりますが…。「ユーザーの使い方の問題だ」なんてデザイナーが言ってはいけません。
この問題への解決策は下記のようになるでしょう。
- ユーザーが2ページ目からきた場合は、2ページ目のリンクとする（あるいは、JavaScriptの
history.back()を使う） - 上記以外の場合は、1ページ目とする
上記はユーザーの遷移元によってリンク先を変える動的な処理が必要となります。
最後に
この記事で紹介したのは些細なことですが、ユーザーに「このサイト良いな」と思ってもらうために、細部まで意識を向けることが重要です。
個人的には、驚くべき機能が準備されているサイトよりもユーザーが意図したことが思い通りにできるサイトが評価されると思います。だからこそ、このUIはこのように動くべきだという視点でWebサイトをみる目が必要になるはずです。
パンくずリストの名前の由来
全くの余談ですが、パンくずリストという名前は、童話のヘンゼルとグレーテルで「主人公が森で迷子にならないように通り道にパンくずを置いていった」というエピソードに由来するそうですよ。
この記事の 最終更新：2021.7.3