web-dev-qa-db-ja.com

GUIウィザードを作成するとき、すべてのページ/タブを同じサイズにする必要がありますか?

一部の図書館が私を強制することを理解していますが、私の質問は一般的です。

下部に一連のボタンがある場合、[戻る]、[次へ]、[キャンセル?](その他?)の場合、それらの場所を変更する必要がありますか?答えが「いいえ」の場合、コンテンツの少ないページについてはどうすればよいですか?物を伸ばしますか?それらを唯一の左上隅に配置しますか? Steve Krug氏によると、GUIにそこにある必要のないものを追加しても意味がありません。

ウィザードにはさまざまなアプローチがあることを理解しています。タブがあるものとないものがあります。一部のタブは上部に横に並んでいます。その他-左側の垂直方向。一部はページ/タブを表示せず、単なるダイアログのシーケンスです。ウィザードが「非線形」の場合、これはおそらく必須です。以前の選択では、分岐が発生する可能性があります。

どちらの方法でも問題は同じです-「全体像」の一貫性(ページ/タブの概要+ボタンの場所)、または詳細の一貫性(一部のタブはいくぶん詰め込まれ、他のコンテンツはほとんどない)を犠牲にします。 。 3番目の選択肢は、コンテンツがページ間でほぼ均等に分散されるようにコンテンツを編成するために、コンテンツに余分な労力をかけることです。ただし、これを行うのは難しい場合があります(たとえば、最初のタブに3つの選択肢のみが含まれ、そこから分岐する場合。他の例もあると考えられます)。また、コンテンツのいずれかが変更されると、このバランスを維持することが困難になります。後。

良いアプローチをお勧めできますか?関連する優れたブログ投稿や本の章へのリンクも歓迎します。

ご不明な点がありましたらお知らせください。

11
Job

ボタンの位置は変更しないでください。ユーザーは、「次へ」/「完了」ボタンの位置が一定のままであることを期待しているため、マウスを動かさずにデフォルトのオプションを受け入れてクリックすることができます。

他のページよりもコンテンツの少ないページがある場合、他のページにコンテンツが多すぎる可能性があります。既存のページ間で移動するか、新しいページを追加しますが、多すぎません。ただし、他の人も指摘したように、人工的なサイズ要件を満たすために、ページを任意に分割しないでください。オプションが論理的に連携する場合は、それらをまとめてください。

19
ChrisF

ウィザードとタブ
必要な複数の手順をユーザーに案内したい場合は、ウィザードを使用します。
ユーザーが任意のタブを選択して変更を加え、他のタブを見ずにそれらをコミットできる場合は、タブを使用します。

私はいつも「バック/ネクスト付きタブ」をぎこちなく見つけます。私は初心者と上級ユーザーの間に少し「傾斜」を設けるという考えを理解していますが、ほとんどの場合、私が見たように、個々のページのデザインは初心者ユーザーには適していません。

サイズ

ウィザードの場合、それは単なるサイズではありません。ユーザーは常に同じウィンドウを操作するような印象を与える必要があります。これは通常、すべてのページで同じ位置にある同じサイズのヘッダーとその他の制御要素によって実現されます。

例:Installshieldは「同じウィンドウ」のメタファーにかなりひどく違反しています(明白ではありませんが)。各ページは、プライマリモニターを中心とする新しいモーダルダイアログです。したがって、ウィンドウを別の位置に移動し、[次へ]をクリックして、ウィンドウを元に戻します。ああ!

ウィザードでは、フォームのサイズを変更することはユーザーにとって非常に厄介です。それは彼の手を握るようなものですが、あなたは常に彼の周りを踊っています。より深刻な言い方をすると、ユーザーアクション([次へ]をクリック)には予期しない副作用( "ウィンドウサイズの変更")があります。これにより、ユーザーがソフトウェアを制御できるようになります。

タブの場合でも、サイズを変更するのは面倒ですと主張します。まず、それはひどく見える-どの主観的。次に、タブを含むウィンドウを画面の隅に配置して、デスクトップ上の別のドキュメントを表示すると、ダイアログの一部が消えるか、またはデスクトップにさらにジャンプして、別のページに切り替えます。潜在的に他のものをカバーしています。


(完全な開示:私はそれを行うアプリに取り組んでいます、そしてそれは私のせいです。ユーザーがそのかわいそうな小さなダイアログを回避するのを見るのは私を不快にさせます。


「混雑している」と「ほとんど空いている」のどちらかを選択する場合は、通常は問題ありません。空のスペースが良さそうです。単一の入力フィールドを持つ大きな目立つウィンドウがあるだけで、明確なステートメントになります。これは次のステップであり、とても簡単です。それがまさにウィザードで送信したいメッセージです。

11
peterchen

スクロールせずに固定サイズのダイアログタイプのウィンドウを備えたデスクトップアプリについて話していると仮定すると、各ページを同じ量だけ入力することについて心配する必要はないと思います。ユーザーがタスクを理解する能力と一致する小さなまとまりのあるステップにタスクを分割することがより重要です。

これを行うと、入力コントロールと下部にあるコマンドボタンの間の空白によってユーザーが混乱することはないと思います。そのため、物事を広げることもありません。コントロールの間隔をあけて、入力と指示がどのように関連しているかを最もよく示します。ユーザーにとってステップが完了しているように思える限り、ユーザーは何かが足りないと考えて行くことはありません。ウィザードでは通常、ボタンの上に空白スペースがあり、ユーザーは一部のステップが他のステップよりも多くのスペースを取ることを理解しています。

まばらなページの入力コントロールのすぐ下にボタンを上に移動すると、より混乱しやすくなると思います。ユーザーは、「最終アクション」ボタンが下マージンにあることを期待しています。それらを中央に移動すると、ユーザーはそれらを「最終アクション」ボタンとしてすぐに表示しない場合があります。さらに重要なのは、ChrisFの回答の中で、ウィザードに慣れているユーザーがすばやくクリックできるようにする点です。

4

個人的に、私は:

  • デフォルトのアクションを大きくする(太字でも、残りのUIに応じて)

  • 破壊的なオプションを赤にし、ボタンのように見えないこともあります(たとえば、「ログイン」フォームでは、「キャンセル」はリンクのように見え、送信ボタンは実際のボタンのように見えます)

それを超えて、タブのテキストの周りの空白が同じである限り、それらは同じサイズである必要はないと思います。ただし、consistencyの場合、ボタンの場所は同じである必要があります。これにより、UIが特定の方法で動作することをユーザーに期待させることができます。

1
wildpeaks

[次へ]/[前へ]ボタンの場所によって異なります。最も重要なことは、彼らが位置を変更しないことです。よくあることですが、右下にある場合は、すべてのページが同じサイズでなければならないことを示しています。
ボタンが左上に配置されている場合、一定のサイズは重要ではありませんが、コンテンツの前にボタンを配置することは少し不規則に見える場合があります。

1
awe