私のクライアントの1つは、モバイルサイトで次のアコーディオンを使用しています。
どこかをタップすると、セクションが開き、ラジオボタンが選択されます。シェブロンは選択を開いたり閉じたりしますが、ラジオボタンのみを選択し、閉じるときに選択を解除しません。
これは良いUXですか?それはどういうわけか、特にスマートフォンでは、私には間違っていると感じています。
ありがとうございました。
このアプローチにはいくつかのUIの問題があります
アコーディオンのタイトルでのラジオボタンの使用:ラジオボタンまたはラジオボタングループは、 2つの値の中の単一の値または値のコレクション。すべてのアコーディオンが開かれている(完了していない)ことを強調するためのラジオボタンの使用は、ユーザーのメンタルモデルに関連付けられておらず、ユーザーがアコーディオンの異なるセクションを開いた場合、すべてのラジオボタンが選択すると、再び混乱が生じます。
アコーディオンの相互作用は、アコーディオンを展開または折りたたむタイトルのシングルクリックによって駆動されます。 2つの特徴的なアクション、つまりシェブロンを折りたたんだり展開したり、ラジオボタンをクリックしたりすると、どちらのアクションが何を実行し、両方のアクションがどのように結び付いているかが混乱します。
アコーディオンは、複数のセクションに分割された大量の情報がある場合(たとえば、FAQ)に最適です。引用するには Neilson Normanグループからのこの記事
アコーディオンの最大の利点の1つは、詳細に焦点を合わせる前にユーザーが全体像を把握できることが多く、ページが長すぎるという一般的な問題を効果的に軽減できることです。
つまり、ここでのアコーディオンの使用は、関連情報を4つの個別のステップに分割し、1つのステップで結び付けることができるため、役に立ちません(この場合、異なる支払いタイプ)
非標準の「ラジオボタン/アコーディオン」ウィジェットを利用して、支払いタイプの選択と詳細の入力を組み合わせようとしているのを確認できますが、これも私にはスムーズなユーザーエクスペリエンスのようには見えません。複数のインタラクションポイントを提供することで混乱を追加し、ユーザーに多くのことを考えさせることになります。
単純なドロップダウンメニューとプログレッシブ開示は、ユーザーの選択を簡略化するため、混乱を招く「ラジオボタンアコーディオン」を組み合わせたものよりも優れています。