ラベル UI の設計

フォーム・ボタンやリンクの文字列など、ホスピタリティの高い「ラベル」の UI 設計を考える。

目次

• ブログの「前後の記事」リンク

ブログの「前後の記事」リンク

「前の記事」「次の記事」。日本語は「前後」や「後先」の概念が複雑で分かりにくい。「前の記事」はこの記事よりも新しいのか？古いのか？

よく見かけるのは、

• 左に「前の記事」 … より古い記事に移動する
• 右に「次の記事」 … より新しい記事に移動する

というように、ペアでの配置とレイアウトによる表現が多いが、たまに右側に「前の記事」が配置されたサイトも見かける。左右が時系列 (過去と未来) を表現していて、「次」という言葉がセットで登場すればまだ推測がつくのだが、その概念に一見反するようなレイアウトや文言が出てくると凄く分かりづらい。

• 「前」という語は、空間的な概念では「前方」のように進行方向を指すが、時間的な概念では「前々から…」というように「過去」を指すことになる
• 「先」という語は、空間的な概念では「先頭」のように進行方向を指すが、時間的な概念では「先々の…」というように未来の意味もあれば、「先週」のように過去を示す意味もあり、余計にややこしい
• 「後」という語は、空間的な概念では「後方」のように背中側を指すが、時間的な概念では「後ほど」というように未来の意味になる

英語圏だと、「Prev (Previous) Post」と「Next Post」のように表現され、時系列が分かりやすい。一方日本語だと、「過去」「未来」と書くと仰々しいし、文字数を揃えたい意向から、「前の記事」「次の記事」などという表現が多い。コレを「手前の記事」「後の記事」などと呼んでもイマイチピンとこないし、「戻る」「進む」という単語はブラウザバックを連想させて違和感がある。

ココは潔く、「古い記事」、「新しい記事」、というリンクラベルにするのはどうだろうか。文字数は揃わないが、Prev・Next に近い時系列的な概念を伝えられるし、「前後・後先」のような紛らわしい語を使わないことで、分かりやすさを優先している。自分が以前運営していたはてなブログでは、自分でカスタマイズしてこのように表現を調整していた。

• 参考 : ブログの“前の記事”と“次の記事”ってわかりにくいよね : tidestar
• 参考 : from area BOOT4: nextの反対はprevかbackか?
  • next ⇔ prev。go ⇔ back
• 参考 : Next and Previous Links « WordPress Codex