こんにちは、BASEの次世代管理画面プロジェクトでデザインを担当している小山です。 ネットショップ作成サービス「BASE」は2019年2月に、商品管理ページをリニューアルしました。 今回は商品管理ページをリニューアルして、再検討が必要になってしまった機能にどう向き合ってきたかをお伝えできればと思います。
「次世代管理画面プロジェクト」がどのようなコンセプトのプロジェクトであるかは、過去のアドベントカレンダーで早川が書いた記事がありますので、そちらをご覧ください。
次世代商品管理ページリリース
まずは2月にリニューアルされた商品管理ページの Before / After を紹介します。
リニューアルのポイント
今回のリニューアルでは、主に以下の点を変更しました。
- スマートフォンファーストなデザイン
- 新機能（商品の複製、一括削除、一括公開/非公開設定）を追加
- 検索・絞り込みの強化
- 商品登録の整理
- コンポーネント刷新
リリース後の反応
今回の商品管理ページのリニューアルはインパクトの大きいリリースとなり、リリース後は良い反応から悪い反応まで様々なフィードバックをいただきました。
5年以上続いているサービスのUIをリニューアルしたので、「使いにくくなった」「前の方がよかった」という声はある程度覚悟していましたが、今回のリニューアルで最も多くフィードバックを頂いたのは、ページャーと並び替え機能でした。
リニューアルでページャーと並び替え機能に加えた変更
BASEのサービスが成長するにつれショップの規模も大きくなり、登録商品数は増加傾向にあります。 リニューアル前は登録商品数が多くても100件程度を想定して無限スクロールを採用していました。しかし、登録商品数が100件を超えるショップが多くなり、無限スクロールでは、全体数の把握のしにくさや該当商品へのたどり着きにくさ、商品編集後のページ保持が困難であることなど、不便な状況が多くなってきました。この問題を解決するため、今回のリニューアルではページャーを採用しました。
次に、商品の並び替えについてです。 リニューアル前は、リストの一番上にある商品を一番下に移動する場合、ドラッグで並び替える方法しかなく、商品数が多いショップの場合、複数回のドラッグ操作が必要でした。そのため、数値を入力して並び替えができる機能を追加し、移動距離の多い並び替えを簡単にできるようにしました。
フィードバックの例
ページャーと並び替え機能をリニューアルしたことで、実際にユーザーから頂いたフィードバックの例としては下記のようなものがありました。
- 「並び替えを終了する」ボタンがページの一番下まで行かないと押せないのがめんどくさい
- 20個区切りでページが分かれてるのが大変、せめて100個とか選べるようにしてほしい
- ドラッグで並び替えたいのに移動先が次のページになってしまって移動できなくなった
- 数値で並び替えができるけど、毎回移動先の順番を確認するためにページを行ったり来たりするのが大変
- ページごとに区切られたせいで全体の並びが確認できず使いにくい
- 前の管理画面に戻してほしい（せめてページ分けではなく無限スクロールにしてほしい）
フィードバックを元にどう改善していくか
これらのフィードバックを受けて、旧デザインの商品管理に戻すという判断はしませんでした。次世代管理画面プロジェクトは「これからの5年を支える」という目的で進めてきたので、ユーザーの声から新デザインの問題点を整理して、旧デザインのよかったところを新デザインに追加していくことで、前に進みながらUI/UXを改善していく方針をとりました。
まず、並び替え機能に関しては、小さな改善を段階的にリリースをすることで、すばやく改善をすることにしました。はじめに、1ページあたりの商品数を増やし、「並び替えを終了する」ボタンを見直しました。
また、特に要望の多かった「ドラッグで並び替えたいのに移動先が次のページになってしまって移動できない」という問題は、並び替え機能とページャーの両方に関係しています。そのため、プロダクトマネージャーやエンジニアと一緒に議論し、まずはPC側の開発を優先して素早いリリースを目指しました。
PC並び替え機能リニューアルリリース
ユーザーさんから頂いたフィードバックを元に以下の改善を加えました。
- 並び替え専用ページを作成
- 商品管理ページはページャーのまま、並び替え専用ページは無限スクロールを採用
- 並び替え終了ボタンを下の方に配置しセンター表示にすることで見慣れたレイアウトに変更
- また、画面下部に固定配置させることでボタンのコンポーネントを変更させずに目立たせた
- 1ページあたりの表示商品数を増やせるグリッド表示の切り替えを追加
- 表示切り替えを追加したのでドラッグで並び替えと数値で並び替えを1画面内でできるように変更
- 並び替え専用のページを作成しページ遷移をさせることで不要な情報はすべて非表示に
まとめ
長年使われてきたデザインをリニューアルすると、使い慣れたユーザーからはネガティブなフィードバックがくることがあります。その際に、旧デザインに戻すのではなく、フィードバックと旧デザインを元に、新デザインをより使いやすく改善していくことが重要です。 その場合、新デザインの改善は細かくリリースして、なるべく早くユーザーに価値を届けていくことが大切だと感じました。
「次世代管理画面プロジェクト」では、これからもユーザーの声を聞きながら「これからの5年を支える管理画面」を目指して開発を進めて行きます。今後はユーザーインタビューやユーザーテストの実施なども予定しています。
最後に、BASEではUXデザイナーを募集しています。 この記事を読んで興味が出たという方は以下よりご連絡ください。
