web-dev-qa-db-ja.com

保存されていない変更をWebフォームでユーザーに表示する

これについていくつかの調査を行いましたが、これまでのところ、ファイルとタブのガイダンスしか見つけることができません。

タブをWebアプリケーションで「保存されていない」ものとして表示

変更されたドキュメントを示すためにアスタリスクよりも良い文字はありますか?

しかし、私は自分の問題が違うと感じています。

これが私の設定ページの例です。ユーザーは3つの異なるファイルをアップロードできます。アップロードごとに、[アップロード]をクリックする必要があります。

enter image description here

ユーザーは、「現在を表示」をクリックして、保存する前にファイルのコンテンツを表示することもできます。

ユーザーが新しいファイルをアップロードしたが[送信]をクリックしなかった場合、送信する保留中の変更があることをユーザーに示したい

質問:これをユーザーに表示するにはどうすればよいですか?私の研究では、赤いアスタリスクを使用する必要があると述べていますが、Webフォームでは、これは通常必須フィールドを意味します。

これまでに私が選択したオプションは以下のとおりです。

enter image description here

2
Mr Giggles

ここでのワークフローは、直感的なものではありません。

表示および置換用のボタンを使用して既存のファイルを一覧表示してみてください

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

「表示」ボタンをクリックすると、表示/確認用のファイルが開き、「置換」ボタンをクリックすると、「アップロード」ダイアログが開き、新しいファイルの場所が取得されます

mockup

bmmlソースをダウンロード

置き換えられたファイルは、「未保存の変更」ではなく「新規」として表示される可能性があります。実際にはまだファイルがアップロードされていないため、ここに「元に戻す」ボタンを提供して、ユーザーが変更されたファイルをロールバックできるようにすることもできます。

mockup

bmmlソースをダウンロード

「送信」をクリックすると、選択した新しいファイルがコミットされ、既存のファイルが置き換えられます。

これは私には少し直感的に感じられ、間違ったファイルが置き換えられる可能性を減らすための健全性チェックのポイントがたくさん含まれています。

アップロードダイアログは、リストに新しいファイルを追加するためにも使用できます。

最後に、[送信]の横に[キャンセル]ボタンを含めることをお勧めします。これにより、誤ってそこに足を踏み入れたユーザーが、損傷を与えることなく安全に出かけることができます。

1
Andrew Martin

アスタリスクの表示は完全に意味を必須に変更します。そのため、いかなる場合でもそれを使用しないでください。この種のアプローチを採用するよりも、添付ファイルのようなものを試すことができます。 Saample of wireframe

----編集とアップロードのオプションは、ファイルにカーソルを合わせると表示されます。

1
uttham