Webサイト全体のすべてのボタンを同じサイズにする必要がありますか？
機能ごとにボタンサイズが異なるWebアプリケーションを設計しています。
たとえば、ログインページには全幅ボタンがあります。
都市情報を編集するための小さな編集ボタン：
また、保存/キャンセルボタンは、編集ボタンより少し大きくなります。
アプリケーション全体で同じボタンサイズに従う必要がありますか？はいの場合、どのようにユーザーにメリットがありますか？
サイト全体で同じボタンサイズを維持する必要はありません。同様の機能ボタンには同じサイズが必要な場合があります。
ボタンの同じサイズの考え方は、ユーザーが最初の外観で理解できるように類似性を維持することです。ただし、シナリオでは、前述のとおり、この場合は同じサイズを維持する必要はありません。
あなたはそのような調和を維持するためにいくつかのことをすることができます。
- 可能な場合は、左右の位置で同じパディングを維持します（ボタンの幅）。
- 3つ以上の異なるボタンサイズ設定セットを維持し、要件に応じて（ボタンの高さ）に使用します。
あなたはそのようないくつかのスタイルガイドに従うことができます。
情報階層はボタンにも適用されます
可変ボタンサイズは、アクション階層を強化する優れた方法です。すべてのアクションが同じサイズのボタンによってトリガーされた場合、UIが混乱する可能性があります。ユーザーは、80〜90％の時間で自分のニーズに応えるプライマリアクションとセカンダリアクションを見つけるのに苦労します。
ルールを作成し、それに従ってください
階層化されたボタンスタイルの論理的で計画的なシステムが必要です。最下位レベルでは、テキストの色が異なる場合があります。せいぜい、大きなテキストと大きなパディングを持つ明るい色のボタンがあるかもしれません。各スタイルが適合する場所を見つけ出し、エクスペリエンス全体で一貫して使用します。
これは、私が作業しているアプリの例で、主ボタンと副ボタン、およびナビゲーションに戻るための最下層のアクションを示しています。
また、「クリティカルパス」アクション、基本的なテキストリンク、および列の幅全体を使用する小さなモーダルの一部のアクション用の大きなボタンもあります。
モバイルワークフローの別の例を次に示します（クライアントのために一般化されています）。1つのビューで複数のボタンタイプを確認できます。これは、残念ながらそれ以上減らすことができない要素がたくさんある密なUIです。ここで同じサイズのボタンを使用すると、ユーザーにとって、常に最も重要なアクションが何であるかを理解するのに不必要な負担がかかります。
