こんにちは、たけだです。
自由診療クリニック向けSaaSの開発をしていて、フロントエンドエンジニアとして新機能の実装やUIのリニューアルなどを担当しています。
普段はUIの実装をすることが多いのですが、慣れや感覚で実装してしまう部分があり、相手への説明やレビューをする際にうまく言語化できないことが自分の課題だと感じています。
そのため下記を踏まえ、日頃から僕なりに気をつけている部分を言語化して共有できたらと思います！
現状と課題
- これまではメンバーが少なかったため、大きな問題はなかった。
- 今後組織が拡大していく中で、全員が同じ水準でUIの実装ができる状態を目指す必要がある。
- デザイナーさんがいないため（新規プロダクトやUIの大規模リニューアルを除き）基本的に自分で考えて実装する必要がある。
水準を揃えるための社内向けUIガイドラインはありますが、そこに書けていない細かい内容もあるので、これをちゃんと言語化してみます。
ユーザーの違和感を取り除く
僕が普段の開発で特に意識しているのは、「ユーザーに違和感を感じさせない」 ということです。
普段Webサービスを触っていると、使いやすいことが当たり前になっているため、少しでも違和感があると使いづらさを感じますし、時にはそれがストレスになることもあります（画面の読み込みが遅い、ボタンが押しづらいなど）
特にBtoBのプロダクトは、BtoCと比べ物にならない時間をユーザーと共有するので、小さな違和感の積み重ねが大きなストレスになってしまいます。
クリニックにとってミッションクリティカルなプロダクトを提供している以上、そういった違和感をできる限り減らし、ストレスのないプロダクトにしたいと思っています。
その中で特に意識していることは下記の5点です。
一般的なUIであること
直感的で分かりやすいUIが画期的なUIである必要はなく、身近にある一般的なUIに寄せることが大事だと思っています。馴染みのあるUIにすることで、ユーザーは直感的に操作でき、学習コストも低くなります。
レイアウトが揃っていること
具体的には、
- テキスト、カラー、ボタン、アイコンなどの並びやサイズが揃っていること
- 要素同士の余白が統一されていること
などです。
これができていないと、画面にまとまりの無い複雑な印象を与え、視認性の低下にも繋がると思います。
現在、フォントサイズやカラーについては共通のテーマを設定し、それを使用することで統一感を保っていますが、余白など細かい部分はまだまだ改善の余地があるので、これから対策していきます。
画面の構成や文言が統一されていること
プロダクトが大きくなるにつれて画面の数も増えていきますが、そうなると実装者によって個人差が生まれてしまいます。例えば、同じような機能なのに画面の構成が違っていたり、文言の表現がバラバラだったりなどがあります。
こういった問題があると、直感的に使えず、理解しづらいことからミスに繋がってしまいます。
そのため、
- 新規実装する際は、なるべく既存の画面に合わせる
- 既存の画面に問題がある場合は、新規実装に合わせて修正し、全体の統一感を保つ
- 文言も同じように統一し、特に表現は話し言葉ではなく書き言葉を使う
ということを意識しています。
UI崩れがないこと
これによる問題は、使いやすさや可読性の低下などこれまでの内容と被る点が多いのですが、個人的にUI崩れの多いプロダクトは品質が低い印象を与え、信頼性も低くなると思っています。
特に弊社のプロダクトは、タブレット、PC、モニターなど様々な画面サイズで使われるため、どのデバイスでも適切に表示される必要があります。そのため、画面サイズの変化にも柔軟に対応できるレスポンシブなUIを意識して実装しています。
前提を見直すこと
開発の工程において、実装前に仕様や設計についての話し合いをしています。そのため、機能を作り始める時点で、その機能の仕様や目的が明確になっています。
しかしこの前提があることで、自分にとっては使いやすいが、ユーザーにとって必要な情報が抜け落ちていたり、初見では使いづらい機能になってしまうことがあります。
もちろん慣れで解決する部分もありますが、先入観をなくし、初見のユーザーでも使いこなせるプロダクトにすることを意識しています。
まとめ
普段から何気なく意識していることを言語化することで、一つ一つは細かい内容ですが、その積み重ねが使いやすいプロダクトに繋がるのだと改めて気づきました。
まだまだ足りない部分もありますが、今の僕にできることを地道に続け、これからもユーザー視点を忘れずに開発していきたいと思いました！
そして今後増えていくメンバーにも、今の水準を浸透させられる仕組みを作れるように取り組んでいきたいです。
Discussion