ゼスト Tech Blog

ゼストは「護りたい。その想いを護る。」をミッションに、在宅医療・介護業界向けのSaaSを開発しています。

複雑なスケジュールを解くUIデザインと心理学の話

こんにちは。株式会社ゼストでプロダクトデザインを担当している長沢です。

最近めっきり寒くなり、給湯器のお湯じゃないと食器が洗えない季節になりましたが、皆様いかがお過ごしでしょうか。 さて、今回は私が普段向き合っている『ZEST SCHEDULE』のデザインについて、少し違った切り口で考察してみたいと思います。

ZEST SCHEDULEが対象としている、在宅医療・介護業界におけるスケジュール調整は、非常に考慮すべき条件が多く、複雑な業務です。「Aさんは火木の午前中」「Bさんは入浴介助が必要」「移動時間は車で15分」「この利用者さんと相性がいいのはCさん」……こうした無数の条件をパズルのように組み合わせ、最適解を導き出す必要があります。

本記事では、このような情報量が極めて多い業務システムにおいて、いかにして現場の職員の方が直感的に操作できるUIを設計しているかについて、「心理学」や「行動経済学」の観点から振り返ってみたいと思います。

1. アナログとデジタルの架け橋になる「メンタルモデル」

SaaSのデザインをする際、私たちは「ユーザーが普段使っているツール(メンタルモデル)」を意識します。これはいわゆるヤコブの法則(ユーザーは他のサイトでの経験と同じように機能することを期待する)」に基づくアプローチです。

在宅医療・介護業界におけるスケジュール管理の手法は様々で、壁一面の巨大なホワイトボードやマグネットなど物理的な道具を使っている事業所様から、Googleカレンダーのようなデジタルツールを使っている事業所様まで幅広くいらっしゃいます。

この両方のユーザー層に適応するため、ゼストでは2つのアプローチを取り入れています。

  • 横型カレンダー:
    リリース当初から採用している形式です。これは「現場のホワイトボード」を意識しており、横軸に時間、縦軸にスタッフを配置しています。壁を見て行っていた業務を、そのまま画面の中に落とし込むことを意図しています。

  • 縦型カレンダー:
    こちらはGoogleカレンダーのようなUIを意識して作成しています。デジタルツールに慣れている層が、学習コストを抑えて操作できるように設計しました。

予定表(横型)
予定表(縦型)

車輪の再発明のような独自のUIを一方的に提供するのではなく、ユーザーがすでに持っている「慣れ(メンタルモデル)」にシステム側が合わせる。これが設計の出発点でした。

2. 認知負荷との戦い。「マジカルナンバー4」

スケジュール画面は、どうしても情報量が多くなりがちです。スタッフ数十人分の一週間の予定が並ぶと、画面は文字と色で埋め尽くされてしまいます。 そこで意識したのが「認知負荷の軽減」です。

直感的な操作のために

画面を閲覧した瞬間、脳が処理できる情報の塊(チャンク)は4つ程度と言われており、これには「マジカルナンバー4(短期記憶の限界)」や「ヒックの法則(選択肢が増えると意思決定に時間がかかる)」が関係しています。

そのため、色や選択肢を制限することで、「情報量に圧倒される」という第一印象の拒絶反応を防ぎ、直感的な情報のスキャンを可能にできると考えています。

具体的には、予定カードの配色は、サービスカテゴリ(訪看、リハビリなど)ごとに分類していますが、この色数を現在は4色にしています。

また、選択肢として提示するラジオボタンなども「最大3〜4つまで」というルールを設けています。それ以上の選択肢がある場合は、セレクトボックスを使用するような運用ルールにしました。

とはいえ、4色だけでは表現の幅が狭まってしまうため、ストライプ柄などを駆使してバリエーションを増やし、色数の少なさをカバーする工夫も取り入れています。

ストライプ柄の予定カード

なお、事業所ごとの運用に合わせて、権限を持つユーザーがこれらの設定をカスタマイズできる柔軟性もしっかりと確保しています。

サービスのカラー設定

3. 「必要な時だけ見せる」プログレッシブ・ディスクロージャー

情報量を減らすための工夫は「隠すこと」にもあります。

例えば、予定の「ロック機能」や「履歴確認」などの操作ボタン。これらを全てのカードに常時表示すると、画面上のノイズが増えてしまいます。 そこで、「マウスホバーした時だけ、ロック導線が表示される」という仕様にしました。

これはプログレッシブ・ディスクロージャー(段階的開示)」と呼ばれる手法です。 「今は見る必要がない情報」を隠し、ユーザーが関心を持った(カーソルを合わせた)瞬間にだけ提示する。これにより、メインタスクである「スケジュールの全体感の把握」を阻害しないように配慮しています。

4. エラーは「叱る」のではなく「導く」

スケジュール調整においてミスは避けられません。「移動時間が足りない」「資格要件が合わない」などのエラーをどう伝えるか。ここにはアフォーダンスとフィードバックの設計が重要になります。

ゼストでは、エラーがある予定カードの「縁(border)」に赤い枠が表示されるようにしています。 そして、そのカードをクリックすると、サイドバーの詳細画面に「なぜエラーなのか(例:移動時間が不足しています)」という内訳が表示される工夫をしました。

  1. 気付き:
    赤枠で注意喚起を行う
  2. アクション:
    詳細を開く
  3. 理解:
    サイドバーで理由を確認する

この流れを作ることで、ユーザーが迷わずに自己解決(エラーリカバリー)できるように誘導しています。

5. 入力の心理的ハードルを下げる感情デザイン

訪問等の記録入力(日報)は、移動中や業務の合間に行われることが多く、ユーザーにとって負担になりがちな作業です。 だからこそ、UIにおける「感情デザイン」を大切にしています。

  • 直感的なアイコン:
    文字を読む負荷を下げるため、イラストや大きめのアイコンを多用しています。

  • 「押せそう」なボタン:
    ボタンの角を丸くし、物理的なボタンのようなアフォーダンス(操作の誘導)を持たせています。

  • 表情アイコン:
    所感の入力などで、笑顔だけでなく困り顔などの顔文字アイコンを採用し、業務的な画面の中に親しみやすさを取り入れています。

地域連携活動記録

これらは単なる装飾ではなく、「美的ユーザビリティ効果(見た目が良いものは使いやすいと感じる)」を狙ったものです。ポジティブな感情は、入力作業の心理的ハードルを下げてくれると思います。

また、保存などのアクション後に画面右端にスナックバー(通知バー)を表示するのも、「処理が正常に完了したこと」を伝えるシステムからの即時フィードバックであり、ユーザーに安心感を与えるための重要な工夫です。

6. 待ち時間を短く感じさせる工夫

最後に、パフォーマンス(体感速度)についてです。 データを読み込んでいる間、真っ白な画面で待たされるとユーザーは不安になります。これを解消するために「スケルトンスクリーン」を導入しています。

読み込み中に、コンテンツの枠組み(グレーのボックスなど)を先に表示しておくことで、「現在画面を生成中である」と視覚的に伝えることができます。 これは「ドハティの閾値」に関連する考え方で、システムが0.4秒以内に反応を返すことでユーザーの集中力が維持されるというものですが、スケルトンスクリーンによって「体感的な待ち時間」を短縮し、ストレスを軽減できると考えています。

おわりに

私たちが開発しているプロダクトも、実際に使用するのは「人」です。 ロジカルな機能要件を満たすことは大前提ですが、そこから一歩踏み込んで、「人の認知特性」や「感情」に寄り添ったデザインをすることで、多忙な現場の方々の負担を少しでも減らしたいと考えています。

ゼストでは、OOUI(オブジェクト指向UI)の概念をベースにしつつ、今後もこうした心理学的なアプローチを検証し、プロダクトを磨いていけたらと思っています。