web-dev-qa-db-ja.com

ボタン内のアイコンの位置はユーザーに影響しますか?

私は時々ボタンのアイコン、つまりテキストの左または右のアイコンの最適な位置に少し混乱しています。最適な配置を決定する簡単な方法があるのか​​、それともアイコンを常に特定の側面に配置する必要があるのか​​と思っていました。

私が用意したこれらの例をご覧ください。

左揃え:

これは左側で明らかにより快適に見えます

shotlist button

左揃え(奇妙な感じ):

この場合、テキストの前に置くのは奇妙に感じられます。たとえば、矢印は指示であり、テキストの後に続くはずです。

continue button

右揃え:

したがって、おそらくこの方法は、この種のユースケースに適しています。しかし、アラインメントを変更することに一貫性がないと感じ、また、より多くのバリエーションを設計することを意味します。

next button

私はテキストがそれぞれ異なっていることを知っています、そして私はそれについて心配していません、それは私が取り組んでいるプロジェクトから手渡さなければならない例にすぎません

ケースバイケースでそれぞれを評価するか、または単に1つの配置に固執する必要があります。残り、それで実行しますか?

6
Chris

アコーディオンメニューをデザインしているときにも同じような状況がありました。ここに関連する article があります。

前や次などのナビゲーション項目の場合は、指し示す方向に基づいたアイコンを使用します。 (次の場合は右に配置されたアイコン、前の場合は左に配置されたアイコン)。その他の場合、左揃えのアイコンはより親しみを感じます。

6
Hakan Isik

テキストに加えてアイコンを使用している理由によって異なります。あなたが言及した例では、アイコンが含まれている理由が2つあります

  1. タスクを視覚的に表すためにアイコンが使用されています。ショートリストボタンの場合と同様です。時間の経過とともに、ユーザーはアイコンを認識し、意思決定のためのサポートテキストを必要としなくなりました。そのような場合は、アイコンを前面に配置することは理にかなっています。最終的にアイコンがユーザーに馴染んだら、アイコンが表示された瞬間にボタンを操作できるからです。

  2. アイコンはテキストにキューを追加するために使用されています。 「次へ」や「続行」などのボタンは、タスクの微妙な方向を伝えるためにアイコンを使用することがよくあります。特にモバイルでは、これらの方向記号には関連するアニメーションがあり、前進する感覚をさらに強調します。テキスト自体の後にアイコンを保持することは、ここでは重要ではないため、ここでは重要です。ポイントを説明する明白な例を挙げましょう...上向き矢印とそれに続くワードスクロールのあるボタンを想像してください。ユーザーがアクション(この場合はスクロール)が何であるかわからなくなるまで、上矢印は何の意味もありません。これがポイントを説明することを願っています

このトピックに関するより多くの議論と展望については、以下のリンクを読んでください

矢印はリンクテキストの前または後に配置する必要があります

ボタンにテキストが含まれている場合..

2
Rajmera

私にとって、それがアクションを実行することであるかフローであるかによって異なります。フローの場合、タイムラインの方向(矢印がテキストの後ろにある次のボタンと同様)に人を「ポイント」し、矢印がその前にある「戻るボタン」にしたいとします。慣例に従って。私にとって、「アクション可能な」アイコンの位置は、近接のゲシュタルトの原則に従って、ほとんどの場合、アイコンを配置して接続を確立できるように十分に近い限り、全体に影響を与えているようには見えませんアイコンはほとんど左または右に浮いているので、正面が最も近くなります。

A/Bテストを使用してユーザーとテストし、どちらか一方の使用に顕著な遅延があるかどうかを確認します。

また、一貫性に関して、必要性が本当にそれを必要とするなら、あなたはそれを壊すことが許されます。(しかし、それを別のやり方でするための言い訳を見つけようとしないでください。)

1
Xabre

はい、特に多言語アプリケーションを使用している場合は、ボタンのアイコンの位置が重要です。アラビア語を主言語とするWebアプリケーションに取り組んできたので、右から左へのカルチャまたはその逆が、アイコンの配置を含むUIのすべての側面に反映されていることが重要であることがわかります。

1
user2318536