Webアプリでの変更の破棄/動作のキャンセル

Question

マルチタスクを可能にするWebアプリがあります。ユーザーがページ上にいて変更を加えた場合、別のページに移動すると、前のページがタスクのリストに追加されます。その後、そのページに再度アクセスして、変更と保存を続けることができます。

したがって、ユーザーが変更を加えた後、変更を望まない場合は、「変更を破棄」機能を使用して、行った変更を取り除く必要があります。

私の場合、これらはそのようなページの特徴です：

Discard changesボタンをクリックしても、ページは初期状態にリセットされるだけで、古いWebサイトのフォームのResetボタンのように動作します。
Discard changesボタンをクリックしても、ユーザーは別のページに移動しません。ユーザーをナビゲートできる論理ページはありません。
discard changesをクリックすると、ユーザーがすべての変更を破棄しようとしていることを確認するモーダルが表示されます。
私は基本的にアクションについて Luke Wroblewskiのガイドラインに従っています：

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

懸念事項：

変更されていないページでdiscard changesをクリックしても何も起こりません。 Discard changesアクションを非表示にし、ページの操作要素が変更されたときにのみ表示する必要がありますか？そうでない場合は、リンクを無効にできますが、ページが変更されるまでリンクが機能しないことを伝える方法は何ですか？
discard changesは、Luke Wroblewskiの記事に従ってリンクとしてスタイル設定されています。これは、別のページに移動することを期待している可能性のあるユーザーを混乱させますか？

Izhaki · Accepted Answer

質問に直接回答するには：

ユーザーは、アクションが許可された場合に何かが起こることを期待します。または、システムが誤動作していると結論することがあります（「このボタンを押しても何も起こらない」）。アクションの結果が変化しない場合は、そのトリガーを無効にするか、「破棄するものはありません」という行に沿ったメッセージを表示する必要があります（おそらくボタンの下のdivをフェードインします）。
リンクではないものにリンクスタイルを表示しないことを強くお勧めします。ユーザーの観点からすると、非常に混乱します。視覚的な区別はさまざまな方法で実現できます。これはルークの記事には記載されていませんが、次のことを検討してください。
- アイコンプライマリアクションボタン。アイコンは目を引く傾向があります。
- ボールダーテキスト主ボタンの色。 2つの異なるボタンの色（緑/灰色、緑/青）は、ユーザーを混乱させる可能性があります。これがアクションの場合、ボタンの色は一貫している方がよいでしょう。テキストの色はそれほど混乱していませんが、効果的です。また、主ボタンのテキストを太字にすることもできます。
- 大きなボタン長さ主ボタン用。

An Image showing various options to denote primary and secondary button actions

AndroidHustle · Answer

私はあなたのモックアップとその言い回しから、ある時点でユーザーがどこかからアイテムを選択し、「アイテムを編集」するためのアクティブな選択をしたに違いないと思います。それがこの見方の始まりですか？

その場合、ユーザーが[保存]をクリックするか破棄を確認するときにフローを処理する従来の方法は、編集を開始した最初のビューにリンクを戻すことです。

このコンテキストがアプリケーションのこの部分のレイアウトと同じように聞こえる場合は、「変更を破棄」を「キャンセル」に変更します。これにより、アプリケーションはユーザーが変更を行ったことを意味しないため、混乱が発生しません。制御はユビキタスに有効です。

このアプローチは、実際にはどこにもリンクされていないリンクをユーザーが混乱させるかどうかという問題も解決します。

キャンセルするときにユーザーをリンクする論理ページがないとおっしゃっていますが、どうすればいいのかわかりません。編集を開始した場所にユーザーをリンクできるようにする必要があります。番号？

Michael Zuschlag · Answer

コントロールがナビゲートせずに値をリセットする場合、おそらくリセットが最良のラベルです。一般に、リセットはナビゲートしないと理解されています。
それでも、リセット/破棄のリンクではなくボタンを使用します。 Izhakiによる提案など、ボタンをあまり強調しない方法を見つけます。
リセットするものがない場合は、リセット/破棄コントロールを無効にする必要があります。非表示とは異なり、無効にすると、ユーザーはアクションを使用できるようになります。これは、取り消せないほど混乱を招くのを恐れているため、そうでない場合にユーザーが編集することを奨励する場合があります。無効にする機能は、標準の「無効なリンク」の外観がないため、リンクではなくボタンの外観を使用するもう1つの理由です。無効化と非表示の詳細については、「コントロールの制御」を参照してください。
ユーザーがリセット/破棄を実行した後、コントロールを変更して、ユーザーが破棄した変更を回復することを検討してください（つまり、破棄を元に戻します）。これにより、確認メッセージが不要になります。ユーザーは、古い設定と新しい設定を動的に比較するのにも便利です。セッション間で以前の設定を保存する場合、リセットボタンを無効にする必要はありません（リセットする値のタイムスタンプを含めることができます）。
ユーザーが選択した一連の編集を取り消すことができるように、リセットではなく元に戻す/やり直し機能を検討してください。ユーザーが破棄で離れて移動しないということは、ユーザーがページに対して広範囲にわたる長期にわたる編集を行うことを期待していることを意味します（たとえば、破棄した後、あきらめて離れるのではなく、編集を続行します）。元に戻すのは、ユーザーが最後の3つの変更を元に戻したいが、前の12の変更は元に戻したくない場合に適しています。
グラフィックデザインが保存とリセットの範囲を正しく伝えていることを確認してください。ワイヤーフレームからは、[保存]が表示されているフィールドのみを保存するのか、それとも他のビューへの変更を保存するのかわかりません。フィールドのボックスに限定されている場合は、フィールドのボックスに[保存/リセット]を配置します。それ以外の場合は、左側のリンクの下に配置します。
ユーザーが保存または破棄せずにこのページから移動するとどうなりますか？最初に保存するか破棄するかをユーザーに選択させるメッセージを表示しますか？ユーザーが最初に保存するか破棄するかを決定するために別のページで何かをチェックする必要がある場合はどうなりますか？このアプリにあなたが示唆するような広範囲な編集が含まれる場合、Webスタイルの複数ページのUIではなく、デスクトップスタイルの複数ウィンドウのUIを使用することをお勧めします。ページをめくるを参照してください。別のオプションは、各フィールドの変更を自動的に保存することです。保存ボタンは不要になり、元に戻す/リセットはロールバック機能に似ています。