やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

前後ナビの表示順について考えてみた

パターンが多すぎるので。

左→右, 上→下の文化圏

横書きのときに。

水平

< 前のページ    次のページ >
前のページ <   > 次のページ
< 前のページ    > 次のページ
前のページ <     次のページ >

垂直

< 前のページ
> 次のページ
> 次のページ
< 前のページ
< 前のページ
次のページ >
次のページ >
< 前のページ

右→左, 上→下の文化圏

縦書きのとき。

水平

< 次のページ    前のページ >
次のページ <   > 前のページ

垂直

< 次のページ
> 前のページ
> 前のページ
< 次のページ

属性

  • is_prev_left = True/False
    • prev=left, next=right
    • prev=right, next=left
  • is_horizontal = True/False

読む順序

  1. 横書き
  2. 縦書き

日本ではこの2種類のみのはず。

横書き

  1. 左から右へ
  2. 上から下へ

“Z"字の書き順通り。

縦書き

  1. 右から左へ
  2. 上から下へ

“N"字の右側から一筆書きする順。

使いそうなもの

A.水平前次

< 前のページ    次のページ >

B.垂直前次

< 前のページ
> 次のページ

C.垂直次前

> 次のページ
< 前のページ

A. 水平前次

< 前のページ    次のページ >

水平パターンのうち唯一使えそうなもの。記号が定位置にできる。

水平次前にしない理由

横書きのルールを優先したから。

しかし、もし本のように必ず先頭から読むのであれば「水平次前」パターンのほうが良い。

  • 読む順序は必ず「前→次」である
  • 1ページ目から順に読むなら、必ず今のページから「次」へ移動しようとする(既に読んだはずの「前」)

前後の順は左→右、上→下の順という文化圏である。しかし、このパターンはそれに反して上=次,下=前になっているため統一性がない。わかりにくい。

わずかに早く「次」へのリンクが目に入るのが利点である。しかしWebページは本と違い、必ずしも順に読まれるとは想定していない。話題を木構造で分類して部分的に読んだり、全文検索にて横断的に一部ページだけが読まれることを想定している。Webページの場合は「次」を優先するよりも横書きの文化圏ルールという大枠を優先したほうが統一性がとれてわかりやすいと判断した。

ほかの水平パターンを使わない理由

以下のパターンは"<“, ”>“の記号の位置が定位置になるとは限らないため却下。もし固定で定位置にするなら不自然に間隔が開いてしまいうる。連続性を失いわかりにくい。

前のページ <   > 次のページ
前のページなんですよねこれが <   > 次のページ
前のページ <   > 次のページ
なんですよ
ねこれが
前     <   >     次

一見して前後ナビであることがわかりにくいため却下。

B. 垂直前次

< 前のページ
> 次のページ
  • 記号が左側で統一できる
  • 「前と次」の順序を「上と下」の順で表現できていてわかりやすい

本なら「前」のページが「次」より先にこられても既読のはずなので邪魔に感じる。しかしWebページの場合は必ずしも順番に読まれているとは限らない。上下という配置順が前後の順と一致するため自然な配置である。

記号の位置

以下の場合、記号の位置が統一できない。次のページの記事のタイトル次第で>記号の位置が変わる。一見して前後ナビであることがわかりにくい。ほかの水平パターンを使わない理由とおなじ。

< 前のページ
次のページ >

C.垂直次前

> 次のページ
< 前のページ

Bの垂直前次のほうが良い。水平次前にしない理由とおなじ理由で。

  • 必ず前から次の順に読む(飛ばさない)
    • 「次」を「前」より先に表示すると親切か
  • 縦書き
    • 次=left, 前=right
    • 次=bottom, 前=top

is_prev_left = False

Webページ

  • 読む順は離散的
    • 一次元的な順序でなく、内容の分類によって絞り込む
      • 左上→右下のように文化圏の順に従うと統一感があり理解しやすい
  • 横書き
    • 次=right, 前=left
    • 次=bottom, 前=top

is_prev_left = True

参考

Webでも縦書きができるか調べた。できるらしい。

水平配置はCSSでできそう。

感謝。

所感

水平前次パターンが好ましいか。理由は以下。

  • Webページは横書きである
  • 行数の節約
    • タイトルを短くする工夫を強いられる
      • 端的に伝わる