web-dev-qa-db-ja.com

保存ボタンと送信ボタンの両方を備えたフォーム

私はいくつかのフォームで構成されるWebアプリケーションに取り組んでいます。各フォームは編集可能で、ユーザーはこれまでの作業を保存していつでも再開することができます。ただし、ユーザーが送信すると、ユーザーの応答は完了としてマークされ、編集を続行できなくなります。

現在、私はこれを「完了した応答を送信」および「保存して後で続行」というラベルの付いたフローティングボタンで表しています。送信ボタンはハイライト表示され、保存ボタンはアプリケーションの他のボタンと一致するように真っ白になっています。

ユーザーが2つの異なるボタンの目的を理解していないという報告を受けました。ボタンの使用を説明するオーバーレイをトリガーするヘルプリンクを下に追加しましたが、それがどれほど満足できるかわかりません(ヘルプテキストが3文しかない場合でも、ユーザーがヘルプテキストを読むのに苦労していることについてはあまり楽観的ではありません)長いです)。

他のいくつかのアイデア:

  • どういうわけかボタンにラベルを付け直します(ラベルを思い付くのに苦労しますが、そうは思いませんmore混乱します)
  • ボタンの位置を変更します(おそらく、送信ボタンが下部にあり、保存ボタンだけが浮いているはずですか?
  • ボタンのある種のホバーテキスト(これはあまり役に立たないと思います)

この種の機能について、一般に受け入れられている規則はありますか?同様の機能を持つ他のWebアプリケーション?私は検索しましたが、ほとんどの場合、ボタンに「保存」または「送信」のラベルを付けるかどうかについて多くの議論がありました。ボタンは異なるアクションを表すため、私の場合は明らかに問題ではありません。

クライアントは、保存と再開のオプションが強調表示されるように色を変更することを提案していますが、私のやり方では、「送信」を選択する人はほとんどいないでしょう。

2
Casey

私の提案は、保存ボタンの名前を変更として「下書きとして保存 "以下の例に示すように、送信されていないドラフトエントリを保存していることをユーザーに知らせるため

enter image description here

ボタンの配置については、送信\送信ボタンが下書きとして保存ボタンのすぐ隣にあり、ユーザーが誤ってクリックして完了せずに何かを送信する可能性があるため、上記の例の大ファンではありません。送信オプション。

以下に示すように、2つのボタンを分離することをお勧めします

mockup

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

したがって、アクションへの主な呼びかけと、アクションへの副次的な呼びかけがあり、ユーザーが必要に応じて送信オプションをすばやく見つけられるように、2番目の呼びかけがより際立っています。

4
Mervin