フラットタイルに「クリック可能性」を表示する
私は現在、精通していないオーディエンスがいるeコマースのチェックアウトを再検討しています。ラジオ、チェックボックス、ボタンなどの実用的な要素がないと、これらの要素が選択可能であることを視聴者が目にすることはありません。
以下に、ラジオが接続された例の1つを示しますが、正直なところ、それが良いとは思いません。
クリック可能と認識されるようにするタイルへの優れた追加を見たことがありますか？ウェブサイト全体がフラットスタイルの方向に動いているため、デザインをスキューモーフィックに変更することはできません。
これは技術に詳しくない人を対象としているので、できるだけ明確にすることをお勧めします。添付の提案を参照してください。
いくつかの注意事項：
1）すべてのカードでこの「このオプションを選択してください」バーを永続化するか、「ホバー」に移動させることができます。ホバーするのが良い考えですが、その場合は最初にホバーする必要があります。したがって、状況に応じて決定してください。
2）選択時に、選択したタイルを強調表示して、ユーザーが行ったタイルを明確に示すことができます。
クリック可能な要素を明確にするために、1つのユニバーサルカラー（およびできれば他のスタイルの機能）を使用します。
あなたの例では、[送信]ボタンは黄色なので、クリック可能なタイルの周りに黄色の境界線を追加します。追加または代替のフェイルセーフは、タイルの見出しに黄色を使用するか、[送信]ボタンのように、背景が黄色の黒を使用することです。
色は視覚的特徴の中で最も顕著です。色を適切に使用すると、古典的にユーザーを条件付けして、特定の色を特定の結果または分類に関連付けることができます。道路標識について考えます。
- 禁止
- 注意
- 一時的
- 距離
- 制限速度
各カテゴリには独自の主要な色があります。偶然ではありません。ボタンがクリック可能であることを伝えるために現在黄色を使用しているので、そのスキーマを使用してください。
ユーザーがアイテムを1つだけ選択している場合は、ここで正しい選択がすでに行われています。
単一のアイテムを選択
単一のアイテムは、それをクリックするか、タッチするか、フォーカスがあるときにオブジェクトバーを押すことで選択できます（オブジェクト選択）。インターフェイスが複数のアイテムの選択をサポートしている場合、アイテムの横にチェックボックスが表示されます。したがって、別の方法として、このチェックボックスをオンにして項目を選択することもできます（選択を切り替え）。どちらの場合も、アイテムの周りの強力な視覚マーカーがその選択を示します。さらに、アイテムの詳細を表示して有効にしたビューはすぐに更新され、選択したアイテムに関する追加情報が表示されます。
ただし、ユーザーが複数のアイテムを選択することになっている場合は、チェックボックスが必要です。
複数のアイテムを選択
複数のアイテムを選択するには、すべてのアイテムが選択されるまで、チェックボックスを使用して単一のアイテムを繰り返し選択します（選択を切り替えます）。チェックボックスを使用すると、すでに選択されているすべてのアイテムが選択されたままになり、新しく選択されたアイテムは選択されたアイテムのセットに追加されるだけです。
出典： アイテムのフォーカス、選択、開始