web-dev-qa-db-ja.com

大きなボタンは使いやすさを向上させ、デザインとどのように対応しますか? [場合]

開発者がさまざまな解像度でCSSを理解して構築するのに役立つスタイルガイドを取り入れようとしています。これらを読んだ後:

  1. https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e (ニックバビッチ)
  2. https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632 (8pt grid system)
  3. https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
  4. https://developer.Apple.com/design/tips/
  5. Bootstrap、Foundation、iOS、マテリアルデザインのガイドライン

1920x1080(デスクトップ)以上の大きなボタンは使いやすさを向上させ、同時にデザインを台無しにしたりデザインに適合させたりするのかと疑問に思いました。このトピックに関する標準のルール/研究はありますか、それとも特定のシナリオにのみ適用されますか?

[CASE]私たちのケースは、40以上の40歳以上のビジネスマンが車両をリースしている自動車ディーラーのウェブサイトです。一方、私たちは若いグループも引き付けるサイトを構築したいので、視力の低下は要因になりません。 最後に、上の質問に行きます-それは使いやすさの点でデザインを改善しますか?

(赤いフレームはフルHDビューポートです)

buttons dimension

buttons compared

4
psoiree

ボタンが大きい場合、ユーザーはボタンをより速く選択できるようになり、使いやすさが向上します

これは実際には法律です! フィッツの法則 は、ターゲットに移動して選択するのにかかる時間を正確に予測できる数学モデルを提供します。 UXの実務者はもともと物理的な世界での動きのために開発されましたが、マウスカーソルやその他のポインターを使用して、グラフィカルユーザーインターフェイスにうまく適用できます。

enter image description here

基本的に、フィッツの法則は次のように述べています:

ターゲットを取得する時間は、ターゲットまでの距離とサイズの関数です。

  • マウスカーソルとターゲットボタンの間の距離が大きいほど、ボタンが選択されるまでの時間が長くなります。

  • ターゲットボタンのサイズが小さいほど、選択が遅くなります。

これは基本的にクリック領域が大きい=選択時間が速いことを意味します。ただし、画面の半分を覆うGorillaボタンを使用したくはありません。

アドバイス:より高い画面解像度ではより大きなボタンサイズを使用してください

高解像度(> = 1080p)では、ボタンとUI要素が小さく表示されます。したがって、それらを選択する時間と労力が長くなり、使いやすさが低下します。したがって、画面解像度を高くするには、ボタンやその他のコントロールのサイズを大きくすることをお勧めします。

4

1920x1080(デスクトップ)以上でより大きなボタンを使用して使いやすさを向上させる

クリックする領域が大きい->使いやすさの向上

同時に、それらを台無しにするか、デザインに適合させるのですか?

見た目は美しくなく、重くて遅いように見えます。フェラーリのウェブサイトでは大きな太いボタンを使用しませんが、SUVのウェブサイトに関しては、それに合うかもしれません。

ただ質問:あなたはそれをテストしましたか?なぜ40歳の男性が20pxボタンの操作に問題があると思いますか?

一方、タップに関しては、40pxのタップ可能な領域が推奨されます。

1