web-dev-qa-db-ja.com

選択肢のあるボタン

(チェックボックス機能のように)個別に押したり押したりできないボタンのリストがあります。一部のボタンはいくつかの属性(+または-)を持つこともできますが、これらの属性を選択することは一般的ではなく、最も一般的なのはボタンの初期値を使用することです。

私の添付画像を参照してください:

enter image description here この設計のアイデアは、ユーザーが必要な値をクリックするだけでよいようにすることです。これは、選択を行うためのかなり高速な方法です。ユーザーが属性+または-(「b」および「c」で使用可能)を追加したい場合は、ボタンを押してください。しばらくすると、ドロップダウンリストに選択肢が表示されます。

これの欠点は、私が見るように、2つの標準UI要素(ボタンとドロップダウンリスト)をマージしようとすることです。

残念ながら、これをテストするためのユーザーテストシナリオを作成する時間はありません。

これに関するフィードバックはありますか? 「b」と「c」に+または-を追加するより良い方法を提案できますか?

6
Henrik Ekblom

マウス操作では、メニューボタンの代わりに分割ボタンを使用できます。上のボタン「A」、「B」、...では、押された状態または押されていない状態を選択できます。下のドロップダウンボタンを使用して、属性を選択できます。

Microsoft uiガイドラインを参照

分割ボタンの例(スタイルなし):

Selection with split buttons

その他のアプローチ:マウスを「A」、「B」ボタンの上に置くと、属性の選択が表示されます。

selection with roll over

6
sysscore

あなたがそれを提案した方法は OmniGraffle が行う方法であり、私はいつもそれが非常に直感的であることがわかりました。それらの実装のいくつかの詳細:

  • 彼らの長押しは本当に短い;ドロップダウンをトリガーする前に数百ミリ秒以内。素早い反応を感じさせます。
  • ユーザーが実際にボタンの右下隅にある小さな矢印をクリックすると、すぐにドロップダウンがトリガーされます。多少の器用さが必要ですが、メニューに必要なものがわかっている場合は、そのオプションを使用できるようにしておくと便利です。
  • 図で示したように、ユーザーがサブアイテムを選択した場合、ユーザーの選択は保持され、上部ボタンの「デフォルト」の選択になります。私の意見では、これは正しい動作であり、OmniGraffleも同様です。
  • 上記の KatDNA と同様に、デスクトップ(マウス)を使用するように設計していることを確認してください。インターフェースはタッチすると必然的に少し異なります(ジェスチャーインターフェースでは長いタッチも許容されるため、複雑さが増しています)

OmniGraffle ToolsOmniGraffle Dropdown

3
Daniel Newman

これについての私の最初の考え:
最初にオプションを非表示にして、ボタンをクリックした後にのみ表示する必要があるのですか?これは、初めてのユーザーにとっては驚きです。

ボタンに記号[a/b/c/d]の上下にプラス記号とマイナス記号を含めることができ、UIロジックがユーザーから非表示になっていると、より直感的になります。おそらく、必要なクリック数も減らすでしょう。

2
Kris