アパレルサイズを選択する最良の方法は何ですか？
オンラインアパレルストアのフィルターと製品ページを再設計しています。すべてのサイズを表示し、ラジオボタンを使用するか、ドロップダウンメニューを使用してサイズを選択する必要があると思いますか？
サイズが5〜6を超える場合は、乱雑さを減らすためにドロップダウンを使用します。
最大5つのオプションがある場合は、ラジオボタンが完全に表示され、ベストプラクティスの良い例がいくつか添付されています。
この製品は3つのサイズしかないため、ここではラジオボタンまたは視覚的に選択可能なフィールドが最適なオプションです。
ただし、シャツなどのアイテムでは、首のサイズのオプションが多数あるため、ドロップダウンの方が論理的です。ドロップダウンの利点と落とし穴を説明する NNGroup の優れた部分。
リッチラジオボタンを使用できます。
「L」サイズ選択のサンプル：
これは完全に異なるアプローチです（あなたが古典的な人ならそれを忘れてください）：
それほど最小限の最終的なタッチではありません：
これらの2つのコントロールは、ユーザーに特に異なるヒントを提供します。
- チェックボックスは、複数のサイズがフィルターで同時に許可されることを示します
- 「スクロールダウンメニュー」（ドロップダウンリスト）により、一度に1つのサイズのみがフィルターで許可されることが明確になります
ちなみに、いくつかのオプションしかなく、一度に1つのサイズのみをフィルターに含める場合は、ラジオボタンUIが有効なオプションです。ドロップダウンリストよりも優れている点は、すべてのオプションの視認性が高く、シングルクリック/タップ操作です。 （個人的に私はユーザーがほとんどのラジオボタンウィジェットを好きではないことを見つけます）
ラジオボタンは、（一般に）ドロップダウンメニューよりも使いやすくなっています。
ラジオボタンの利点は2つあります。つまり、ユーザーはすべてのオプションを一度に表示でき、ユーザーは1回クリックするだけで済みます。
ドロップダウンメニューはオプションを非表示にするだけでなく、使用するには少なくとも2回のクリックが必要です（つまり、1つはオプションを表示するため、もう1つはオプションを選択するため）。時々、ユーザーはスクロールバーをクリックしてドラッグする必要があります。
ほとんどのドロップダウンでは「フォーカスタイピング」によってオプションにスキップできるのは事実ですが、そうすることはラジオボタンのセットから選択するよりもさらに多くの労力を必要とします。ドロップダウンは、米国の州のように、オプションのセットがユーザーに予測可能な場合にのみ役立ちます。
最適なデザインは、標準のラジオボタンの縦方向の最小の最初のリストです。ユーザーがラジオボタンを認識できません。
これは、与えられたデータに基づいてオプションを選択する場合です。ここではアフォーダンスが重要な要素です。選択に関係なく（最終的にどのルートを選択するかを決定する多くのオプションがある場合を除きます。）多くのオンラインショッピングを行うユーザーは、購入の流れを認識して理解します。同様のやり取りでのユーザーエクスペリエンスは無視しないでください。残りは好みであり、簡単にスキャンして、意思決定に必要なものを特定することを目的としています。この場合、オプションが5つ未満の場合は、適切な処理が施されたボックスまたはチェックボックスを選択してください。ドロップダウンを選択する場合は、入力要素に適切にラベルを付ける限り、問題ありません。これらの指標を評価して、決定がコンバージョンに影響を与えていないことを確認してください。もしそうなら、まあ、それは私たちがやっていることです。私たちはユーザーを理解していることを確認するためにテストと反復を繰り返します。
一度に1つのサイズしか選択できない場合は、ラジオボタンまたはドロップダウンを使用します。
ラジオボタンの利点は、使用可能なすべてのオプションを一度に表示できることと、現在選択されているオプションを他のオプションとの関連で表示できることです。これは、UIが選択されていないためにユーザーの注文に関係のないオプションで混乱したくない場合にも、マイナス面になる可能性があります。
ドロップダウンにはその逆の利点と利点があります。
標準的な方法は、さまざまなサイズを表すボックスを使用することです。ユーザーは、製品ページまたはファセットナビゲーションでボックスをクリックして、サイズを選択します。
ボックスのアプローチを使用する利点は、ボックスの色を使用してサイズの可用性を示し、クロス/ストライプを使用できないサイズにできることです。
可能な場合は、ドロップダウン/チェックボックスを避けてください。ドロップボックスはオプションを隠しているため、可能な限り避けてください。ユーザーは、利用可能なオプションを確認するために何かを行う必要があります。これらは、携帯電話などのようにスペースが非常に狭い場合に最適です。チェックボックスは古くなっており、単一のオプションではなく、実際には複数のオプションに最適です。ラジオボタンは、日付が古く、タッチフレンドリーではありません。
これは、ラジオボタンや同様のソリューションよりもドロップダウンを使用したい場合の1つです。
ドロップダウンには、画面スペースを節約できるという利点と、情報を非表示にするという欠点があります。ユーザーはすべてのオプションを一目で確認し、簡単に比較して決定を下すことができません。
しかし、服のサイズの場合、ユーザーはそのような概要を必要としません。彼はすでにドロップダウンにどのような値を期待するかを知っています。彼女はドロップダウンを開く前にどちらを選択するかを知っています。したがって、すべてのサイズを一度に表示しても価値はありません。サイズには自然な順序があり、通常は10個以下の値の短いリストであるため、ドロップダウンリスト内で正しいものを長く検索する必要はありません。
ドロップダウンの潜在的な問題：
- ユーザーは使用可能なサイズの範囲を確認できません。アイテムによって大きく異なる場合は、「サイズ38〜46で利用可能」や「通常サイズとロングサイズの両方で利用可能」など、別の場所に表示することをお勧めします。
- ユーザーは現在、在庫切れのサイズを確認できません。ストレージが小さく、頻繁に在庫切れになるサイズがある場合は、ラジオボタンのようなオプションを検討してください。
- 一部の衣服は、複数の次元を持つ正確なサイズを持っているため、リストが長くなりすぎてドロップダウンにならない場合があります。たとえば、ジーンズのサイズはウエスト/長さの組み合わせで、ブラのサイズはアンダーバスト/カップの組み合わせで決まります。チェックボックス（またはチェックボックスのように機能する他のスタイルのコントロール）の2次元テーブルを使用して、そのようなアイテムを表示します。彼らはまた、最初のポイントで述べた問題に特に苦しむ可能性があります。なぜなら、メーカーはすべての組み合わせを生産しないことが多いからです（たとえば、1つのブラモデルは70Aから100Cまで、別のブラモデルは80Cから120Kまで利用可能であり、プロデューサーは時々テーブルで斜めに行くこともできるので、70Aのブラを入手できますが、Dカップは75から始まります）.
アパレルストアの商品の数量が限られている場合（近づく前に今すぐ入手してください）、数量または少なくとも在庫状況をリストするラジオスタイルのボタンをお勧めします。 http://www.unitedpixelworkers.com/ これはうまく機能します：
製品の入手可能性に関心がない場合は、ドロップダウンの方が適切な場合があります。