追加、編集、削除エクスペリエンスのUIの問題

Question

UXに関する最初の質問です。詳細を追加する必要があるかどうかをお知らせください。

ユーザーが予算の詳細を追加し、後でそれらの詳細を編集できる予算モジュールがあります。

予算追加ページ

したがって、このフォームはシンプルです。ユーザーは基本的な詳細を入力し、ファイルをアップロードしてから、会計年度と関連する価格設定年度を選択できます。その後、製品を追加し、すべての月（つまり、1月から12月）の数量/レートなどの詳細を入力できます。

ユーザーエクスペリエンスに従って、このフォームは問題を引き起こしていません。

予算編集ページ

今問題は上記の形にあります。 3つの側面があります。

1）ユーザーは、新しい会計年度と関連する価格設定年、および関連する予算の詳細を追加できます。

このユーザーのために保存ボタンをクリックする必要があります
新しく追加された製品または新しく追加された会計年度と関連データが保存されます。

2）ユーザーは、すでに追加されている製品の詳細を編集できます。

製品を編集するには、「更新」ボタンをクリックします。これによりフォームが開き、ユーザーはそのポップアップで製品の詳細を編集できます。ポップアップには、クリックすると独自の「保存」ボタンがあり、DAAをDBに直接格納します（ajaxを使用）。（フォームレベルにある[保存]ボタンをクリックする必要はありません）

3）会計年度ボックス全体を直接削除できます。

編集と同様に、削除アイコンをクリックすると、データはajaxリクエストを使用してDBから直接削除されます。（つまり、削除をクリックすると、このアクションが元に戻せないことの確認を求められます。）

現在、一部のユーザーはこのフォームを使用することが困難です。つまり、製品を追加していて、DBに保存されていると考えていました。ただし、「保存」ボタンをクリックした場合にのみ、DBに保存されます。

だから問題は、編集/削除の場合は「保存」ボタンをクリックする必要がないことをどのように視覚的に示すことができるかです。しかし、新製品や新会計年度を追加する場合は、[保存]ボタンをクリックする必要がありますか？

virtualnobi · Answer

これは簡単に解決できません。最初に、一般的な発言、次にあなたのケースのためのいくつかのアイデア。

「製品を追加」（これは文法的であるはずですが、「製品を追加」または「製品を追加」）がなぜコンテンツを保存する必要があるパネルを追加するのかと不思議に思っていますが、「更新」は独自の保存ボタン。私は同じように作成と編集を設計することを好みますが、作成は空のフォームから始まり、編集はフィールド/テーブルの既存の値を示します。

[保存]ボタンは、ユーザーが変更を終えたときの場所から非常に離れています。つまり、基本的に画面の両端です。これは、ユーザーが保存することを覚えるのを難しくします。保存とキャンセルを右下に移動すると、状況が改善される可能性があります（ただし、保存の現在の位置を学習したすべての人が混乱するでしょう:-(
ポップアップに入力されたデータがすぐに保存されるのは少し奇妙です。私は通常「適用」または「OK」をポップアップに配置しており、通常の「保存」ボタンを押す必要があります。同じことがアイテムの削除にも当てはまります（おそらく、削除の結果が劇的な結果であるかどうかの確認も含まれます）。
ユーザーが保存せずにどこかに移動した場合、データ損失の確認があると思います。

DocSalvager · Answer

いくつかの考え...

元DBAとして、データベースから実際には何も削除しないように十分に検討してください。人々はミスをしたり、間違ったボタンを押したり、上司に考えを変えてもらいます。代わりに、ユーザーがボタンを押してアイテムを削除すると、データベースレコードにDeleted-Dateフィールドが設定されます。これにより、「削除」の完了時に[削除]ボタンの横に表示される[元に戻す]ボタンを使用して、制限された[元に戻す]機能も利用できます。次に、バッチジョブが定期的に実行され、古い削除がアーカイブテーブルに移動されます。 [削除]ボタンは、削除されるすべてを説明する確認を即座にポップアップする必要もあります（たとえば、最後のアイテムとすべてのアイテムおよびサブアイテムのみ）。
「一貫性」は、すべてのプログラミング、特にUXにおけるウォッチワードです。保存、削除、更新などのアクションボタンは、すべてのフォームで同じ相対位置に表示する必要があります。ほとんどの場合、これは右下です。そのため、そこに配置しない場合は非常に正当な理由があります。美学はおそらくあなたを幸せにしますが、ユーザーはできるだけ早く簡単に自分のタスクを達成したいと思っていることを覚えておいてください。必要とされる考えが少ないほど、良いです。したがって、最初のフォームを後続のフォームでどのように使用するかについての知識を再利用しながら、それらを明確に区別しながら、タスクを正しく完了したことをユーザーに確信させます。
各フォームの右上にある赤いXは、フォームを閉じます...ピリオド。データベースには影響しません。これを行うことは、ウィンドウ（各フォームが機能する）の動作と一致しません。多くの場合、人々は何かを変更するつもりがなく、たとえば更新フォームの詳細を表示します。 [更新]フォームを使用して詳細を表示することで、入力したときと同じようにすべてが表示されます。そのフォームのデータに変更が加えられている場合、Xの閉じるボタンを押すと、[変更を保存しますか？」ダイアログ。
また、各予算詳細項目を1行にするのではなく、複数行にすることを強く検討してください。水平スクロールは大きなアンチパターンになりました。