2 回連続してアクティベーションした後の応答を確認する
ネットワークが遅いときにボタンを押し、もう一度押します。処理ステータスに十分早めに応答し、重複した送信を避け、一般的な単語ではなくアクションの結果を示すラベルを使用します。
ボタン デザインシステム
アクティベーション後のアクションと応答を明確にします。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
進行中の変更を保存する
処理中に「変更を保存」ボタンが「保存中…」に変わります。完了すると、確認が表示され、編集を続行できるようになります。
バリエーションと利用場面
状況に応じた次元
モバイル上のフォーム、ツールバー、アクションには明確なサイズ スケールを使用します。
ラベルを長くしてフォント サイズを大きくしてみてください。ボタンはレイアウトからはみ出さずタッチエリアを確保します。
例 「注文を確認する」ボタンはモバイルでは大きく表示されます。ツールバーのフィルターボタン。
インタラクションステータス
デフォルトでは、ホバー、フォーカス、無効、および読み込みには、各色とは独立した独自のマーキングが必要です。
一度送信し、待っている間にもう一度クリックします。タスクは重複せず、フォーカスは引き続き表示されます。
例 リクエストの処理中、ボタンは「保存中...」に切り替わります。
デフォルト
選択中
入力中
利用できません
ボタン内のアイコン
アイコンはラベルの意味をサポートします。このボタンには、ユーザー名と必要な場合の提案が必要なアイコンのみがあります。
スクリーン リーダーでボタン名を読み上げ、アイコンを知らない人に試してもらいます。
例 ゴミ箱ボタンには、単なる「削除」ではなく、「下書きを削除」という aria-label が付いています。
アクションレベル
一貫したシステムで、一次行為、二次行為、危険な行為を区別します。
2 つのアクションを並べて配置します。ユーザーは、削除の主な手順と結果を理解する必要があります。
例 メインボタンを使用して「変更を保存」します。 「キャンセル」は軽いボタンを使用します。