シンプルでわかりやすいUIであり続けるために〜toB SaaS 1年目デザイナーの学びメモ〜

2022年12月15日 17:44

こんにちは！クラウドサインのプロダクトデザイナーyokogoshiです。気づけば入社から5ヶ月目ですが、日々フィードバックをもらいながら業務理解を進めています。

今回は学んだことのメモとして「シンプルでわかりやすいUIであり続けるために」をテーマでまとめていきたいと思います。

シンプルで"あり続ける"が難しい

クラウドサインは「ある程度でき上がってるプロダクトじゃないの？」と言われることもあるのですが（私も面接を受ける前はそう思ってました）、まだまだ紙に置き換わる新しい契約体験をつくるのに課題や作れてない機能がたくさんあります。

そのため常に新機能開発が複数のアジャイルで動いており、画面が複雑になってきています。しかし、画面が複雑になってもユーザーには複雑だと思わせず、シンプルなデザインにし続けることが私たちプロダクトデザイナーの使命です。

新人デザイナーの私は複雑と思わせないデザインをつくるのに覚えることがあったり苦戦することがありますが、そのポイントこそデザインチームの努力がつまっているところだと思うので挙げていきます。

特定のページでデザインしたものに対して、影響する他のページではどのように表示されるのかとフィードバックでよく指摘されます。同じオブジェクトが複数画面に表示される際に、それぞれ異なったデザインをしてしまうと情報量が増え複雑になってしまいます。

1人ですべての影響範囲を把握できるわけではないですが、デザインチーム内のレビューがあるのでできる限り考慮もれのないようにしています。特に複雑な仕様の場合などは、デザイナーチームの朝会が毎日あるためそこで共有・相談しています。

これがとても難しいです。データを扱っているため、UI stackなどさまざま状態が存在します。

ぱっと挙げられるだけでもたくさんあります。

・文字数や数値がoverflowする場合
・空の場合
・複数人が編集できる場合
・データアップロード中の挙動
・データの更新状態に関する各種ステータス
・エラーが出た場合
etc…

もちろんエンジニアの方と会話しながら考慮すべき状態を洗い出しますが、あらかじめ考慮できておくことで状態変化のしやすいデザインにできたり後から修正する手間を減らすこともできます。

また、ユーザが意図しない状態に陥った時にどれだけ解決に導けるかは使いやすさに直結するので、しっかりケアしていきたいポイントです。

クラウドサインにはデザインシステムがあるため、まず入社して初めて画面を触る時にデザインシステムを見比べてキャッチアップしました。

デザインシステムに登録されているコンポーネントを使って組み立てることで、一貫したスタイルでデザインできるので本当にありがたいです。また、それぞれのコンポーネントがどういったケースで使われるか決めてあることで状況に応じて適切なコンポーネントを使用することができます。

デザインシステムのルールは破ってはいけないものではなく、必要に応じてアップデートしていくことができます。ただ、新しいルールを検討する際には影響範囲や今後の使い方など慎重に検討しています。

デザインの仕方として考慮することは色々とありますが、もう少し抽象化されたフィードバックとして "優先度" という言葉をよく投げかけられます。

具体的には下記のような文脈です。

・どのようなユースケースで、どの程度使われるか
・〇〇(既存機能)と比べたときの優先度はどうか
・プロダクト運営側として、どの程度使って欲しい機能か

デザインパターンを出せば出すほど、その機能のことばかり点で考えてしまい全体を忘れがちになっていることに気付かされます。

つい機能を作るからには使ってもらえるように、わかりやすくしたい気持ちが湧いてしまいます。しかし一方で、新機能を必要以上に目立たせることによって既存機能がわかりづらくなるかもしれないという視点を持っておくべきだと気づきました。

機能はこれからも増えていく前提で、シンプルでわかりやすいUIであり続けるために優先度をつけてデザインの強弱や取捨選択をしていきたいと思います。

ここまで読んでいただきありがとうございます！toCプロダクトの1人デザイナーからtoB Saasかつデザインチームのある環境に転職し、日々たくさんのことを学んでいます。

このnoteで学んだことをまとめようと書き始めてから、書きたいことがありすぎて何度か分解してようやく書けました(笑) それでも少しテーマが大きくまとめるのに苦戦したので、今後はもう少し小さなテーマでまとめていければと思います！

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