WEBサイトについて 何を追尾させるのか？

本日は久々にWEBサイトに関する情報をお届けしたいと思います。昨日、記事の途中で「ユーザーにとって、何かよくわからないけど使いやすい、頭を使わなくていいような心地良くて最良のUXを届けること」を目指してきたとお話しましたが、本日はそのミソとなる部分を少しだけご紹介しますね。

追尾するコンテンツ

多くのWEBサイトは縦長にコンテンツが組まれているので、ユーザーは特にクリックしたいコンテンツがないか、離脱をしない限りは読み進めていくごとに下へ、下へとスクロールをしていきます。

ということは、下に進めていくごとに普通は隠れてしまうコンテンツが存在します。

これを解消する為に、弊社WEBサイトではいくつかのコンテンツを追尾させています。

01.ナビゲーションバー

追尾コンテンツとして代表的なのが、ページ上部にあるナビゲーションバーです。

弊社のナビゲーションバーは、追尾すると各ボタンのサイズが変わって、空いたスペースに検索ボックスが入って合体します。追尾しても1行ぶんしか場所をとらないので、メインコンテンツの邪魔になりません。

ところでデザイン4大原則に「反復」という言葉があります。
ページを移動しただけで、がらっとページレイアウトそのものが変わってしまうと目まぐるしかったり混乱してしまいます。ここで共通のナビゲーションボタンを反復してどのページでも出しておけば、安心してユーザーはページを移動できるようになるんです。

ナビゲーションバーを追尾しているWEBサイトが多いのはこの為です。

02.ページ上部へ戻るボタン

しばらくスクロールをすすめると、こんなボタンが現れます。押せばページ上部に戻る仕組みなんですが、無いとスクロールバーをつまんでページ上部に戻る、マウスホイールを回す、キーボードでHomeボタンを押す・・・といった動作が必要になります。それをワンクリックで出来るようにしたものです。

なお、このページ上部へ戻るボタンが右下にあるのは、人間の目線はWEBサイトのコンテンツに応じて左上から右下に向かって進むからです。つまりその終了地点に設置しています。

03.サイドバー

弊社のサイドバーは、得に何のアクションもなければこんな風に極めてシンプルです。

しばらくページを移動していると、閲覧履歴がここに表示されます。これはさっき見たページをもう一度見たい方の為の仕掛けです。

さらにカートに商品が入っている場合は、アイテムの数量と合計金額(商品代のみ)が表示されるようになっています。

これらの情報がいつでも視認できるように、サイドバーも追尾させています。

04.ブログ記事限定追尾バナー

商品ページではなくブログ記事限定になるのですが、バナーを追尾させています。求人系のブログ記事をご覧の方は、求人ページへつながるように導線を作っています。

05.アフィリエイト広告はなし！

弊社は、外部サイトにジャンプしてしまうようなアフィリエイト広告が追尾することはありません。いくら商売のためとはいえ、ページ遷移を妨げたり視界を覆い尽くして邪魔するような広告があっては、健全なユーザー体験とはいえないでしょう。私たちがしたいことはそれではないのです。

まとめ

追尾コンテンツといえば、広告などで我欲が先行して使いづらくなってしまっていることも多いのですが、そうではなく弊社は、ユーザー体験向上のためにコンテンツをいくつか追尾させています。

視認性を上げて現在地を把握しやすくし、行きたいところに辿り着くための到達手段を、よりスマート用意したい。その為にナビゲーションバー、ページトップボタン、サイドバーを常に反復して表示させています。

これから先も、このサイトをますますパワーアップさせていきます。楽しみにしていてください。