web-dev-qa-db-ja.com

複数のネストされたモーダルダイアログを置き換えるための良い代替手段はありますか？

成熟していて売れているWindowsデスクトップアプリケーションがあるため、次のリリースのユーザーエクスペリエンスの向上に注力しています。

私が試すことの1つは、たとえば次のようなネストされた複数のモーダルダイアログを取り除くことです：

enter image description here

これらの複数レベルのダイアログを使用する理由は、アプリケーションをできるだけ使いやすくするために、ユーザーにできるだけ少ないオプションを表示するためです。

マイナス面として、パワーユーザーにとって、これは通常、結果が得られるまで「クリック」しすぎます。

だから私の質問は：

ネストされたモーダルダイアログに代わる可能な設計はありますか？

  • 初心者のユーザーはまだ使いやすいUIを持っていますか？
  • 上級ユーザーは、サーバーのネストされたダイアログをクリックすることなくタスクを実行できますか？

（この問題は、アプリケーションがVisual Studio .NET 2010とDevExpressで開発された.NET Windowsフォームアプリケーションです）

gui-designinformation-architecturemodal-dialogwindows-os
22
Uwe Keim

考えられる解決策の1つは、ユーザーがアイテムとサブアイテムを選択するときに、詳細を段階的に表示することです。利点は、余分なパネルとボタンを取り除く一方で、最初のUIはまだクリーンであるということです。

可能であればそれを排除しようとするとしても、「構成」ボタンを使用して初期ページを保持できます。

初期ビュー

Initial View

ユーザーがアイテムを選択

enter image description here

ユーザーがサブアイテムを選択

enter image description here

使用率の高いWindowsアプリケーションで上記の戦略をうまく使用しました。

14
Emil

この場合、可能な限り少ないオプションを表示すると、ユーザーが混乱します。基本的に、あなたは ロシアの入れ子人形 を作成しました。これは、ユーザーが「編集」のレイヤーがいくつあるかわからないためです。

ワイヤーフレームからわかるように、レベル1のEditボタンは、そのレベルのアイテムの名前を変更し、それらに関連するレベル2のアイテムを表示すること以外に何もしません。ただし、レベル2では、Editボタンを使用して、そのレベルのアイテムの名前を変更し、いくつかのオプションを確認できます。したがって、さまざまな相互作用を呼び出すボタンが1つあります。

モーダルダイアログのレベル数を減らしたいだけで、実際にサブアイテムのオプションチェックボックスが1つしかない場合は、以下のようなレイアウトが機能する可能性があります。

enter image description here

でも、雑然としていてあまり暑くないので、もう一枚スケッチを作りました。

enter image description here

このダイアログでは、アイテムとサブアイテムの数を変更できるため、これまでに示したものとは少し異なるプロセスが作成されます。さらに、そのステップは別のモーダルダイアログで行われるため、サブアイテムの複数のオプションを使用できます。もちろん、[追加/削除]ボタンが必要なければ、簡単に省略できます。

ダイアログの数を減らしようとしているのに、レベルを1つだけにする唯一の方法は、すべてのオプションを1つのダイアログに詰め込んでビューを乱雑にすることです。

4
dnbrv

Windowsアプリ？ビルGが行ったことを行い、Appleが行ったことを確認します。;）

冗談はさておき、使用頻度が低い場合でも、追加のモーダル（またはレイヤー）があることを恐れないでください。提供した例で仮定を立てることは困難ですが、 OS Xシステム設定のこのインターフェイス のような2つのペインのレイアウトから利益を得る可能性があります。

左側の画面では、第1レベルと第2レベルの詳細を編集できます。 「パスワードの変更」ボタンをクリックすると、第3レベルを編集できるレイヤーが表示されます。

「クリックが多すぎる」と「コンテキストの切り替えが多すぎる」と誤解しないように注意してください。後者のために、あなたの例はおそらくユーザーにとっていらいらします。

4
Matthew Moore

最初のダイアログウィンドウ（レベル1）内で、[編集]ボタンのある領域を情報ボックス/ペインに置き換えます。

左側のリストからアイテムを選択すると、アイテムのデータ（そのサブアイテムを含む）が情報ペイン内に表示されます。

現在、サブアイテムの名前を編集する機能は、インプレース/インライン編集を許可することで提供されています。名前をダブルクリックすると、その領域がテキストフィールドに変換されます。フィールドからフォーカスを削除すると、名前が保存されます。これにより、ダイアログ1と2の機能を組み合わせた1つのダイアログが残ります。

この時点で、追加のダイアログを使用してサブアイテムを編集できますが、これはそれほど悪くはありません。または、明らかにするなどのより賢いことを行うことができます...正式な名前があるかどうかはわかりませんが、ダイアログボックスとツールチップの間の十字架：浮かんでいて、通常、編集しようとしているフィールドを指す矢印がそこから伸びています。インラインダイアログだと思います。

2
Aquarelle

このフローでユーザーの目標が何であるかについての十分な情報がないので、この特定の例に関係することはできません。ただし、いくつかのヒント：

  1. ユーザーが通常、編集（編集ボタン）ではなく選択（[OK]ボタン）を試行する場合は、選択をできるだけ簡単にしてください。選択プロセスを複雑にするよりも、複雑な編集が必要です。繰り返しますが、フローを正確に推測している場合のみです。
  2. インライン編集を使用して名前を変更する（Googleドキュメントのドキュメントタイトルの名前を変更するのと同様）
1
ΞΫΛL