web-dev-qa-db-ja.com

「キャンセル」ボタンと「確認」ボタンのサイズを同じにする必要があるのはなぜですか?

多くのUIフレームワークは、2つの異なるタイプのボタンを提供します。1)最初のボタン:一種の確認ボタン2)2番目のボタン:「キャンセル」ボタンとして使用

2つのボタンのUIは異なる場合があります。色、背景、境界線などが異なります。キャンセルボタンがパディングと高さはありますが、背景色は透明です。

私の質問は次のとおりです。なぜ2つのボタンはサイズの点で一貫しているのですか?キャンセルボタンのサイズを変更するのは悪いアプローチですか?同じサイズのプロは何ですか?

4
MrDevel

次の2つの理由により、同じサイズを維持することができます。

  • サイズが異なるとコントラストが作成され、視覚的な混乱が生じます。
  • 仮想垂直軸の周りに同じサイズのボタンを配置すると、対称性が生まれます。対称性は、より心地よく、形式的で安定していると見なされます。

ただし、より重要な設計目標がある場合、つまりユーザーの注意を引く、スペースの制限などがある場合は、さまざまなサイズを使用できます。

5
DesignerAnalyst

ユーザーの観点から重要性が同じであるシナリオの最後にある2つの選択肢としてのキャンセルと確認。 (サイズまたは色を使用して)2つのボタンのいずれかをより見やすくする場合は、その決定に影響を与えています。実際にユーザーの決定に影響を与えたい場合とそうでない場合があります。彼の意思決定に影響を与えるつもりなら、2つのボタンの1つを大きくするか、より目に見えるようにすることができます。

次に、@ DesignerAnalystが対処したことを検討する2つ目の側面があります。ユーザーの意思決定に影響を与えることを決定した場合は、さまざまなサイズよりもさまざまな色のコントラストを使用する方がよいでしょう。

これがあなたの質問に答えることを願っています。

2
Salman Ehsan

破壊的な行動から離れて焦点を当てたいだけだと思います。 [キャンセル]または[削除]ボタンのサイズを小さくしたり、焦点を絞ったりすることで、有害な影響を与える偶発的なアクションの可能性が低くなります。

0
Andrew H

キャンセルと確認は通常、たまたま同じサイズのボタンがあります。同じサイズのプライマリボタンとセカンダリボタンをサポートするUXの原則は実際にはありません

実際、主要なアクションを強調するために、大きな確認ボタンが推奨されます。これが、Webでのキャンセルと取り消しの多くのアクションがリンク(例:UX.SEの回答投稿フォーム)としてスタイル設定され、主要なアクションに重みを与える理由です。

@DasBesto https://uxmag.com/articles/visual-balance-and-weight-allocation-for-usability で参照されている記事から、視覚的な重みの詳細を読むことができます。

それでは、キャンセルボタンと確認ボタンが通常同じサイズであるのはなぜですか?

  1. 「キャンセル」と「確認」という言葉の長さは非常に似ています。

デフォルトでは、ボタンの長さはコンテンツの長さによって決まります。 [キャンセル]と[確認]は長さが非常に似ているため、同じようなサイズのボタンが表示されます。

  1. タッチスクリーンのボタンは大きくする必要があります。

モバイルデバイスでは、大きなタップ可能なボタンが必要です。モーダルでは、タップを容易にするために、ボタンを幅全体に広げます。キャンセルと確認は、両方のボタンを簡単にタップできるように、妥協点と同じサイズになっています。色も視覚的な重みを提供するため、これは問題ありません。 [確認]ボタンの色が[キャンセル]ボタンよりも目立つようになっている限り、2つのボタンを同じサイズにすることはそれほど大きな問題ではありません。

0
nightning