3つのボタンの色の組み合わせ


13

これらの3つのボタンに最適な色の組み合わせは次のとおりです。

ここに画像の説明を入力してください

それらはすべて同じ色のままにする必要がありますか?

これらは私のオプションです:

ここに画像の説明を入力してください

ページ全体の画像

ここに画像の説明を入力してください


プライマリ対デフォルトおよびデフォルト対成功は気を散らすようです。
ダニーヴァロッド

大きなページを見て、「クリア」ボタンの意味を尋ねます。それは本当に必要なオプションですか?
DA01

回答:


52

[ Go ]ボタンは 大きくする 必要があり、主要なものであるため、すべてのコントラストが最も高くなります

[ クリア ]ボタンは二次的なアクションであり、ニュートラルなければならないため大丈夫です。

私にとって、スイッチボタンはサイズと制約の両方で存在感が強すぎます。Origin-Destinationのドロップダウンの間に配置します。このドロップダウンは、「単独で」より理にかなっています。

ここで、私にとって非常にクリーンで、この特定の目的のために使いやすさを提供する2つの同様のソリューション(私は個人的に最初のものを選択します):

ここに画像の説明を入力してください

参考までに、私はFont-Awesom eアイコンを使用しました。最初の画像のアイコンは(バージョンに応じて)icon-exchange / fa-exchangeであり、矢印はicon- arrow-left / rightおよび fa-arrow-left /です。正しい

編集- 散乱物の除去DA01のコメントに基づく):

場合はクリアボタン(へ/から)のみ2つのフィールドがクリアされます、とにかくのために必要であると思われないユーザーは、各ドロップダウンをクリックして選択を確認する必要がありますし、あなたはクリアボタンを追加する場合、これは変更されません
この場合、削除することをお勧めします。これにより、よりクリーンなインターフェイスを取得し、ユーザーが値を追加しないアクションを実行できないようにします(さらに、選択したものを意図せずに削除します)。

ここに画像の説明を入力してください


↔︎矢印も私の最初の考えでした。translate.google.comの仕組みをご覧ください:ツールチップ付きの↔︎ボタン。
200_success

クリアが本当に二次的である場合、私は同意します。一方、それが破壊的である場合(削除された作業が入力された場合)、実際には別の方法で処理する必要があると主張します。
-DA01

@ DA01最後のコメントをさらに説明してください。破壊的な場合、どのオプションが良いでしょうか?その理由は?私はあなたのPOVに本当に興味があります。
アレハンドロヴェルトリ

@rewobs私は通常、破壊的なオプションをまったく持たないことをお勧めしますが、それらはまだ多くのシステムに存在します。ボタンは習慣的にクリックされる可能性があるため、破壊的であるため、ボタンのように見えるべきではありません。多くの場合、人々はフォームに記入し、それがSUBMITであると仮定して、一番下の最も「明白な」ボタンを押します。したがって、少なくともフォームデザインでは、通常、唯一のボタン送信することをお勧めします。他のタスクがある場合は、主ボタンと比較して視覚的に異なって抑制されたものにします。
DA01

1
@ DA01説明をありがとう。さらに、質問のコメントを読んで、クリアボタンが本当に必要かどうかを尋ねましたが、とにかくユーザーがドロップダウンから再選択して値を置き換えるため、クリアボタンを追加すると不要なものが追加されます「中間」のアクション。
アレハンドロヴェルトリ

12

解決策の1つは、優先順位によってボタンを視覚的に分離することです。

通常、プライマリボタン、セカンダリボタン、場合によってはターシャリボタンや非優先アクションボタンがあります。

プライマリとセカンダリでは、通常、2つのコントラストのレベルで好みのブランド色(純粋に主観的)をお勧めします。プライマリのコントラストが高く、セカンダリのコントラストがわずかに低い。

三次ボタンは、通常は避けて、代わりにリンクなどのまったく異なるビジュアルを使用しようとします。

だから、あなたの例を与えて、コンテキストを私ができると賭けて解釈すると、私はこのようなものを提案します:

ここに画像の説明を入力してください

これは非常に簡単な例であり、コントラストがアクセシビリティガイドラインを満たし、無効になっていないことを確認する必要があります(私の場合はそうであるため、微調整が必​​要です)

更新:これを投稿しているときに、これがStackExchangeが新しい投稿を作成するときに使用するパターンであることに気付きました。SAVEボタンはプライマリ、CANCELはターシャリで、ボタンではなくリンクとして表示されます。


1

コントラストの高い(たとえば黒白)色が常に最適であり、これによりオレンジ色のオプションがなくなります。そして、マーケティングに少し加えて、ボタン、アプリケーションの面であなたのページの残りの部分に使用されるカラースキームは何ですか?しかし、私が選択しなければならなかった場合:行く:緑。スイッチ...:マリンブルー; クリア:黒白。色も好みに関連していることを覚えておいてください。

(トピック外:2つのフィールド間でアイコンラベルの付いたボタンを使用すると、切り替え用の長いラベルを削除できます)


1
UX.stackexchangeへようこそ。ハイコントラストが常に最高であるという証拠はありますか?
メイヨー

1
まあ、それはどんな文脈に対しても最良の解決策ではないかもしれませんが、高コントラストはテキストを背景から区別するので読みやすさを改善します。そうでなければ、ぼかしになります。色覚異常(最も一般的なもの:緑赤)を考慮してください:緑の背景に赤のテキスト、またはその逆は、この形式の色覚異常を検出する方法です。

1
色のさまざまな引数をリストした記事は次の

コントラストが十分に大きくなく、読みやすさが低下するポイントがあります。私は最初の文の白黒の例に過度に焦点を合わせていたと思います。読みやすさが「到達」し、「多く」してもユーザーのパフォーマンスが向上しない点があります。再び。UXへようこそ
Mayo

1

強調を示すために色の同様の色合いのコントラストを変更すると思います。どうして?(男性の12人に1人が色盲であり、女性の200人に1人が色盲です

また、システムを通過する目的のパスにユーザー誘導したいので、Goボタンを暗くします。彼らはすべてのボタンをスキャンして処理するか、暗い色や大きなサイズのようなものを使用して、最初に見えるように意図した選択肢または80%の最も一般的な選択肢に引き付け、時間を節約するというyesと言うことができます。

この記事では、最も重要なボタンをそのように見せるべきだと述べています

以下の例を参照してください

ここに画像の説明を入力してください

下の画像ほど良く見えない(私の意見では)

ここに画像の説明を入力してください

その記事では、ボタンを適切な順序に並べることにも言及しています。だから私の意見では、英語を話すユーザーは左から右に行くので、右に行くボタンを置くでしょう(したがって、彼らは自然に終了記号を右に見ます)。アラビア語ユーザーの場合は左側に配置します。それがどのように私がそれを英国の市場に配置するかです。

ここに画像の説明を入力してください

その記事の最後のトピックは、破壊的なボタンを見つけにくくすることです 。あなたのシナリオでは、あなたが行くをクリックして誤って左に逃した場合、アクションを破壊するのではなく配送場所を変更する可能性がある場合、注文をそのように切り替えます。また、破壊的なタスクが必要だと感じた場合は確認できます(つまり、本当に?)。


「英語を話すユーザーは右から左に読むため」 -ハァッか。同じ英語について話していますか?
BlueRaja-ダニーPflughoeft

編集した...おっと
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.