web-dev-qa-db-ja.com

アプリアイコンはフチなしまたはボタン上にありますか?

アプリでは、アイコンを使用するときに、ボタン上に配置したり、アイコンをボーダレスにしたりできます。ボタンの上に置くとアフォーダンスが良くなると思いますが、多くの評判の良い企業がボーダレスなルートを選択しているようです。

UXの観点から、各アプローチの長所と短所は何ですか?

Paypal screenOKCupid screen

10
JohnGB

私にとって、特にタッチインターフェイスを備えたアプリでは、境界線は、タッチ/クリックしてアクションをトリガーするために使用できる領域を定義する明確な目的を果たします。

ピンクの矢筒アイコンを取りなさい。その境界がないと、実際のタッチ領域が大きい場合でも、そのアイコンの見かけのタッチ領域は小さくなり、ユーザーが指を置いて小さなアイコン領域に当たらないようにしようとすると、一時停止する可能性があります。実際に存在します。

もちろん、これは本当にあなたのアイコンが実際に薄いか小さい場合にのみ問題になり始め、そのため小さな領域しかカバーしません。そして、そのようなすべての場合において、境界線/背景がとにかく非常に微妙なものでありえない理由はありません。

5
Kzqai

それは明らかにアイコン間にあるスペースに依存します。たとえば、Paypalアプリでは、たくさんのスペースを備えたダッシュボードがあるため、ボーダーレスのアイコンを使用できます。そのため、ユーザーは間違いなく任意のアイコンをタップできます。

ローカルアプリでは、すべてのアイコンは小さなスペースで乱雑なので、ボタンまたはいくつかのアイコンが必要ですborders各アイコンのタッチ領域間の明確な分離を表します。

また、プラットフォームによって提供されるガイドラインにも依存します。たとえば。 Android ICSの新しいガイドライン。境界線内にアイコンが表示されることはありません。 enter image description here

2
carora3

私の愚見で、

平らなボタンや縁取りされたボタンは、ボタン間のタップ領域や空白の問題ではありません。そもそも何かがボタンかどうかをユーザーが理解できるかどうかということは、基本的な問題だと思います。

ご覧のとおり、これまでのWebおよびデスクトップアプリケーションでの従来のインタラクションケースには通常マウスが含まれていたため、タッチインターフェイスには適用されない可能性があったため、ホバーしました。 UI要素にカーソルを合わせることが可能な場合、要素はさまざまな方法で応答して、「私はクリック可能です」と言うか、アクションのヒントをツールチップに提供できます。モバイルデバイスでは、それは試行錯誤です。あなたは物事をタップし、彼らが応答した場合、彼らは何かをしていることを学びます。縁取りやエンボス加工されたものはボタン(ほとんどの場合)として知られているため、ユーザーは何かに触れる前に対話シナリオを作成できます。

最後に、ボーダーされていないボタンは「お金を見せてください」のように、ボーダーされていないボタンはより説明的な行動を促すフレーズが確実に必要なため、それは実際には何らかの形で空白に関係している可能性があります。

1
Thanos