web-dev-qa-db-ja.com

「良い」オプションダイアログを作ることは可能ですか?

私が苦労していて、満足のいく例をまだ見ていませんが、オプションダイアログがあります(それがデスクトップアプリの場合、それが違いを生むのです)。私は自分自身で問題を抱えていますが、それらはすべて同じ問題があるようです。より一般的な例をとるには:

Microsoft Word options dialog

私が目にするいくつかの一般的な問題があります。

  • 発見可能性は低いです。カテゴリにグループ化する場合でも。オプションダイアログで何かを見つける最も一般的な方法は、何をクリックするかをグーグルにすることです!
  • グループ化は貧弱です-「詳細」タブは「これがどこに行くのか分からない」の巨大な集大成のようです。
  • 個々の機能の説明は、ラベルに適合しない長い説明が必要になるため、多くの場合不十分です。
  • 上記のスクリーンショットとは関係ありませんが、名前が付けられていたり、一貫して起動されていません。数年前、それは常にツール->オプションのようでした。最近では、従来のメニューを使用しているアプリの「ツール」、「ファイル」、「編集」メニューのいずれかにあり、「オプション」、「設定」、「設定」など、漠然とした関連性があると思われます。

私が見たより良い「オプション」画面のいくつかはブラウザのものです。 Chromeたとえば、検索が可能になり、おそらく発見可能性が向上します。

Chrome options

ただし、この場合でも、目的のフレーズまたは単語を正確に検索する必要があります。たとえば、「追跡しない」を検索すると、「追跡しない」リクエストを送信するオプションが表示されます。 「追跡を無効にする」を検索すると、手ぶらのままになります。

私が考えることができる解決策は実際には実行可能ではありません:

  • オプションダイアログをスリム化し、最も一般的なオプションのみをそこに配置します(常に小さい値から始まりますが、存在するオプションの多くはユーザーの要求に応じて存在します!)
  • オプションダイアログを使用せずに、ツールバーやリボンなどのカスタマイズを配置する他の場所を見つけます(偶発的ですが、必要なものを見つけるのがさらに面倒になるだけです)。
  • オプション機能の詳細な説明にはヘルプアイコンを使用してください(実際に使用する人はいないでしょうか?)
  • 「詳細」または「一般」カテゴリを取り除くために、さらにカテゴリを作成します(その結果、実際にはナビゲートできないカテゴリのヒープ全体になってしまいます。その中には、オプションが1つしかないものもあります)。

私が見逃している良い例、これらの問題の既知の解決策、または完全にうまくいかないオプションダイアログを作成するためのフィールドの関連文献はありますか?

92
berry120

ソフトウェア開発IDEには、私が今まで見た中で最も複雑な設定ページがいくつかあります。IntelliJIDEAは、発見しやすさで素晴らしい仕事をします。左のツリーを絞り込むための検索を提供するだけでなく、 "一致するページに対して、それらは一致するオプションのための特別な強調表示効果もあります。これは、Chromeの例に似ていますが、フィルタリングされていない元のレイアウトと階層を失わないため、さらに優れています。オプション。

IntelliJ IDEA settings dialog filtered to Scala

あなたのソリューションへ:

(すべての引用はOPからのものです)

  • オプションダイアログをスリム化し、最も一般的なオプションのみをそこに配置します(常に小さい値から始まりますが、存在するオプションの多くはユーザーの要求に応じて存在します!)

スリム化しすぎないでください!確かに「共通の」設定ページを作成できますが、何かを変更する方法がまったくない場合、パワーユーザーはそれを嫌います。

  • オプションダイアログを使用せずに、ツールバーやリボンなどのカスタマイズを配置する他の場所を見つけます(偶発的ですが、必要なものを見つけるのがさらに面倒になるだけです)。

これは常に良い習慣ですが、オプション/設定ダイアログに追加します。ソフトウェアのすべてのカスタマイズのためのワンストップショップである必要があります。

  • オプション機能の詳細な説明にはヘルプアイコンを使用してください(実際に使用する人はいないでしょうか?)

私は人々がそれらを使用するだろうと思います、そしてもっと重要なことは、それはダイアログの上部にあるフィルターと一致する可能性がある追加のテキストになるでしょう。オプションが「CSVにエクスポート」で、ヘルプテキストが「Microsoft Excelで開くことができるカンマ区切りファイルにファイルをエクスポートする」だった場合、クエリ「csv」と「Excel」がそのオプションと一致します。

  • 「詳細」または「一般」カテゴリを取り除くために、さらにカテゴリを作成します(その結果、実際にはナビゲートできないカテゴリのヒープ全体になってしまいます。その中には、オプションが1つしかないものもあります)。

はい、ある程度まで-1つのオプションのあるカテゴリはありませんが、「一般」と「詳細」を削除してツリーに整理します(FirefoxやWordの例のような単純なリストに対して多すぎる場合)。

127
J. Dimeo

根本的な原因:実装駆動UI

単一の統合されたオプションダイアログの全体的なアイデアは、構成ファイルを持つプログラムの結果のようです。オプション機能は、構成ファイルを読み取り、編集のためにダイアログでユーザーに提示してから、変更を構成ファイルに保存します。おそらく、他のいくつかのプログラムは同じことを行い、レジストリの読み取りと書き込みのみを行います。ユーザーのタスクではなく実装がUI設計を推進しており、多くの場合悪いことです。プログラマにとっては便利ですが、ユーザーにとっては便利ではありません。

ユーザーが最初にプログラムをインストールするときを除いて、ユーザーは通常、「今日はオプションを変更する」とは考えません。発生するのは、プログラムがユーザーの希望とは異なる特定のことを行っていることです(たとえば、デフォルトではソース形式に一致するように貼り付けられます)。したがって、ユーザーは(十分に精通している場合)、「たぶんそれにオプションがある」と考え、主要なサファリに乗り込んで、それが存在すると仮定して、オプションのジャングルを探検します。それが機能しないのも不思議ではありません。

検出可能性への対応:影響を受ける機能に近いオプション

解決策は、オプションに影響する機能をオプションに置くことです。 1つの大規模なダイアログにすべてのオプションがあるわけではありません。メニューとダイアログの周りにそれらを配布します。たとえば、デフォルトの貼り付けを変更する場合、[編集]メニューの[貼り付け]メニュー項目の下に[貼り付けオプション]メニュー項目があります。 [貼り付けオプション]は、デフォルトの貼り付け動作を選択するための簡単なダイアログを開きます。または、「デフォルトに設定」を含む「形式を選択して貼り付け」ダイアログがあり、ユーザーが特定のインスタンスに対して特別な貼り付け動作を選択すると、永続的にすることもできます。これにより、見つけやすさが向上します。または、コピー、元に戻す、削除のオプションもある場合は、単に「編集オプション」があります(そうでない場合、メニューには、他のすべての重要なものとほぼ同じ数の「オプション」メニュー項目があります)。ユーザーがメニューまたはリボンタブでコマンドを実行すると、そのオプションが表示されます。ユーザーは、膨大な数の無関係で疑わしく整理されたオプションのグループを検索して必要なオプションを見つける必要がないため、作業負荷が軽減されます。オプションは、ユーザーがすでに知っているか、または機能を使用できなかった関連機能とまったく同じように構成されています。

オプションは定義によりセッション間で保持されるため、ほとんど変更されないものに最適です。このため、ユーザーが通常探しているものの邪魔になるため、オプションメニュー項目とコマンドボタンでUIが乱雑にならないようにすることが重要です。ダイアログごとに1つだけのオプションボタンと、メニューまたはリボンタブごとに1つのオプションメニュー項目があるはずです。それは思ったほど厳格ではないかもしれません。あなたの例(より広範なものの1つ)でMS Wordのオプションを検討すると、次のようになります。

  • [ホーム]タブの[切り取り/コピー/貼り付けオプション]メニュー項目。

  • [表示]タブの[フォーマットマークオプション]メニュー項目。

  • [レビュー]タブの[校正オプション]メニュー項目。

それだけです。

残りのオプションは、ダイアログ/ページの[オプション]ボタンの下に配置するか([保存]オプションや[印刷]オプションなど)、またはメニューやダイアログに関連付けられていないため、別の方法で処理する必要があります(次を参照)段落)。

矛盾する場所への対応:環境設定メニューを使用

例では「Word全体を選択」など、関連するメニューやダイアログボックスがないオプションがいくつかあります。そのため、それらを設定するために、何らかの集中化された場所が依然として必要です。ただし、オプションの総数よりも少ないため、関連する機能の近くと中央の場所の両方で同じオプションを使用して発見可能性を最大化するのが最善ではないと想定して、オプションを見つけやすくします。

あなたは今それらのための標準化された場所がないことは正しいです。 Microsoftはしばらくの間「ツール」を標準として使用していましたが、「ツール」は「高度な」のようなもので、他のどこにも適合しないもののジャンクな引き出しです。アプリケーションメニュー(プログラムの名前が付いたメニュー)にオプションを配置するというAppleの標準は、上記のパラグラフを考えると、特定の機能だけでなくプログラム全体のオプションであるため、ある程度意味があります。

ただし、私のアドバイスは、トップレベルに[設定]メニュー(プルダウンメニューまたはリボンタブ)を配置することです。オプションの場所は、他のメニューやタブの下ではなく、独自の場所です。これにより、発見しやすさが最大化されます。ユーザーがアプリを開くたびに、「設定」(または「オプション」、場合によっては「カスタマイズ」)が表示されます。ユーザーがオプションが[ツール]、[編集]、またはアプリケーションメニューにあることを期待しているかどうかは関係ありません。彼らはすぐにそれを上部に表示し、他の場所を探す必要はありません。

スペースや乱雑さは、特にメニューバーの場合、通常は問題になりません。ファイル、編集、表示、ヘルプの後、ほとんどのアプリには他に多くのものはありません。オプションが少数(8個以下)しかない場合は、[設定]メニューでメニュー項目を切り替えて直接設定できます。ダイアログボックスはありません。多くのオプションがある場合は、それらを別々のダイアログに分割し、(ダイアログ内に別々のタブを置くのではなく)別々のメニュー項目でそれぞれにアクセスします。オプションの数が中間にある場合は、メニュー項目の切り替えと1つまたは2つのダイアログを組み合わせてください。

不十分な説明への対処:アクティブヘルプ

環境設定メニューに加えて、またはおそらくより良い代替手段として、環境設定を変更する機能をヘルプに提供します。あなたの例で「賢い段落選択」を取ってください(それが一体何であれ)。ユーザーは、「これは賢い段落の選択です!オフにしたいです!」彼らは考えています、「この選択は奇妙なことをしています。何故ですか?"したがって、彼らは自然にヘルプに行って詳細を学びます。インデックスと検索がまともで、内容が明確に書かれている場合、彼らはこの賢い段落の選択と、それがどのように機能するかを見つけます。多分彼らはそれを理解したら、彼らはそれを守りたいと思っています。ただし、そうでない場合は、ヘルプでヘルプを無効にする手段を提供する必要があります。これを実現するために、オプションダイアログの複数の手順をユーザーに案内することはありません。ユーザーがそのことを学ぶ必要があるわけではありません。一度オフにするだけで、忘れてしまいます。すぐにやらせてください。

ヘルプにオプションを配置すると、検索はオプション名と完全に一致する必要はありません。説明のどの部分にも一致する可能性があります。また、検索が提供されていることを前提として、同義語を照合することもできます。ユーザーはすべての説明を受けるので、それが自分の望むオプションであるかどうかをより適切に判断できます。

そしてインストール?

一般的な変更オプションのリストをユーザーに提示し、デフォルトの内容を示し、ユーザーがそれらをすぐに変更できるようにするインストール(たとえば、デフォルトのフォルダー、デバイスなど)について検討します。ただし、多くの場合、ユーザーは何が機能するか、何が機能しないかを見つける前に、プログラムを使用する必要があります。したがって、インストール後にもオプションを合理的に発見できるようにすることが重要です。

18

最近、同様の問題に悩んでいるため、関連する質問を投稿しました。私が集めたものから、これらの種類の「オプション」は非常に前後関係があることが多いので、明確でクリーンなカットソリューションはありません。 この記事では、いくつかのよく知られている例について簡単に説明します。

しかし、これらの種類のメニューのデザインソリューションに関しては、まだやらなければならないことがたくさんあると私は感じています。

他に役立つと思われる記事Firefoxの[オプション]メニューの再設計プロセスについて説明しています 下線を引くメッセージは、ユーザーの目の前で設計の考えと反復を取得し、何が現れるかを確認する必要があるということです。それが私がやろうとしていることであり、予期しない「エウレカ」の瞬間を期待しています。

8
RobbyReindeer

"Configuration"と "Preferences"の間に線を引くことで、グループ化を改善できます。アプリを実行するためにユーザーが構成する必要があるすべてのものは、「構成」に移動する必要があります。オプション(実際には設定の事項になる可能性がある)はすべて、「設定」に移動する必要があります。たとえば、デフォルトのプリンター(自分と同じ物理オフィスにあるもの)の "設定"や自動保存フォルダーへのパス(常に書き込みアクセスが可能な場所にある必要があります)はほとんどありません。

次のステップはあなたの好みをよく見ることです。 実際にそこにいる必要はありますか?たとえば、「Ctrl +クリックでハイパーリンクをたどる」が優先される理由は1つとは言えません。ユーザーがハイパーリンクをたどらない場合、ユーザーがしなければならないことはクリックしないことだけです。または「スマートカーソルを使用する」。それらが本当に賢いのなら、なぜ地球上でそれらを無効にしたいのでしょうか?そしてもしそれらが結局それほど賢くないなら、なぜそれらはまったく実装されるのでしょうか?結論として、アプリをできるだけ直感的で使いやすいものにし、オプションを削除して直感性を下げます。

最後に、ユーザーの要求を拒否する方法を学ぶ。これは一部の顧客にかかる可能性がありますが、私を信じてください-雑然とした設定ダイアログは同じくらい多くの費用がかかります。次回ユーザーがsmartカーソルを作成できるかどうかを尋ねるとき、ユーザーが手をたたくと魔法のように他の画面にジャンプします。「いいえ」と言ってください。

5

最新のソリューションでは、さまざまなコマンドと関連するメニュー項目でトレーニングされたニューラルネットワークを活用できます。 Cortana、Siri、Alexa、Omega、Googleがどのように機能するかを考えてみましょう。コマンドを入力するか何かを話すと、デバイスが代わりにそれを実行します(または少なくとも、実行可能な場所を引き上げます)。通常の方法(カテゴリ/サブカテゴリ/アイテム)でアイテムを検索するだけの場合は、「詳細」メニューを提供できます。あなたの例を考えると、ユーザーは「追跡を無効にしたい」と言うことができ、ニューラルネットワークは、追跡しないフラグを探していることを理解します。

Google Chromeのようなアドレスバーのようなソリューションを使用している場合でも、ニューラルネットワークを実装するだけでユーザーに優れたエクスペリエンスを提供できます。特に、匿名の使用統計をアップロードできる場合に便利です。たとえば、「追跡を無効にする」と入力して[クリックしない]をクリックしたユーザーは数人いるため、これはニューラルネットワークにトレーニングされます。時間の経過とともに、より多くの匿名の統計が収集されたため、ユーザーがオプションダイアログを操作するほど、オプションダイアログはより賢くなりました。

データをクラウドソーシングしなくても、各メニュー項目に複数のフレーズ/キーワードを使用してニューラルネットワークを事前トレーニングできます。各ユーザーがメニューシステムの使用を開始すると、オプションダイアログは最終的に特定の使用パターンに合わせて調整されます。重要なのは、ユーザーにソフトウェアの使い方を学ぶのではなく、メニューがその使い方から学べることです。まだ学習曲線のようなものがありますが、最終的な最終目標は努力する価値があると思います。

2
phyrfox

ホイールを再発明したり、[設定]ダイアログボックスのアイデアを吹き飛ばしたりせずに、単一の最もユーザーフレンドリーな改善は、オプションダイアログボックス内に、各オプションを選択またはホバーすると、段落ごとの説明が表示される領域があることです。それ。プリファレンスを困難にすることの1つは、プログラム全体の変更の説明をいくつかの単語に詰め込もうとすることです。 「スマートクオートを有効にする」は理解しやすいですが、より長い説明からもメリットがあります。私はいくつかのプログラムでアドビがプリファレンスの詳細な説明を実装する方法に感心しました。

2
user8356

私が見ているように、オプションメニューには本当に3つの主要な目標しかありません。

  1. できるだけ少ない探索で、必要なものをすばやく見つけます。
  2. 特定のオプションができることをできるだけ簡単に理解します。できれば専用のヘルプウィンドウやWeb検索に頼ることはできません。
  3. オプションの変更はできるだけ明確かつ直接的なものにします。 (通常、与えられた、tickboxでそれほど遠くまで行くことはできません)

最初のタスクは、探しているものを見つけることです。これは私が見た中で最も変化しやすいものの1つです。システムによっては、カテゴリ別またはアルファベット順に整理されたオプションの壁を提示します。一部は、アンケート形式のFAQシステムのみを提供しています。検索ボックスは、自然言語のクエリを可能にするため人気があります。

個人的には、必要なものが正確に見つかる1つの場所が見つかるまで、カテゴリ別にドリルダウンするのが最も快適です。私は、システムが誰かの検索をサポートするべきだと信じていますが、彼らが何をしているかを正確に知っている人にとっても迅速でなければなりません。目的地にたどり着く方法がわかっている場合は、クイズや自然言語による検索は必要ありません。

優れた[オプション]メニューには自然言語の検索機能があり、すべてのオプションをナビゲート可能な方法でレイアウトし、機能ごとに明確に構成されています。人間の心は、キーフレーズではなく場所を視覚化するために構築されています。したがって、マッピング可能なメニューは非常に直感的です。検索を実行すると、結果が表示されるはずです。1つ選択すると、そこに移動し、サイドバーのメニューのどこにseeを表示できます。

その後、その場所をもう一度検索したい場合は、サイドバーにすばやく移動してそこにたどり着くか、履歴システムを使用して以前の検索を見つけることができます。

理解の2番目の主要なタスクはかなり単純です。必要に応じて、機能の平文の説明と、より詳細な説明へのリンクを提供します。 ?の一般的な規則を使用することをお勧めします。丸いボタンの記号。これをクリックすると、またはロールオーバーすると、完全な説明が表示されるフローティングテキストボックスが表示されます。

それ以上に、明確なパーティション分割と図像の使用は非常に役立ちます。

特定のオプションをユーザーがすでに慣れているボタン(たとえば、アプリケーションのメインUIのオプション)に関連付けると、ユーザーが必要なものを見つけるのにも役立ちます。

たとえば、ワープロのフォントに影響を与えるオプションを探している場合、[オプション]メニューにある[フォント]ボタンのアイコンを確認し、それに従うことができるため、非常に役立ちます。

UI自体に状況依存オプションシステムを追加することもできます。したがって、メインUIのボタンを右クリックすると、オプションメニューの適切なセクションへのリンクがコンテキストメニューに含まれているはずです。あらゆる種類のランディングページからナビゲートする必要性を即座に排除します。

さらに、その同じコンテキストメニューに(ユーザーまたは匿名の使用状況データからの)最も一般的な変更を切り替えるためのボタンを追加することも非常に役立ちます。

2
Ruadhan2300