見出し画像

【クラウドサイン】書類一覧を使いやすく、見やすく。

クラウドサイン デザイナーの福田です。
3/12にリリース予定の書類一覧の改修についてお知らせしつつ、デザインプロセスについてもご紹介していきます。


使いやすく : ステータスによる書類の絞り込み(管理書類)

フリープランは、ユーザー数1名のみでご利用いただけますが、スタンダードプランでは社内のユーザー数を無制限に追加してご利用いただけます。
この時、書類管理権限をもつ管理者は下に紐付くメンバーの送信済み書類を一元的に管理することが可能です。
(詳細 : クラウドサインヘルプセンター

という訳で、管理書類の画面では社内の書類がまとめて確認できるのですが、その分表示される書類の数は多くなり、いかに書類を探せるかが業務効率に影響します。

これまでもタイトルだけでなく様々な条件で検索をすることができたのですが、更に今回、ステータスによる絞り込みが可能となりました!

これまでの検索条件と組み合わせることで、より書類の活用がしやすくなるのではと思います。
(「インポート書類」というのは、クラウドサイン上にインポートした書類のことです。詳しくは、後述の「書類インポート機能をリリースします」をご確認ください。)


見やすく : 書類のステータス表示の改修

こちらはBefore&Afterをご覧いただくのが分かりやすいかと思います。

Before

After

とこのように新デザインになりました!
(ここでは管理書類一覧の画面のみ紹介していますが、管理画面ではない書類一覧にも新デザインが適用されます。)


さて、ここから先はなぜ改修することになったのかどんなことを考えたのかなどのデザイン面でのお話をご紹介できればと思います。


なぜ改修したのか?

今までのステータス表示では大きく2つの課題があると感じていました。

1. 書類のステータスを表すものが2箇所ある

1 - 「先方確認中」「締結済み」「 却下」などのバッジ表示
2 - プログレスバー(進捗状況を表したもの)

2箇所にあることで、視線を動かす範囲が大きくなってしまいます。

また、プログレスバーの見出しのところには「ステータス」と書かれているにも関わらず、実際はタイトルの前に表示されているというのも気になります。

2. バッジでの表示がバッティングをしている

バッジ自体は特別、役割を限定せずに使用しているコンポーネント(≒部品)なので、画面に応じて使われ方に幅があります。

しかし書類の一覧画面では、既にタイトルの下で「From」「To」というバッジが使用されています。よく見たら違う使い方をしてるのは分かりますが、同じ見た目のものが異なる用途に使われているのは望ましくありません。
また、ステータスと「From」のバッジの色が同じことで、何か関連性がある?という誤解にも繋がります。(本来はFromとToに関連があるにも関わらず)


デザイン3案とレビュー

この課題に対しデザインでアプローチしていくわけですが、今回はデザイナーチームへのレビューに出した3案をご紹介します。
(実際には、他のプロダクトではどんな表現をしているかを調査したり、ヒアリングをしたりと「ビジュアルを作っていく前段階」にも時間を割いているのですが、それはまた別の機会に……。)

A案:バッジ

進行中とそれ以外のものを同じバッジでの表現に統一。バッジ下側の青線で、進捗を表しています。
インポート書類はステータスが変わるものではない(クラウドサイン上で状況を取り扱うものではない)と考えて、何も表示しないことに。

B案:円形アイコン

こちらは円形のアイコンに統一を計ったもの。こちらも青線で進捗を表しています。
ちなみに円形での進捗表現は、circular progress bar と呼ばれているようです(Apple WatchのUIにありますよね)

C案:現行のプログレスバーを活用

現行のプログレスバーを活用しつつ、他のステータスには現行のバッジを拡張したものを使用しています。(むやみに新しいものを増やすと、ユーザーの混乱に繋がることも。そこで、既存のものを組み合わせて課題が解決できるかというのも試すようにしています。)

レビュー内容

この3つの案でデザイナーチームにレビューをお願いしたところ、こんなフィードバックをもらいました。

A案
- 「要確認」をボタンとして押せるような気がします。
- クリックしたときって、どういう動きですか?(←ボタンと勘違いしている)
- ステータス表示のバーがぱっと見で進捗の状態を表しているのか分かりにくい。

B案
- パッと見て、ステータスや進捗を認識できてよいと思います。
- A案に比べると「下書き」と「却下」にも差があるので見やすいです。
- もう少し数字の表記が小さくてもよさそう。

C案
- 「下書き」「締結済み」「却下」に差がないので、A案B案に比べると認識しづらく感じます。

その他
- 「インポート」だけステータス表示がないのは、少し心もとないなと感じました。「あれっ?この書類どうなってるんだっけ?」と思いそう。

現行のプログレスバーやバッジのスタイルも取り入れつつまとめられたのではと、私の中ではA案が一番よいと思っていました。が、フィードバックをもらって、ボタンに勘違いされてしまっている……。(おそらく矩形の中に広めに余白を取っているのもボタンに見える一因ではないかと。)
また、インポート書類だけアイコンが無いとなると表示の不具合のように誤解してしまいそうです。

改めて、自分でも見返してみてB案をもとにブラッシュアップを行うことにしました。


最終調整に向けて考えたこと

何回かレビューをしてもらいつつではありますが、最終調整に向けてはこのようなことを考えていました。

テキストがなくても認識してもらえるよう、アイコン(モチーフ、スタイル)をブラッシュアップする。一度覚えれば済む要素は省略してしまうように。そのフォローとして、アイコンの上にカーソルを持っていったときにツールチップを表示するようにしました。

また、テキストを省略し占有エリアが小さくなったことで、一番左側に移動させても邪魔になりません。これで視線の移動が少なく済むようになりました。

地味に時間がかかったのはインポート書類。アップロードやダウンロードのアイコンにも、モチーフとして矢印を使っていることから、当初は上・下向きの矢印は避け、他の意味を持たなそうな左向きにしていたのですがなんだか分からない……。(と言いつつ、左向きは戻るという意味を表すことが多いのですが。)

最終的には、矢印と四角の関係を調整することで「何かに入れる」ということを表し、下向きの矢印に落ち着きました。
また、アイコン全体の形を四角にすることで、
・丸アイコン→クラウドサインで送信した書類
・四角アイコン→クラウドサインにインポートした書類
と見比べられるようにしています。

最終デザイン


デザインレビューって何のため?

デザインレビューがブラッシュアップに繋がったと思っていますが、アウトプットの向上だけが目的なのか?考えてみました。

デザインレビューは説明したり、受けた質問へ答えることで、自分の考えを言語化するプロセスだとも思います。ここで言語化しておくと後々のブラッシュアップで迷ったとき、判断の指針となることが多いです。また、新たな案件に入ったときにも、考える力が強化されているはずです。

レビューをデザインに対しての評価と捉えてしまうと、批判になってしまったり、遠慮して何も伝えられなくなってしまったり……。私自身がレビューを依頼されたときも、レビューを通して相手の考えを引き出すという視点でやってみようと思います。


新機能 : 書類インポート機能をリリースします

上記の改修に加えて、 書類インポート機能がリリースされます。(こちらも3/12予定です。)

これは、クラウドサインで送信した書類だけでなく、スキャンした紙の書類なども一緒に管理できるようになるもの。クラウドサイン上で様々な書類を一元管理することができます。

インポートした書類は、契約締結日や部署名など様々な条件で検索することができるため、契約管理がかんたんに。「キャビネットにある膨大な書類から、該当する書類を探す……」そんな時間を削減し、業務効率化へと繋げます。

(クラウドサインへ書類をインポートするには、クラウドサイン SCANをご利用ください。)


「契約管理をかんたんに」

多くの方にご利用いただき累計契約締結件数は60万件(2019年3月時点)を超え、クラウドサイン上での書類の管理・活用の重要性がより増してきています。今回の書類一覧の改修や書類インポート機能も、「管理・活用」を向上させるためのアプローチです。

管理機能の充実となると(機能が増えることで)分かりづらさに繋がることもあるのですが、クラウドサインの特徴であるシンプルな操作感を損なわぬよう、「契約管理をかんたんに」へ対しても引き続きデザインしていきます!

この記事が気に入ったらサポートをしてみませんか?