アイコンとテキストを含むボタンVS。アイコンを含むボタンとその下にテキスト
Product VideoボタンとTry This Ring Onボタンを必要とするeコマースの製品ページをデザインしています。
私はいくつかの異なる方法を試しましたが、そのためのベストプラクティスを調査しましたが、正確な答えは見つかりませんでした。
1つのオプションでは、アイコンとテキストを大きな四角形で表示しますが、これは画面の多くの領域を占有します。次のオプションでは、テキストの上にあるアイコンだけが表示されますが、これらは空間に浮かんでいるようです。最後のオプションでは、アイコンが円形ボタンに表示され、その下にテキストが表示されます。
ここに行くのに最適なルートはわかりません。アイコンとテキストが同じボタン内にあることは簡単に認識できることは知っていますが、iOSや他の製品には、説明テキストがすぐ下にあるボタンがあることも知っています。
これを実行するための最良の方法を探しています。
次の理由から、後者を選択します。
- 円は一般に、丸い長方形やアイコンよりも、フラットなインターフェースのボタンであることを示しています。
- 角丸四角形は、コンテンツ領域としてよく使用されます。
- 下の画像を参照してください。
- ラベルはボタンに十分に近く、ユーザーがラベルがボタンに属していることを理解できます。
- ラベルをボタンにさらに近づけると、これがより効果的になります。
デザインにある程度の柔軟性がある場合、ボタンにドロップシャドウを適用すると、それがボタンであることをさらに表現できます。
Alan Cooperが About Face で言及しているように、フラットなデザインの主な批判は、柔軟性の主な指標の1つである影を削除することです。
それとは別に、私は後者を使いやすいデザインだと思います。
ボタンを画像の外に移動する必要があると思います。以下の画像を検討してください。例をワイヤーフレームに分解すると、画像にボタンが表示されます（左）。画像の下にあるボタンを動かしてみてください（右）。
これにより、ユーザーインターフェイスのバランスが向上します。
さて、あなたの質問について。 2つのプロパティがあることを確認してください。
- ボタンのように見える必要があります
- ラベルとアイコンを使用する
アイコンに対するユーザーの理解は、以前の経験に基づいています。ほとんどのアイコンには標準的な使用法がないため、テキストラベルは意味を伝え、あいまいさを減らすために必要です。
出典： アイコンの使いやすさ
設計がアフォーダンスをどのように伝えるかについて考えます。ユーザーは要素をボタンとしてどのように理解しますか？形状と色を使用して、要素をボタンのように見せます。
出典： Button UX Design
これらのボックスにチェックマークを付けるには、ラベル（ポイント1）を設定し、アイコンとラベルに色（濃い赤、ポイント2）を付け、ストロークを追加します。
私は、あなたの製品のブランディングと一緒に行くと思いますが、ボタンのラベルと色があることを確認してください。 3つすべてが良好です。