2

数字の小さなリスト[1..20]が欲しいのですが、ユーザーに選択を促すためにどのようなコントロールをアドバイスしますか。

NumericUpDownコントロールについて考えていましたが、WebFormには存在せず、さらに悪いことに、Pylonsアプリケーション(Pythonフレームワーク)にデプロイしています。

ドロップダウンコントロールで十分だと思いますか?どういうわけか、NumericUpDownコントロールは、ユーザーの観点からははるかに直感的で使いやすいと感じています。

SOコミュニティの意見を気に入って、おそらくベストプラクティスについてアドバイスします。

本当にありがとう!

編集:私がYUIライブラリとwebhelpersライブラリを使用していることを言及するのを忘れており、私のわずかな知識の限りでは、numericupdownと同等の機能を備えたそのようなコントロールはありません

4

4 に答える 4

5

ユーザーが主にキーボードを操作している場合は、制限をテストする通常の編集ボックスを検討してください。下矢印を押して他の番号を選択するよりもはるかに簡単です。

それがマウスベースであり、余裕がある場合は、ボタンまたはラジオセットのグリッドがすばやく表示されます。

キーボードベースの場合、Jakob NielsenはAlertboxの記事「ドロップダウンメニュー:控えめに使用」に次の注意事項を書いています。

避けるべき設計

ドロップダウンメニューには利点があります。まず、画面スペースを節約します。また、合法的な選択しか示さないため、ユーザーが誤ったデータを入力するのを防ぎます。最後に、これらは標準のウィジェットであるため(不快なウィジェットであっても)、ユーザーはドロップダウンメニューに遭遇したときにその対処方法を知っています。

これらの利点にもかかわらず、デザイナーがドロップダウンを使用する頻度を減らすと、Webの使いやすさが向上します。そのために、避けるべき設計の例を次に示します。

  • 米国の郵送先住所などの州の略語のメニュー。スクロールするドロップダウンメニューから状態を選択するよりも、ユーザーが「NY」と入力する方がはるかに高速です。オプションが制限されているフィールドへの自由形式の入力には、バックエンドでのデータ検証が必要ですが、使いやすさの観点からは、多くの場合、これが最善の方法です。(これは、状態のドロップダウンを含むチェックアウトフォームで多くのエラーが発生したため、eコマースのユーザビリティに関するガイドライン#178です。)

  • 生年月日など、ユーザーによく知られているデータのメニュー。次の例に示すように、このような情報はユーザーの指に組み込まれていることが多く、メニューからこのようなオプションを選択する必要があると、情報を入力するための標準的なパラダイムが破られ、ユーザーの作業が増える可能性があります。

于 2009-08-06T20:09:00.237 に答える
0

ドロップダウンは細かく、小さい範囲の数値であり、範囲の両端にある数値にすばやくアクセスできます。ただし、ユーザーはファイアバグなどを使用してドロップダウンの選択した値を変更できるため、検証を使用して、提供された数値が範囲内にあることを確認してください。

于 2009-08-06T19:52:12.523 に答える
0

親切な返信をありがとう。

いくつかのユーザビリティテストから、私はそれを理解します

  1. NumericUpDownコントロール(別名NumberSpinner)は、1〜100などの狭い範囲内の数値を選択するのに最適です。

  2. 検証済みのテキストボックスは、大量に入力する場合に適しています

  3. ドロップダウンメニューは、ドロップダウンの長さのために、たとえば1〜10などの小さい数値範囲にのみ適している場合があります(ネットブックユーザー?携帯電話ユーザー)

  4. ラジオボタンのグリッドは、ユーザーが自分の番号を選択するために画面の長さ全体をスキャンする必要があるため、ドロップダウンメニューほど良くありません

Firebugを使用した数値の変更を防ぐための検証についての彼のヒントにダミアンに帽子をかぶっています。

于 2009-08-13T16:10:24.997 に答える
0

NumericUpDownスタイルを好む場合は、javascriptを使用して簡単なバージョンを簡単に作成できます。私はjQueryでそれを行ったので、YUIでそれを行うことについて具体的に説明することはできませんが、一般的に、これが私が実装したものです。デフォルト値が事前設定され、読み取り専用に設定された標準のテキストボックスを作成します。上下のボタンを追加して、好きなようにスタイルを設定します(ボックスの左側で下、右側で上にdivを使用しました)。各ボタンセットにクリックイベントを追加して、テキストボックスの値を増減します。スクリプトでは、値の範囲を制限しますが、入力を検証して、前にアドバイスしたように変更されていないことを確認します。私は確かにこれについての専門家ではないので、それを行うためのより簡単な方法があるかもしれません。

于 2009-10-07T19:37:15.267 に答える