web-dev-qa-db-ja.com

リッチWebアプリでの「元に戻す」に最適なデザインですか？

ユーザーがリッチなWebアプリケーションでアクションを「元に戻す」ことができるようにするための最良のUIパターンは何でしょうか。

背景：
「戻るボタンを使用する」と言う前に、この記事を読んでください。「戻る」が「元に戻す」ではない理由をまとめたすばらしい記事です。

さようなら戻るボタン：リッチWebアプリ、[元に戻す]の必要性、[戻る]ボタンの目的とその目的を再考する -必ずお読みください。

これは、元に戻すと戻るの違いを私が見る方法です：

  • 戻る：ナビゲーションの復帰に関するすべて。つまり、コンテンツ/ページを介した動きの追跡
  • 元に戻す：元に戻すは、ユーザーがコンテンツの実際の状態への変更を元に戻すために使用されます。たとえば、オブジェクトの削除/移動/コピー/編集を元に戻します。
  • どちらにも含まれません：アプリの「表示モード」への変更は簡単に回復できるため、元に戻す必要はありません。そのような例の1つは、ページのビューをリストからグリッドビューに変更したり、テーブルの種類を昇順から降順に変更したりすることです。また、オブジェクトの状態を変更しないオブジェクトに対するアクションは、オブジェクトの共有、オブジェクトのエクスポートなど、取り消しスタックに含めるべきではありません。


'Undo' UIパターン：
Webブラウザーには最初から[戻る]ボタンがありましたが、残念ながら現在は[元に戻す]ボタンを提供していません。これは、「取り消し」がアプリのUI自体から利用できる必要があることを意味します。

参考までに、以下の提案ではこれを参照しています 質問 。私が見た最も一般的な2つのパターンは次のとおりです。

----- Googleのシングルアクションundo

enter image description here

  • 長所：メッセージは、行動に基づいて非常に状況に応じたものにすることができます
  • pro：元に戻すアクションは、関連する場合にのみ表示され、役立つまで不要なスペースを占有しません。
  • con：元に戻すことができるのは1回だけです
  • con：オーバーレイパターンが基になるUI（ボタン、リンクなどを非表示にする）と競合する可能性がある


-----インコンテキストundo

enter image description here

  • pro：削除されたアイテムは、元のアイテムの元に戻すコマンドで置き換えられ、ユーザーのコンテキストはそのまま維持されます。
  • con：アニメーションを表示する必要があります
  • con：アクションを受け取ったオブジェクトが画面に残っている状況でのみ役立ちます（受信トレイリストから完全に削除された削除済みメールでは機能しません）

----- Googleドキュメントundo

enter image description here

  • 開いているドキュメント内で、Googleはデスクトップアプリを模倣し、ツールバーの一部として[元に戻す/やり直し]ボタンを提供します
  • 特定のファイル以外では、Googleドライブは通常、Gmailと同じ[元に戻す]パターンを使用します（ファイルの削除/名前変更/移動に1ステップ前の取り消しを使用できます）


-----その他??
Webアプリでグローバルの元に戻すボタンがうまく機能するのを見たことはありません。また、モバイルで元に戻す機能の多くは見られません。他の提案/考え/アイデア??

navigationactionsundoback
7
M.A.X

解決策はデスクトップアプリがプロセスを元に戻す方法を確認するです。多くの場合、デスクトップソフトウェアは元に戻したりやり直したりします。

Word文書またはphotoshopファイルを開いて、いくつかの編集を行ったとします。任意の時点で、元に戻すまたはやり直し機能を使用して、編集を行ったときにアプリケーションが取得した一連のスナップショット状態を前後に移動できます。

ソフトウェアに応じて、スナップショットの元に戻すトリガーは、ツールの選択、編集の適用、入力、描画などのさまざまなアプリケーションイベントで発生します。スナップショットの頻度は、ソフトウェア自体に依存し、システムの電力やメモリなどにも依存します。

このプロセスは保存されたデータの状態とは無関係であることに注意することが重要です。この履歴の中を自由に動き回り、好きなように編集して、いつでもコンテンツの状態を保存することにします。 UIの状態をデータストレージに保存することを明示的に選択する必要があります。ソフトウェアは自動保存することもでき、クラッシュから回復することができます。そのクラッシュから回復したときに本当に良い場合は、元に戻す履歴があります。

確かにはわかりませんが、バージョン管理ソフトウェアの動作と同じように、コピー全体ではなく違いが記録されている可能性があります（VCSは元に戻すとやり直しも非常に得意です）。

あなたはこれを真似する必要があります。 JavaScriptを使用してページの状態のスナップショットを作成し、これらを（ローカルまたはリモートで）自動保存して、ユーザーが元に戻す履歴取得状態で移動し、すべてをアプリ内の予期されるキーとボタンにバインドして、確実な「保存」を提供できます。データを永続的に更新する関数。この最後のものは、ページを閉じるときに警告をトリガーするようなものです（デスクトップアプリなど）。

また、履歴APIを使用して、戻るボタン機能をより詳細に制御し、AJAX更新などにより、よりきめ細かく戻ることができます。

Googleドキュメントをご覧ください。ウェブドキュメントに元に戻す、やり直し、保存、自動保存を実装しています。彼らは基本的にデスクトップモデルに従います。

2
Toni Leigh