web-dev-qa-db-ja.com

同じページの異なるセクションの2つの別々の「保存」ボタンをどのように処理しますか?

Basecampのこの特定のページで、2つの異なるセクションへの変更を保存するための2つの異なるボタンがあることに気付きました。 1つのセクションはスクロールせずに見える範囲にあり、明らかに「変更を保存」ボタンがあります。 2番目のセクションはスクロールせずに見える範囲に達しており、下部に「プロジェクトアクセスを更新する」ためのボタンがあります。ただし、最初のボタンは両方のセクションで機能するように見えます。特に、2番目のボタンがあることに気付いていない場合は、.

つまり、このページのより良いアプローチは何でしょうか?メインナビゲーションに既に2つのタブセットが含まれている場合、サブページをユーザーにとって意味のあるセクションに分割するにはどうすればよいですか?
(データベースの異なる部分を使用するため、各セクションは別々に動作する必要があると仮定します。)

Basecamp edit user page

9
Taj Moore

これらの大規模なインターフェースは、今日のテクノロジーが機能する大きなチャンスであると考えています。

1)ページのどこにも保存ボタンはありません。サーバーに更新コマンドを送信するためのjQueryによるajax呼び出しを通じて、すべての情報を簡単に保存できます。

2)各ボックスの最後に小さな回転アイコンを表示して、変更が行われていることを示すことができます

3)ページの最後にある[完了]または[完了]ボタンで終了します。

本当に長いサイドバーに取り組むために、もう一度jQueryを使用して、トップレベルをクリックすると、セカンダリレベルが表示されます。

4
James Wilkinson

理想的には、これが起こらないように再設計してください。

ユーザーが入力しなくても、自動保存できるだけのことはありますか。彼らは本当に同じ画面にいる必要がありますか?
これを、彼らがする必要があることを案内するいくつかの画面に変えてもらえますか?

私ができる最善の方法は、どのコンテンツがどの保存ボタンとペアになっているのかを視覚的に示すことです。

また、UIのどのチャンクに変更が保存されておらず、保存する必要があるかを示すことも重要です。

2
Mark

興味深い、提案:

  • ユーザーが[変更を保存]ボタンをクリックし、ユーザーがそれをクリックすると、ページが右下の参照セクションに移動した後、(プロジェクトアクセスを更新するために)ラベルとボタンの色を変更することをお勧めします。
1
Shobhit

1つの解決策は、上部に保存ボタンを配置することです。ボタンを複製することは、技術的にはそれほど問題ではありません。ページが大きくなる可能性がある場合、これは理にかなっています。実際に小さい場合でも、2つのボタンがあっても問題ありません。

これをさらに進めると、リストの下部がオープンエンドであることを考えると、全体として上部にプロセスボタンを配置する方がより良いオプションになります。

もう1つの方法は、変更された領域に色を付け、保存されたときに色を変更することです。これは非常に慎重に行わなければなりません。

1

問題手元にあります:

プロジェクトの数がわからない場合、右側のサイドバーの高さをどのように含めることができますか?

ソリューション1

プロジェクトのタイトルに展開/折りたたみボタンを追加して、サブセクションを表示/非表示にします。ただし、この方法でも、プロジェクトリストはUpdate project accessボタンを非表示にする範囲より大きくなる可能性があります。

ソリューション2

ユーザーがアクセスできるプロジェクトをリストし、別の専用ページで編集権限を提供します。権限の編集へのリンクはUser has access to...の横にある必要があります。これにより、アプリケーションビューに別のページが追加されますが、どのコントロールがどの要素に関連しているかのあいまいさがすべてなくなります。

0
dnbrv

検閲された画面を正しく理解していれば、メインセクションでユーザーの詳細を編集できますが、longと右側の狭いセクションでユーザーの権限/役割/アクセスを編集できます。

  1. 特に同じページにあるため、それぞれに独自の保存があることは、私には直観に反しているように見えます(異なるタブでも同じページとしてカウントされます)。

  2. 入力が長い場合は、自動保存inputを実行する必要がありますが、保存の影響が大幅であるか元に戻せない場合は、ユーザーがボタンを押すまで「変更を適用」しないでください。 2つのセクションが別々のデータベースを更新するからといって、2つの保存を別々のユーザーアクションによって開始する必要があるとは限りません。

  3. long右側のセクションが狭いため、見栄えが悪い。代わりに、表示フィルター(数文字を入力してフィールドを減らす)とページング(ページごとに20の権利など)を使用して、このためのタブを使用します。

  4. リージョンとタブへの分割は直感的ではないようです... 4つの異なるメニューがあります。

    a。 Launchpad、ベースキャンププロジェクト

    b。私の情報、ログアウト、ヘルプ

    c。ダッシュボード、TODO、カレンダー、時間

    d。すべての人、検索、テンプレート、設定

(a)の意味がわからないので無視します。

(b)どこでも問題ないようです。ページの左上隅からログイン/サインインにアクセスすることに慣れています。

(c)と(d)はどうにか結ばれるべきだと思います。両者の関係は不明確なので、詳しくはお話しできません。

0
Danny Varod

私はオプションが次のいずれかを持つことになると想像します:

  1. 自動保存+ 1つの保存ボタンでページ全体を管理します。
  2. 1つの保存ボタンでページ全体を管理

これら2つを決定するには、ユーザビリティテスト/ワークフロー分析/アプリの一般的な動作方法に関するさらなる知識が必要だと私は考えています。実際の理由は、ページ全体が1つの保存ボタンに従わないといういくつかのbs技術的な理由に他なりません。サイト全体の他のすべてが自動保存される場合は、自動保存を追加しますが、1つの保存ボタンは保持します(テキストフィールドでは、ダニエルニューマンが別の回答へのコメントで指摘しているため、確信が持てないため)。

保存ボタンは、スクロールせずに見える範囲の上にある必要があります。そうでなければ、気付かれない危険があります。

0
Illotus