はじめに：保存できることと、安心して保存できることは違う
業務アプリケーションでは、データを「編集できる」こと以上に、
「安心して保存できる」ことが求められる場面が多くあります。
今回は、一覧形式でデータを編集・更新する業務画面の運用を通じて、
保存操作に対する不安がどのように顕在化し、
それを UI の工夫でどのように解消していったかを紹介します。
実装には Excel ライクな表編集ライブラリである Jspreadsheet を使用しています。
最初はセル内に保存ボタンを配置するシンプルな実装でしたが、
運用が進むにつれて「変更前後の差分を確認したい」という要望が出てきました。
その結果、差分確認モーダルを挟んでから DB に保存する仕組みを追加することになりました。
実運用で顕在化した課題：保存が怖いUIになっていた
機能としては問題なく動いていたものの、実運用が始まると次のような声が上がりました。
- 「意図しない変更が混じっていないか不安」
- 「保存前に一度確認できたら安心なのに」
これは不具合ではありませんが、
保存という操作に心理的な負担がかかっている状態でした。
ここで改めて感じたのは、
「編集できる UI」と「安心して保存できる UI」は別物である
ということです。
安全なデータ更新のための方針
この課題に対して、保存フローを次のように見直しました。
- セル内の保存ボタンを押す
- 変更前・変更後の差分を表示するモーダルを開く
- 内容を確認して OK なら DB 保存
- キャンセルなら何もしないで戻る
保存操作そのものは変えず、
保存前に「確認する時間」をUIとして用意することを方針としました。
なぜ差分確認をモーダルで行ったのか
理由は以下の通りです。
- 今操作している行の文脈を保てる
- 画面遷移せずに確認とキャンセルができる
- 「確認して戻る」という動線が自然
保存前の一時的な判断を求める場面では、
モーダルが最も負担の少ないUIだと判断しました。
差分を「確認しやすく」するための設計
変更前データの扱い
- API から取得した元データを基準にする
変更後データの扱い
- 保存ボタンを押した時点の行データを使用する
差分生成で意識したこと
差分をすべて機械的に表示すると、
かえって確認しづらくなってしまいます。
そのため、次の点を意識しました。
- 表示対象のカラムを限定する
- 空文字と null を同一視する
- 数値や日付は表示用にフォーマットする
- 変更があった項目のみを表示する
「差分を出すこと」よりも、
「人が判断しやすい差分にすること」を優先しました。
迷わず判断できる差分確認モーダルのUI
差分確認モーダルでは、次のような構成にしています。
- 変更があった項目のみを一覧表示
- Before / After を並べて表示
- アクションは「保存」「キャンセル」のみ
情報量を増やしすぎず、
ユーザーが迷わず判断できるUIを目指しました。
まとめ：実運用がUIを育てる
今回の改善を通じて、
- 運用が進むと「保存前に確認したい」というニーズが顕在化する
- UI 上で確認の機会を用意することで、心理的な不安を減らせる
- 安心して保存できることで、実際の運用もスムーズになる
と感じています。
業務アプリケーションでは、
作って終わりではなく、運用を通じて完成度が上がっていくものだと思います。
表編集に限らず、 データを更新するUIを設計する際の参考になれば幸いです。
コメント