よるみる

ブログのユーザーエクスペリエンスを考えて欲しい。前後の記事のナビゲーション

ブログのUIばかりにこだわらずUX(ユーザーエクスペリエンス)も考えて欲しい。

ブログのユーザーエクスペリエンス

ブログをある程度やっていれば、いつかは自分でデザインをして自分の好みのWEBサイトを作ろうと思うと人も多いでしょう。ブログのテーマを作るのは少しハードルが高い人は、自分の気に入ったテーマを使い、カスタマイズをするなどの手順を取るでしょう。

多くの人は、ここで、自分が考えるデザインとマッチをしたり、かっこいい、おしゃれ、読みやすいなどを感じて好きなテーマを選ぶでしょう。

そんな私も、Wordpressのテーマは自分の思うデザインにしたいと思っており、テーマを購入したり探すくらいなら自分ですぐにカスタマイズできるから自作しようと思って作っています。

ここで、デザイン(UI)ばかりに気を取られないで欲しいなと思います。つまり、UI、あなたのブログに訪れた人が目に触れ、読む部分です。

パッとみてみると、おしゃれだなと思うかもしれませんが、あなたのブログのファンになって多くの時間を過ごすことになった場合、良い体験(エクスペリエンス)を届けられているでしょうか?

どこに欲しい情報があり、どこをタップやクリックすれば、目的を達成できるかと言うことです。つまり、私たちブロガーは自分よがりではなく、読み手のことを考えて設計をしなければいけないわけす。

例えば、あなたが毎日触れているスマホアプリで、あれ?こんなことしたい時はどこにいけばいいんだっけ?みたいなことを感じた経験がある人が多いでしょう。どこからログインをすればいいんだ?どこにアクセスすれば自分の情報をみることができるんだ?などです。

多くの製品やコンテンツは、ユーザーを不快にさせることなく思った通りに操作をしてもらうことが求められます。(一部、退会処理などはわざとを難しくして退会者数を減らすような手法もありますが。)

だらだらと書いてしまいましたが、つまり、私たちはブログのファンになっていただいた素晴らしい方達に不満な要素を与えてはいけないですし、何より与えたくないわけです。

この記事では、私がもっとも感じるブログの不満点、読んでいる記事とその前後の記事のリンクのデザインについてお話をしたいと思います。

前後の記事のナビゲーションを見直す

あなたが記事を読んでいるときに次の記事も読みたいなと思うことがあるかと思います。例えば、時系列的な話題を扱うようなブログではよくみられます。(旅行記準備編、旅行記1日目などある程度、投稿順番に意味があるようなブログコンテンツ)

そんなとき、次の記事を読みたい時は、次の記事のリンクをクリックしますよね。

今回、私が指摘をしたいのはこの次の記事、前の記事のリンクの作りについてです。

これは、某有名なテキストや写真、動画などをブログのように投稿できるサービスもできておらず、非常に不便に感じています。実際に調べてクリックしてみてください。思った動作と違うと感じる人がいるかと思います。

例題を作ってみましたので、例題を見ながら、感じてみてください。

「次の記事」と「前の記事」の関係

さて、まず1問目をみてみましょう。みなさんも考えながらみていただければと思います。

下の図のような構成ののリンクが貼ってあったとします。

読んでいた記事より「新しい」記事を読みたい場合、あなたはどちらをクリックしますか?

どちらをクリックしますか?

答えは、右側の「次の記事」です。え?と思った方もいるかもしれません。

そう感じた方は、この「次の記事」と「前の記事」という情報だけでは、どちらがより新しい記事なのかが判断できないと感じたか、後述する要素の順番で判断したかのどちらかに当てはまることが多いでしょう。

もう少し、言葉をみていきます。

問題です。「次」の対義語は何でしょうか?

答えは「前」や「手前」です。

では、「前」の対義語は何でしょうか?

答えは「次」や「後」です。

前という表現を使うと「後」という単語が出てきます。「前」と「後」という表現を考えると、「前」は今から通る部分、「後」は過去に通ってきた部分という意味になります。

では、「前」と「次」ではどうでしょうか?この場合、「前」は今までのこと、「次」はこれからのこと、ということを表します。

つまり、上の図では、「次の記事」が新しい記事を指しています。

ただ、ここで、そうか、「次の記事」が新しい記事だと判断するのは待ってください。多くのブログをみていると、意外とこの条件がごちゃごちゃで、次なのに古い記事にリンクされていたり、前なのに新しい記事にリンクされていることがあります。

実際、人それぞれ感じ方があり、「次」、「前」、「後」という言葉に惑わされており、ブログの制作者も無意識的にどちらかを選択していることでしょう。

みなさんも、単体で「次」という言葉を聞いたら、新しいと感じる人もいると思いますし、「前」だから新しいと感じる人もいるでしょう。

これは、多くの記事を時系列的に読んでほしい場合や、ブログのファンになってたくさん記事を読みたい!という人にも混乱を与えてしまします。

右と左の要素

第2問目は要素の配置についてです。

下の図をみてください。ブログでよく見る二つの種類を用意してみました。

では、こちらも、どちらが日付が新しい記事でしょうか?

prev next

右を選びましたか?左を選びましたか?

これといった、正解はよくわかりません。

十年以上の前のブログでは、左側が古い記事、右側が新しい記事というのが多くみられていましたので、それを組んで、左側が新しい記事、右側が新しい記事という場合が多いです。

さて、ここで、違和感を覚えた人も少しはいるかと思います。その一つが、多くのブログのトップページで採用されているページャーです。

このサイトのページャーのスクショです。

ページャー

多くのサイトは、右側をクリックすれ古い記事にアクセスでき、反対に左側(若い数字)をクリックすれば新しい記事にアクセスできるようになるわけです。

このページャーでは、左が新しい記事、右が古い記事ということです。

つまり、一つのブログの中で、過去と未来を表す向きが逆になっているわけです。

無意識のうちにこのようなことが設定されていると、だんだんとよくわからなくなってきてしまい、読者は、モヤモヤを感じてしまうわけです。

対処方法

では、どのように対処すれば良いのでしょうか?

一つは、記載する事項に注意するという方法があります。「前回」と「次回」というような書き方をすれば、どちらが古い記事かはわかりやすくなったかと思います。

ただ、「次回」という表現方法は、まだ投稿されていないようなイメージや、予告のようなイメージになるかと思いますので、ブログの構成では不向きだと思います。一方で英語の「Prev」、「Next」のような表現であれば、この違和感もなくなるだろうとは思います。

次に、要素の配列についてですが、多くのサイトが右側に新しい記事を設定していますが、一つのウェブサイトの中で情報の時系列が反転しているのはモヤモヤします。

そこで、投稿日時を一緒に表示することで対処をするとい方法をとれば解決できるでしょう。新しい記事か古い記事か判断するのに一番簡単な方法は時刻を表示することです。要素の配置が違ったとしても、時刻を記載することでユーザー側は今よりも格段に新しい記事と古い記事の見分けをつけることができます。

最後に

ブログという性質上、デザインだけではなく、多くの記事を読む読み手のことをしっかりと考えて設計する必要があると思います。

今回は、主に、前後の記事を表示するためのリンクについてのお話をしました。まだまだ、私も未熟ですし、正解があるような分野ではありません。

ですが、私は、1ブログの作成者として、テーマの制作者として、より良いものを作り届けたいと思っています。

今回、のお話を踏まえは、実際に私は、次のスクショのように作成をしました。

prev next

誰かのご参考になれば。