web-dev-qa-db-ja.com

ラジオボタンへの現代的なアプローチ

20年前のアプリケーションのUI/UXの更新に取り組んでいますが、この特定のユースケースで行き詰まっているようです。

Newボタンをクリックすると、システムはユーザーに2つのオプションのいずれかを選択するように求めます

  1. 新しい作業指示書を作成する
  2. 既存の作業オーダーの新しいタスク/サブタスクを作成します

システムはより多くの情報を要求することに注意してください。これだけではなく、アプリケーションのアーキテクチャに基づいて、先に進む前にこの情報(および他のいくつかの情報)を知る必要があります。

私の質問は、2つの選択肢をユーザーに表示する現代的な方法は何でしょうか?以下のスクリーンショットに記載されているオプションの1つでしょうか?

古いアプリ画面

enter image description here

私の提案するオプション:

enter image description here

22

短い答え:オプション1

これを2つの通常のラジオボタンよりも複雑にする理由は何もありません。理由があるので、これらのUI要素は長い間ありました。

あなたが提示する他のオプションは、他の場合に適しています。


基本的な経験則は次のとおりです。

ラジオボタンを使用して、相互に排他的な選択肢を最大(最大5〜7)まで、すべての選択肢を表示したい場合。
5〜7を超えるオプションのリストを表示するには、dropdownsを使用します。オプションをすべて表示すると、視覚的な過負荷になります。

スイッチ付きのオプション4は、2つの等しいオプション間の選択ではなく、オン/オフのメタファーに使用されるため、まったく適合しません。

オプション3も可能だと思いますが、これは通常のラジオボタンに値を追加するものではなく、一部のユーザーを混乱させる可能性もあります。


違いを説明しているこちらの回答をご覧ください:
https://ux.stackexchange.com/a/88135/67657

または、このNNグループの記事:
チェックボックスとラジオボタン

またはこれ:
ラジオボタンとドロップダウンメニューの使用に関する7つのルール

79
Big_Chair

2つのタスク用にまったく新しい画面とボタンを作成します。 「作業指示の編集」と「作業指示の作成」のラベルを付けます。編集は、既存の作業指示を編集するか、サブタスクを追加するためのものです。 Createは、新しいワークオーダーを作成するためのものです。 [編集]ボタンは、開いている作業指示書のリストの作業指示書の横にあります。 [作成]ボタンはページの上部にあります。

work order UI

https://www.bootply.com/Ur1q177i95

これは、特定の状況に適用されます。通常のラジオボタンでラジオボタンの操作(オプションの短いリストから選択)を実行する場合は、変更しません。

15
Chloe

状況によります。

  • ラジオボタンは、すべての可能なオプションをユーザーに示すのに最適であり、選択されたものを明確に強調表示します
  • ドロップダウンは、スペースがない/スペースを使いすぎない場合に便利です。
  • オプション3(タブ?)は、コンテンツが動的な場合に非常に興味深いアプローチであるため、ユーザーは選択肢ごとに何が変化するかを即座に確認できます。コメントで述べたように、それはユーザーを混乱させるかもしれません。タブはコンテンツのカテゴリを分けます。選択されていないタブのコンテンツはどうなりますか?
  • スイッチタイプのボタンは、オン/オフの選択により馴染みがあり、将来フォームにオプションを追加することにした場合に適切にスケーリングされない唯一のオプションです。
6
Luciano

まだ発生していないことの1つは、ラジオボタンのデフォルトオプションが常に選択されていることです。これは、ここでのワークフローは主に新しい作業指示を追加するためのものであり、2番目にタスクを追加するためのものであることを示しています。このコントロールをタッチして、フォームの残りの部分に入力すると、タスクではなくWOが表示されます。

その仮定が正しい場合は、必要に応じて選択で親WOを選択するように依頼できます。この段階で候補タスクのリストを検索できるかどうか、およびいくつあるかによっては、これは注意が必要です。

optional select

その情報を取得できない場合、またはここで候補から選択することが実用的でない場合は、「サブタスクとして添付しますか?」という単純なチェックボックスを使用できます。

3
Beejamin

トグルボタンを使用できます。

したがって、この概念は、相互に排他的な選択肢を提供するプッシュボタンです。1つのボタンが押されると、もう1つのボタンが上がります。

古い「プッシュボタン」デザインを使用している場合は、どのボタンが押されており、どのボタンが押されているかを明確にしてください。以下の図は、この点ではあまりよくありませんが、概念を説明するためだけのものです。

toggle buttons example

選択した選択肢が別の色で「強調表示」されている、より現代的なデザインを使用することもできます。

主な目標が古いインターフェイスをスマートフォンなどのタッチデバイスと互換性のあるものにすることである場合、簡単な代替策は、ラジオボタンの機密領域を拡張してラベルを含めることです。ただし、ラジオボタンとそのラベルを囲むフレームを描画しない限り、ラベルがクリック可能であることは明らかではありません。

デスクトップインターフェイスの場合、オプションの数が限られている場合でも、ラジオボタンは良い選択です。

3
OuzoPower

元の「新規」ボタンを「新規作業指示」用と「新規タスク」用の2つのボタンに置​​き換えることができます。

以下のMicrosoftアプリケーションのスクリーンショットを検討してください。 File-> Newメニュー項目は、実際には、ユーザーが作成する可能性のあるさまざまなタイプの新しい「もの」をリストするメニューです。

Visual Studio Example

あなたの場合、ボタンを別のメニューに配置する必要はなく、元の「新規」ボタンを2つのオプションに置き換えるだけです。

1
Harrison Paine