ボタンの順序について心配する必要はありません。 Webアプリケーションの場合は、代わりにこれを実行してください

(2019年6月4日)

つまり、Webアプリケーションを設計しているということです。ボタンの順序はどうあるべきですか?ボタンの順序を決定するためのガイドラインを次に示します。これらの場合を除いて、以下の内容に従うかどうかは問題ではありません。

まず、すべて同じページにいるように、ボタンをプライマリとセカンダリに分類しましょう。ほとんどの場合、プライマリアクションは保存や送信などのポジティブアクションであり、セカンダリアクションはキャンセルや削除などのネガティブアクションです。

プラットフォームガイドラインに従う

デスクトップを構築している場合モバイルアプリケーションの場合、ボタンのボタンの順序に対する答えは簡単です。プラットフォームのガイドラインに従ってください。

PCの場合、これは一次アクションの後に二次アクションが続くことを意味します。

Macの場合、これはセカンダリアクションの後にプライマリアクションが続くことを意味します。

Androidの場合、これはセカンダリアクションの後にプライマリアクションが続くことを意味します。

それは簡単でした。しかし、Webアプリケーションのボタンの順序はどのようになっていますか?

Webアプリケーションのボタンの順序

単一のプラットフォームのユーザーにサービスを提供するWebアプリケーションを設計している場合、それは簡単なことではありません-そのプラットフォームの規則に再び従ってください。

そうでない場合、物事はもう少し複雑になります。ユーザーはデスクトップ、タブレット、携帯電話を使用します。 iPhoneまたはAndroidを使用するPCユーザーと、AndroidよりもiPhoneを使用するMacユーザーを含めることができます。はい、iOS、Android、OSXからWindowsへの市場シェアは現在約60〜40ですが、それは60%のユーザー向けに最適化し、残りの40%向けには最適化しないという意味ではありません。ユーザーの100%に最適化してみませんか?

代わりにこれを行う場合、ボタンの順序は重要ではありません-形状とサイズが対照的なボタン

100%に最適化できますボタンの順序にまったく焦点を当てないことで、ユーザーに。先に進んで、実際に好きな順序を選択できます。 代わりに、色の寸法だけでなく、形状やサイズも視覚的なコントラストに焦点を合わせます。

通常のボタンとしてのプライマリアクションと、単なるボタンとしてのセカンダリアクションがある場合テキスト(下線はオプションですが、このスタイルを製品の所有者に販売した経験では、より良い感じがします)、ユーザーがプライマリボタンとセカンダリボタンの違いに簡単に気付くのに十分なコントラストを効果的に作成できます。

どちらも同じ形とサイズで、色だけが異なる通常のボタンとは異なり、混乱します。以下に、両方の注文の例を示します。どちらも、ユーザーがプライマリアクションとセカンダリアクションを区別できるようにするのに等しく効果的です。

通常のボタンを形状とサイズの対照的なボタンに変換する方法

デザインシステムを使用している場合は、プライマリおよびセカンダリアプリケーションボタンを通常のボタンから更新します(それらが互いに隣接して配置され、極が離れていない場合)対照的なボタンの形状とサイズは、まったく難しくありません。また、ポジショニングを気にすることなく更新できるため、製品の所有者やエンタープライズデザインシステム評議会に簡単に販売できるはずです。 Webを構築している場合は、CSSの更新についても同じことが言えます。システム内のボタンを、通常のボタンから形状やサイズの対照的なボタンに、何も心配することなく実質的に置き換えることができます。

  1. これらのペアのいずれかが元のボタンであるとしましょう。

2。セカンダリボタンのテキストの色を変更します。

3。それらを隣り合わせに移動して、互いに接触させます。

3。セカンダリボタンの背景形状を削除します

4。オプションですが、推奨されます。 2番目のボタンのテキストに下線を引きます。

お読みいただきありがとうございます。

お気軽にご連絡いただくか、接続を維持してください LinkedIn および Twitter

UXの詳細を読み、UXリソースをダウンロードして、日常のUXジョブで使用できるすばらしい見積もりを入手してください。

コーンツリー-ユーザーリサーチ

デザイン および UXの引用

そして、この記事がお役に立てば、手をたたいてください! 👏

画像クレジット

元々は https://www.conetrees.com 2019年6月4日。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です