ラジオボタンがラベルの前にあるのはなぜですか？
ラジオボタンは常にラベルの前にあり、逆ではありません。
これには理由がありますか？
ラジオボタンを選択する前に、ユーザーは最初にラベルを読みませんか？
これはアフォーダンスと関係がありますか？
より使いやすいパターンはどれですか？
純粋なユーザーの観点から、そうする理由は2つあります。
1.ラジオボタンが通知ポイントを兼ねている
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このリストの左側のバージョンはリストのように見えるため、はるかに整理されたように見えますが、右側には3行のテキストがあり、最後にボタンがあります。
例の画像では、これは問題ではありません。すべての選択肢を独自の青いボックスで強調表示し、それによって他の方法でそれらを視覚的に分離します。
2.間隔と空白
上記のモックアップはすでに問題を少し示しています。オプションがテキストごとに長くない場合、右揃えのラジオボタンは、それらが表すオプションからかなり離れた位置に配置される可能性があります。 UI要素がオプションよりはるかに大きい場合、これはかなり悪化します。要素の幅を反映するために境界ボックスを使用しましたが、他に配置するUI要素がないか、全体の幅が何か他のものによって決定されている可能性があります。
たとえば、ボックスの上の彼をポートレートモードで使用するアプリと考えた場合、電話を90度回転させると次のようになります。
一番上のものはほとんど影響を受けません。余分な空白は美しくないかもしれませんが、既存の空白に追加されるだけで、左エッジが不規則であるために特に不自然に見えないので、ひどくはありません。
真ん中のものは、テキストの前後に空白があり、ボタンはボックスの中央近くのどこかに配置されていません。
下の方は、ボタンとテキストの間の視覚的なつながりが欠けていると思います。他のガイドラインがなければ、これはひどいです。
ここで重要なのは、テキストはいずれにしても左揃えであるため、左揃えのものの列を1列追加しても、それほど変化しないことです。不揃いなEdgeに位置合わせされた列を追加すると奇妙に見える場合があり、次の位置合わせされた列（右の境界）に追加すると、位置がずれすぎる場合があります。
他のUI要素でも機能する理由
自分の電話のチェックボックスとスイッチが設定で右揃えになっていることを思い出しました（ただし、ラジオボタンは除きます！）。ここでの主な違いは、設定がUIの別の部分（それらの間の細い線）によって明確に分離されていることです。この行は、テキストとスイッチの間の目印にもなります。ラジオボタン配列の2つのオプションの間に線を引くと、それらを視覚的に別のオプションから切り離す場合があることに注意してください。