16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと

ふえぇ・・・UXわからないよぉ・・・。

http://sesleria.hateblo.jp/entry/2013/04/07/140025

上記のブログでも触れられているのですが、
ブログにおける「次」とか「前」という方向って分かりにくいです。

ブログ以外の一般的な話をすると、基本的には、
左上がスタートで、右下がエンド」というのが2次元平面上における方向の概念だと思います。
そして、これまた一般的な話をすると、
『前(before)』はスタートに向かう方向のことで、『次(next)』はエンドへ向かう方向のこと」が基本概念だと思います。
(だからこそブラウザの進むボタンは右向きで、戻るボタンは左向きなわけです。)

しかし、ことブログの話になると、これがよく分からなくなります。

というのも、大抵のブログでは最新の記事が一番上にあります。
時間軸ベースで考えれば、最"新"記事はエンドの地点にあるべきなんですが、そうなっていない。

まぁ別にそれはいいです。
最新記事がスタートで最古の記事がエンドという、
時間軸と逆の方向こそがブログの方向だというならそれでいい。

しかし、それをブログの方向だというのなら、
「次の記事」で飛ぶ先は今の記事よりも古い記事になるのが自然なのではないか?
スタートが最新記事で、エンドが最古の記事なのであれば、
次へ次へと遷移するに従ってより古い記事へとリンクしていくのが正しいのではないか?

でも実際はそうはなっていません。
「次の記事」をクリックすればより新しい記事へリンクするし、「前の記事」ではより古い記事へリンクします。
つまり、この動きに従うならば、スタートは最古の記事で、エンドが最新記事ということになり、
上記の方向と矛盾してしまいます。ふえぇ・・・。

まぁでも別にこれもいいです。
方向としては「スタートが最古で、エンドが最新」だけど、
そもそも「『左上がスタートで、右下がエンド』なのではない」という理解をすればいいわけですから。

つまり、ブログというものの上では、上記の基本概念のうち、
「『前(before)』はスタートに向かう方向のことで、『次(next)』はエンドへ向かう方向のこと」
は守られているが、
「左上がスタートで、右下がエンド」
は守られていないということです。ふむふむ。

しかし、だとしても、ブログトップページなどにある「次のページ」の遷移は納得できない。
記事単位での「次」は時間軸で言う「より新しい方向」を表しているのに、
ページ単位での「次」は「より古い方向」を表している。

要するに、ブログという世界が世間一般的な方向の概念とずれているだけでなく、
ブログという世界の中ですら、記事単位とページ単位とで方向の概念がずれている。

これは気持ち悪いなぁ。

ページャー周りのCSSをいじるにあたって、
この辺をどうしたらいいのかよく分からなかったので書きました。

とりあえず今は、「次の記事」は「上方向」、「前の記事」は「下方向」、「次のページ」は「右方向」ということで方向記号を付けてありますが、この辺の方向付けの最適なUXってなんなんだろう?
別にブログだけじゃなくて、

・最新の情報を一番最初に表示させる
・ページ送りによって古い情報も確認できる

という要素を満たすものであれば当てはまる問題だと思うのですが、どこかに答えはないのだろうか・・・。

おまけ

はてなブログで、
「次の記事」は「上方向」、「前の記事」は「下方向」、「次のページ」は「右方向」
の方向記号を付けるためのCSS

.page-entry .pager-next a:before,
.page-archive .pager-next a:before {
  content: "▲ ";
}
.page-entry .pager-prev a:before,
.page-archive .pager-prev a:before {
  content: "▼ ";
}
.page-index .pager-next a:after,
.page-search .pager-next a:after,
.page-category-category_name .pager-next a:after,
.page-entries-year-month-day .pager-next a:after {
  content: "  \25b6";
}

終わり。