web-dev-qa-db-ja.com

保存/キャンセルアクションをアコーディオンで表示する方法

私はセットアップフローを設計している最中です。アコーディオンパラダイムを採用することにしました(手順が多いため、タブを使用するとモバイルデバイスでタブがオーバーフローします)。セットアップフローに入ると、最初のステップが開いた状態でユーザーが表示されます。

ただし、ユーザーに加えた変更を保存または破棄するアクションをユーザーに提示する方法はわかりません。

  • オプションの1つは、アコーディオンを開く「編集」ボタンを再利用し、それを保存ボタンに変形することです。

  • もう1つの方法はもう少し簡単で、展開したアイテム内に保存とキャンセルのボタンを配置するだけです。

代替案のいずれかを採用することの利点/欠点はありますか?これを行う他の方法はありますか?

enter image description here

2
Mumas

私にとって、あなたのやり取りはモバイルには多すぎます:多くのステップとアクション。また、アクションを保存すると、システムからユーザーに責任が移ります。これにより、相互作用がより複雑で、網羅的で、誤りやすくなります。

私の提案は:

  • 自動保存を使用データを保存します。これが、最新のアプリの動作方法です。
  • 変更されたアコーディオンアイテムを表示するナビゲーションを改善するため。アコーディオンパターンはアイテムへのランダムアクセスを提供し、ユーザーは自分自身を失う可能性があり、操作は中断されます。
  • 変更を破棄する機能を使用古い値に戻す必要がある場合は、保存ではなく==。
  • ラベルを左側に配置してください垂直方向のサイズを縮小します。
  • [編集]ボタンを使用しないでくださいアコーディオンアイテムのコンテンツは非表示になっているため、ユーザーが編集する必要があるかどうかはわかりません。代わりに彼はそれを開き、決定を下します。

enter image description here

[〜#〜]更新[〜#〜]
私は保存と破棄を二分法として扱います。そのため、破棄と自動保存を使用すると、対話におけるユーザーのアクションを最小限に抑えることができます。私が意味したことを描きました:

enter image description here

3

ユーザーが1つのボタンに集中できるようにしたい場合は、それを行う方法があると思います。以下のように、編集をクリックするとボタンが「キャンセル」に変わります。入力を保存しない場合は、[キャンセル]をクリックできます。しかし、保存したい場合は、保存ボタンがコンテンツの真下にあります(クリックすると、アイテムが描画され、次に開きます)。情報の入力を完了しても、見逃すことはありません。 2つの状況では、1つのボタンに集中するだけで済みます。

enter image description here

4
user48693

保存、キャンセル、編集ボタンを一緒にしておくことを選択します。何が保存され、何が保存されないかを追跡するために、保存されていない閉じたアイテムの保存ボタンを表示したままにすることができます。私の例では、編集ボタンが再利用されていますが、キャンセルボタンに変更されています。

enter image description here

アイテムのタイトルが長くなりすぎない場合は、3つのボタンすべてを表示できます。

enter image description here


別のアイデアとして、ユーザーが一度に1つのタスクに集中できるようにしたい場合は、アイテムの編集中に編集ボタンを非表示にすることもできます。アイテムが保存された後に名前をキャンセルして閉じるように変更できます。

enter image description here

次に、キャンセル/閉じるボタンでアイテムが閉じ、編集ボタンがすべてのアイテムに表示されます。

enter image description here

1
jazZRo

私は現在この問題に取り組んでおり、いくつかの考えの後で、タイトルバーにあるか、アコーディオン内にあるかに関係なく編集ボタンは不要な操作であるという結論に達しました。ユーザーがタイトルバーをクリックしてアコーディオンを開くと、内部で非表示になっているコンテンツを編集するつもりでクリックしていると想定できるため、開いているアコーディオンは常に「編集モード」である必要があります。

保存オプションとキャンセルオプションは常に一緒に機能します。ユーザーがページを探し回って適切なアクションをとらなければならないため、それらを分割することは決して良い習慣ではありません。

アコーディオンのopen = editのパラダイムを使用すると、アコーディオン内で最初から保存/キャンセルアクションを表示できますが、無効にできます。アクションが実行されると、アクティブになります。ユーザーが値を編集したアコーディオンを閉じることを許可すると、「未保存の変更」と同様のラベルがタイトルバーに表示される可能性があります。彼らがページから移動しようとした場合、不完全なフォームのアラートを点滅させることができます。

アクションがない場合、アコーディオンを閉じると、すべてが元の状態に戻ります。このアプローチの注意点は、「編集モード」と「要約モード」を組み合わせていることです。これは、コンテンツによっては実用的でない場合があります。

0
Jacob Farny