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