横からスライドする検索用メニューに使ったjQueryプラグイン

導線を明示して直帰率を20%くらい下げられた

自社で担当しているサイトのギャラリーページ的な場所を改修した。
やったことは大きくこの2点

1.単純に要素が並んでいる→いくつかのジャンルに分けて閲覧数の多いものを3点ずつ表示する

2.上部に検索窓がある→虫眼鏡アイコンをクリックするとジャンル、単語での検索ができるサイドバー(?)が右側から出現する

結果から言うと、直帰率を20%ほど下げることができた。
サービス立ち上げ当初はギャラリーの作品も多くなく、パッと一覧できる程度だったと思うが、点数が増えたことでユーザーが順路を判断できなかったのだろうと仮説を立て、
「人気」「よく見られている」ものをまず表示させることで導線をはっきりさせることができた。まず「全体像をあらかた把握したい」という気持ちはよくわかる。

サイドバー化で使用したjQueryプラグインの話

「Slidebars.js」というドロワーメニューのプラグインを使った。

まず「drower」が比較的人気というか簡単そう、と思ったので導入してみたけれど、カスタマイズのしにくさを感じて諦めた。
jQueryがさっと分かるならもう少し粘れたかもしれないが、クラスの名前ひとつ変えるのも時間がかかりそうだったのでパス。

…というのもサイトの構造上、ヘッダー部分はスライドさせないようにしたかった。
第二階層であるギャラリーページ内でのメニューであることを明示的にしたかったためである。

その点、Slidebars.jsはどこで何しているかが初心者の私にもわかりやすく、
サイトがレスポンシブなので、その辺りの調整もしやすかった。
サイドバーにtopの指定をつけて、ヘッダーはそのままにmainページのみがしゅぴっとスライドするかたちにすることができた。

正直、検索してまで何かを探しにきているユーザーはあまり多くないページなので、どちらかというと「検索メニューが必要な人にだけ見られれば良くなる」「ギャラリーページにはギャラリーの要素のみに集中してもらう」ためのサイドバー化でした。


・参考にさせていただきました。ありがとうございます
【jQuery】簡単に使えるドロワーメニューSlidebars.jsの使い方と、もうちょい気持ちいい動きにしてみた