こんにちは。
inglowの開発担当です。

今回は、2020/04/01（水）にリリースした、新顧客一覧UIについて、
何をどう改善したのか書いていこうと思います。

以前の顧客一覧

制作当時は、なるべく情報を少なく、一画面にたくさんの件数が表示されるようにとの意図で、１つのデータにつき一行のUIを制作しました。
しかし、機能がどんどん増えて、一覧に表示したいものも増えてしまったため、雑多な感じになってしまい、各情報がわかりづらくなってしまいました。
画像の番号の順に詳しく書いていきます。

【ポイント１】チェックボックスが小さい

操作用のチェックボックスが小さいため押しづらい。
一行で表示されるのであれば、縦に並ぶ形になるので、チェックボックスの存在がわかるのですが
一行が長くなっているためチェックボックスの存在がわかりづらくなっています。
また、チェック状態も一目ではわかりません。

【ポイント２】社名が折り返し表示になる

会社名が長くなった時に、折り返して表示されるため社名が読みづらくなってしまっています。

【ポイント３】架電状況の表示が小さい

架電状態のアイコンが、他の「資料請求」等のアイコンと並んでいますが、毎日切り替わる内容のため、ぱっとみでわかる必要があります。
また、最新の架電者や架電時間も、アイコンにカーソルを当てないとわからない状態です。

【ポイント４】行動履歴が見づらい

顧客の状態操作ボタンの名称が長いため、行動履歴の表示スペースが圧迫されてしまっています。
数文字で折り返しされてしまうので、行動履歴が長くなった時にとても読みづらくなってしまいます。

以上の点が以前より気になっていました。
これらの問題を解決するために、新しいUIを社内に提案し、採用されました！！

新しい顧客一覧

１つのデータを一行で表示することをやめ、１つのデータのブロック内で情報を整理し表示するようにしました。
画像の番号の順に詳しく書いていきます。

【ポイント１】チェックボックスが小さい　を解決

チェックボックスはアイコンで大きく表示し、また、チェックがついたときに、顧客の枠線が青い線になるようにしました。
チェックがついている顧客とついていない顧客が並んでも、一目でチェック状態がわかります。

【ポイント２】社名が折り返し表示になる　を解決

社名が最上部に表示されるようにし、また、幅いっぱいのスペースを設けてなるべく改行がなくなるようにしました。
この幅でも折り返してしまうほど長い社名がないことを祈り……

【ポイント３】架電状況の表示が小さい　を解決

日ごとに更新されるステータスなので、顧客の状態と同じ行ですが、架電状況だけ右寄せにしました。
また、架電した日や家電したアカウント名を表示するようにしました。

【ポイント４】行動履歴が見づらい　を解決

顧客の状態操作ボタンを下に移動し、メモの表示スペースが広くとれるようにしました。

【ポイント５】タグで絞り込むリンクを設定

当初、社内の提案時には考えていなかったのですが、デバッグしているときにあったら便利だなと思い、タグをリンクにして絞り込み表示ができるようにしました。

さいごに

スマリスは順次機能を追加していく予定です。
無料でもご利用いただけますので、もし興味をもっていただければ、フォームからご利用登録をお申込みください！！
最後まで読んでいただきありがとうございました。

▼スマリスを無料ではじめられる「FREEプラン」が登場！！