web-dev-qa-db-ja.com

コンテンツ管理システムの「保存」ボタンの位置

コンテンツ管理システムフォームの「保存」ボタンの最適な位置はどこですか?

私は主にコンテンツベースのプロジェクトに取り組んでいます。私のシステムのユーザーは主にコンテンツを追加または編集します。このため、「保存」ボタンの位置が重要になります。

CMSはデスクトップコンピューターで使用されます。

「保存」ボタンの位置を選択するのに苦労しています。 2つのオプションがあります。

  • フォームの上に
  • フォームの下部

enter image description here

どちらにも長所と短所があります。フォームの長さのためにユーザーがスクロールする必要がある場合でも、上部のボタンは常に表示されます。欠点は、ユーザーがフォームの下部からボタンに注意を向ける必要があることです。

フォームの下部にあるボタンの利点は、フローが短いことです。欠点は、フォームが画面サイズよりも長い場合、ボタンが表示されないことです。以下のビジュアルを参照してください。

3番目のオプションは、画面の上部と下部の両方に2つのボタンを配置することです。

コンテンツ管理システムフォームの「保存」ボタンの最適な位置はどこですか?

フォームフローenter image description here

画面サイズより長いフォームenter image description here

3
Nick Groeneveld

常に下部に表示される固定フッターを使用します。フォームのワークフローは通常上から下にあり、保存ボタンはビジョン内の最後のアクションになるはずです。固定フッターを使用すると、フィールドを下にスクロールしなくても、フィールドを編集してフォームを保存できます。

enter image description here

6
jazZRo

@NGAFD-詳細を共有することはできませんが、こちらはミュートバージョンです。

ここでの考え方は、固定ヘッダー、固定左側、固定フッターがあることです。コンテンツ(中央領域)のみがスクロールします。したがって、ユーザーはページのどの時点でも保存できます。

いずれにせよ、オンデマンドでの保存は、より大きな技術プロジェクトでした。特にすぐに再設計を開始しているため、コストがメリットを上回りました。

管理プラットフォームであるため、ほとんどのページは表示/編集ハイブリッド状態です。そのため、いつでも保存できることが必要です。

この設定の唯一の欠点は、モーダルまたは他のレベルのUIからアイテムを追加するような複数のことを行っている場合、ユーザーが「追加」または「選択」をクリックして実際にページを保存することを考えて、保存を押すのを忘れることです。これに対処するために、「変更を保存していない...など」などのトーストメッセージを追加しました。

お役に立てれば!

App Example

3
Destructo

私はこのようなものを実装します:

mockup

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

スクロール中の位置は固定で、次のステートメントと一致します。

フォームの長さのためにユーザーがスクロールする必要がある場合でも

これでも:

フォームの下部にあるボタンの利点は、フローが短いことです。

あなたが言及したこの問題を修正します:

欠点は、フォームが画面サイズよりも長い場合、ボタンが表示されないことです。

2
Joao Carvalho

@NGAFD:下部のフローティング保存ボタンが優れたソリューションになるという上記の応答に同意します。また、フォームに自動保存機能があるかどうか知りたいと思いましたか?その場合は、表示されているビューポートの右上隅近くにある「フォームが保存されました」という定期的な通知を検討することをお勧めします。

2
Pallavi A