古のDLsiteのハンバーガーメニューのUIをリニューアルしたお話

こんにちは！

デザインチームの山下です。

今回はDLsiteのハンバーガーメニューのUIのデザインを変更した件について紹介していきたいと思います。

ハンバーガーメニューってなんぞや？

まずハンバーガーメニューって何のこと？ってところですが、ここを開いた時のメニューのことです。ハンバーガーの種類やドリンクとかが載っているメニューのことではないです。

大体どのサイトでも見かけますよね。

横線3つがバーガーっぽいことから、ここのボタンを押すと出てくるメニューのことをハンバーガーメニューと呼ばれています。

DLsiteのハンバーガーメニューは？

リニューアル前はこんな感じでした。

………長！！！！！！！！

項目の在りどころも、新規ユーザーにはわかりにくい箇所や、情報がまとまっていないところがあります。

浮かび上がる数々の疑問点……………

なぜこうなってしまったのか？

「買った作品はどこから見えるか？」が直感的にわからないのはかなり致命的なUIになっていると思います。

おそらく長年使われてきたデザインに、要素を追加したり削除したりを繰り返してきた結果、順序がバラバラになったり色のルールが確保されていないまま今のデザインになってしまったのかと思われます…。

1度洗い出して考え直すことにしました。

方法

・情報を整理しカテゴリ分け、再配置を行う。
・新規ユーザーに不要なログインしないと見れないリンクの削除。
・マイページの項目は「マイページ一覧へ」に遷移させる。
・アイコンは極力使わず、色もシンプルに。
・ショッピングにフォーカスしたメニュー構成に変更。

上記を改修の要件として進めました。

いくつかある中でメニュー内でも一際色の主張が激しい新規登録/ログインボタン部分にフォーカスを置いて紹介します。

新規でアカウントを登録するタイミングですが、初めて来て速攻でアカウント登録しよう！と思うユーザーはあまりいないと思います。

例えば、閲覧履歴とかお気に入りとか保存した検索条件とか、ゲストユーザーだと再度アクセスしたとき残らないのが面倒になって、「アカウント作っとくか…」と、ようやく登録したりしますよね。

サイトを巡回した上で「ログインした方が使いやすそうだな」と思った上で登録することが多いのではないかと思います。

なので新規登録ボタンはそこまで目立たせないカラーに変更した方が良いかなと思います。

…とこんな感じで、ユーザーの行動ひとつひとつに重きをおきながら、見た目と中身を整理して作り上げていきました。

FIXデザイン

完成したのがこちらです。

だいぶ変わりましたね。

ビフォーアフターを並べてみました。

ビフォアフ比較【未ログイン時】

ビフォアフ比較【ログイン時】

余白が多くなって片手でも操作しやすくなりました。

本改修によるABテストの結果

DLsiteではいつも小さな箇所で地道にABテストをやっているのですが、今回は大きくデザインを変更したABテストを行う運びとなりました。

結果、リニューアルの方が使用率が多く、頑張った甲斐を感じられたので大変良かったです（ユーザーの皆様いつもありがとうございます）

viviONではデザイナーを募集しています

株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。

今回紹介したようなUIデザインの改修含め、ABテストやユーザーテストなどデザインチームでは様々な取り組みを行なっております。

noteでもデザインチームの活動を今後も発信していきますので気になる方はフォローしてチェックしてみてください。

サービスをよりよくしていきたい方、デザインチームの仕事に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。

今後とも株式会社vivionを何卒よろしくお願いいたします。

株式会社viviON