web-dev-qa-db-ja.com

ボタンバー:基準と位置

私と私のチームは、メインアプリケーションのUIの詳細について(再)考えています。

これは、Windowsプラットフォーム用の「従来の」デスクトップアプリケーションです。これはビジネスをターゲットとしたアプリケーションであり、私たちの顧客は会計士、専門家、弁護士、そして(全体として)従業員です。

現在、各ウィンドウの下部にボタンバーが配置されています。それに関する主な問題は、それは時々ボタンが多すぎて、それより少ないものから最も重要なアクションを強調する方法がないということです。

そこで、ボタンバーを2つに分割し、「アクションボタン」(「アイテムで何かを行う」アクションに関するボタン)と「ナビゲーションボタン」(ウィンドウを閉じるアクションを呼び出すボタン)を分離することにしました。 :

  • ウィンドウの左下にアクションボタンが配置されています:新規アイテム、詳細、印刷、削除
  • ナビゲーションボタンはウィンドウの右下に配置されています:閉じる、戻る

  • それは良い考えですか?

  • 最終的なユーザーには基準が明確でしょうか?

2つの異なる画像を用意しました。

更新済み-Dropboxアカウントに読み込まれます:

変更前:

Before

後:

After

ありがとうございました

11
franz976

Windows環境では、ナビゲーションバーが一番上に表示されます(あまり使用されない場合を除きます。その場合、他の場所で問題が発生する可能性があります)。アクションボタンバーをツールバーとして左側または右側に配置します。右利きの人にとってはより自然であるので、私はわずかに右を好みます。それが、Officeなどの最も人気のあるアプリにあるものです。

いくつかのアクションを強調するために、差別化のために配色を使用することはかなり効果的だと思います。

0
Marc D

(ナビゲーションボタンからアクションを分離する)は良いアイデアですか
はい。

最終的なユーザーには基準が明確でしょうか?
うまく実行されても、彼らは気づかず、あたかも振る舞います。


ただし、改善は1つの経験則に違反しています。

ナビゲーションボタンは前に移動しますそれらが影響するもの。
確認ボタンが後に続きます確認内容。

ただし、その特定のケースでは、提案されたレイアウトキュー(たとえば、区切り線)を考慮すれば、これに違反することはそれほど問題にはなりません。

左に確認、右に「会社を選択」のように1行に並べても構いません。

これがポップアップ/サブフォームでない場合、これは通常ウィンドウフレームにあるため、明示的な「閉じる」を削除することを検討できます。

3
peterchen

私には、アクションボタンを上部に配置する方が自然に感じられます。これは私にはずっと直感的に思えます。

最初にページをスキャンすると、ユーザーが実行できる操作が直接クリアされます。

リストにはさまざまなアクションがたくさんあります。

  • 会社を選択:ウィンドウを閉じます。会社に移動するとします。これは会社の見解ではありませんか?もしそうなら私は別の会社を選択できるダイアログを好み、閉じると選択した会社で画面をリフレッシュします。
  • close:デフォルトのウィンドウcloseを使用しないのはなぜですか?またはこのボタンを下部に残します
  • 新規:ページをスクロールしたくないが、すぐに新しい(会社?)を作成するので、一番上にある必要があります。
  • 印刷:idem dito、すぐに印刷させる
  • 詳細と削除は選択に適用されるため、少し混乱します。

だから私はこのようなものを提案します:

enter image description here

(画像はWireframeSketcherの評価版で作成されたため、恐ろしい透かしです)

小さな説明:

  • おもう select companyおよびnewは、ページの残りの部分をスキャンせずにページから離れるアクションです。
  • チェックされる行の一括アクションはdetailsまたはdeleteになります
  • printはグリッド/テーブルの近くにあり、表示されるものはすべて印刷されます(下部のcloseの横に配置することもできます)
  • closeは下部にあり、画面上部にあるユーザーはデフォルトを使用できます[x];彼女がたまたまページ全体をスキャンし、自分が一番下にいることに気付いた場合、彼女はそこでウィンドウを閉じることもできます。

ややコンパクトなバージョン:

enter image description here

これが多少役立つことを願っています。

3
nathanvda

ボタンを2つのグループに論理的に分離することは素晴らしいと思います。右にある2つのボタンを他のボタンよりも下に配置した理由がわかりませんか? 2つのグループに分けても、同じレベルに置くことができます。また、すべてのボタンaboveを下に置くよりも、テーブルに置く方が良いと思います。

1
Pasha Bitz

よくわかりません。すべてのボタンを右下に配置したいのですが。私はウィザードなどでそれらを見つけるのに慣れています。他のボタンではなく一部を強調することであれば、最も重要なボタンをボタンとして提供し、他のアクションをリンクとして提供することを検討することをお勧めします。これは現在多くのWebサイトで行われていること(ボ​​タンとして保存、右へのリンクとしてキャンセル)であり、デスクトップアプリで完全に使用できます。クリック可能なリンクの概念は、Webからデスクトップアプリへの移行にも適しています。


画像を見て、あなたのアイデアはかなりうまくいくと思います。アクションを「分類」し、どのバーに表示するかを選択するのが非常に厳密であれば、エンドユーザーにとっては明らかです。アクションとナビゲーションの代わりに、おそらくより簡単に適用され、したがって認識された区別は、「アイテムアクション」と「フォームまたは一般アクション」であり、アイテムアクションは常にグリッド内の情報(リストなど)と一般アクションに常に関連しています。リスト全体またはフォーム(リストがない場合)に関連します。

0
Marjan Venema

新規、詳細、印刷、削除のボタンは、ツールバーのように、テーブルの上にあります。これは、デスクトップ環境およびWebベースのアプリケーションでもかなり標準的です。それらを左下に配置する前例はありません-私はそれをまったくしません。

画面下部のボタンはナビゲーションボタンです。通常は[OK]、[キャンセル]、または[OK]、[適用]、[キャンセル]です。 「Select Company」と「Close」があります。 「会社の選択」はコンピュータへの指示のように聞こえるので、使用しません。代わりに、「選択した会社を使用」のようなものを言います。それは役に立ちましたか?

0
Hagan Rivers