web-dev-qa-db-ja.com

左または右にボタンを送信しますか?

送信ボタンをどこに配置するか、左側または右側に困惑しています。調査の結果、多くのサイトでダイアログボックスの右下とフォームの左下にボタンが配置されていることがわかりました。

それは理にかなっています:対話ボックスでは、それはファイナリティを示しているようであり、左右の読者のためのウィンドウのエンドポイントにあります。フォームでは、ウィンドウのサイズが変更された場合、右下がフォームの他の部分とは異なる位置になる可能性があります。

慣例のようですが、次の質問でこの特定の現象について話している人や、そこで参照されている記事は見当たりません。

OK /キャンセルボタンを右揃えにするか、中央揃えにするか

OK /左/右でキャンセルしますか?

http://www.lukew.com/resources/articles/psactions.asp

では、このレベルのボタン位置の最適化は、ボタンの配置に不整合が生じる場合に価値がありますか?これは良い方法ですか?

52
Taj Moore

ユーザーの期待に応えるために、ユーザーがボタンを見つけることを期待する場所にボタンを配置するのが最善であると判断しましたユーザーが使用しているフォームまたはダイアログのコンテキストで =およびウィンドウサイズに関して

Formsは左揃えになる傾向がありますが、ブラウザウィンドウは大量の空白を残して大きなモニターを埋めることができます(特にフルスクリーンモードの場合)。ユーザーの目はウィンドウの左側から離れないため、ボタンを左下に配置します。これは、フィールドの上のフィールド名を使用するフォームでは特に重要です。ほとんどのフィールドは、(名前の右側のフィールドとは対照的に)フォーム上で同じ高さになります。

Small Dialogue&Modal Windowsは固定幅であり、小さい傾向があります。ほとんどは単純なフレーズや質問を含み、右から左に読みます。右下にボタンがあることは、目にとって最も進歩的な位置と最終的な休息場所の両方のように感じます。長いフォームを含めるのに十分な大きさのモーダルウィンドウがあった場合、フォームの最初の原則に従うことになります。

最後に、私たちのヒューリスティックはこれです:

  1. 大きなウィンドウとフォーム左下のボタンを取得します。
  2. 小さなウィンドウとダイアログ右下のボタンを取得します。

Ux.stackexchange.comのボタンに注意してください。

  • 回答を投稿長いフォームの左下にある左下のボタン

  • コメントを追加ボタンを小さなフィールドの右側に追加


2015年2月26日更新

モバイルファーストレスポンシブは新しい土地の法則であるため、ボタンの配置はコンテキストとユーザーの期待に基づいてさらに異なります。時々、それも真ん中にあります!

59
Taj Moore

インターネットが登場する前の10年間、WindowsとMacintoshがありました。

Windows標準では、左側に[OK](またはアクションボタンが何であれ)が配置されていました。 Macintoshの標準では、右側に[OK](またはアクションボタン)を配置していました。

分割された結果、標準のWebデザイナーは何をすべきかについて混乱しました。それらの多くはOSでのみ使用しており、標準が異なることを認識していませんでした。

どれが「最良」であるかについての愚かな議論はたくさんありますが、実際のデータに裏付けされたものはありません。これは、左側通行や右側通行のようなものです。

標準を1つ選び、それに固執します。ユーザーが主にMacまたは主にWindowsであることがわかっている場合、またはブラウザーエージェントを嗅ぎつけて把握する力がある場合は、ユーザーの期待と一致する決定を下すことができます。

17
Joel Spolsky

私の専門家の意見では、すべての場合において送信ボタンを右に配置することです。私の考えは、それは継続アクションであるということです。別のページ/アクションに進み、「ページをめくる」という状態になっています。 LtRリーディング言語では、前方に移動するためのアクションを右側に配置し、後方に移動するためのアクションを左側に配置します。 (偶発的なクリックを減らすために、2つのボタンの間に適度なスペースを入れます)。

これは、そのようなすべてのアクションのアプリケーション全体で同じです。画像のスライドショー:右側が次のスライドボタン、左側が前のボタン。製品の次のページ:右側が次のボタン、左側が前のボタン。

私はここでいくつかの癖を理解しています。フォーム内では、タブオーダーは[確認]オプションの前にキャンセル(または否定アクション)に到達します。また、ネガティブ/リバースオプションがないセクションでは、右側に唯一のボタンがあるため、見逃される可能性がありますが、OPポストおよびこの質問スレッドのリンクで指摘されているように、実際には正しい答えではありません。一貫性を保つことは重要です。サイト/アプリの他の場所では継続オプションが右側にあるので、送信/ OKなどのボタンもそのままにします。

14
JonW

これは小さな(参加者64人)ですが、数年前にこれについて行われた興味深い小さな調査です。 http://measuringuserexperience.com/SubmitCancel/index.htm 。彼らの結論は、「ボタンが視覚的に分離されているため、続行するアクション(たとえば、OK、保存、送信など)を右側に置くと、ユーザーの期待と一致する可能性が高くなります」ですが、明らかに欠けているのは、習慣の内訳です。参加者のOS使用状況。

7
calum_b

@Joelは歴史的な観点に関しては正しいですが、左側のOKにはもっと論理があると思います。ロジックはこれです-情報の流れは上から下、左から右です(LTR言語の場合)。このため、これがMac、Windows、Linuxのいずれであっても、重要なものは常に左側に配置します。これは、たとえばメニューにはっきりと表示されます。そして私たちはそれを使って何かをやりたい人のために私たちのソフトウェアを設計します-キャンセルするのではなく、彼らの対話をOKにします(そうでなければ-何がポイントですか?:))。したがって、OKは本質的にキャンセルよりも重要であるため、左側に表示されます。

しかし、これは単なる哲学であり、実際には、@ Joelが述べたように、それは重要ではないと思います。

また、私はWindowsの人です:)

4

具体的には、質問のフォーム部分に関連して、フォームが上から下にスキャンパスをたどるので、フォームの左側(入力は左揃え)に送信することに同意します。

通常、ワークフローでは上から下へ-左から右へ、それほどではありません。

それでは、左揃えの垂直ワークフローで、なぜ主アクションボタンを突然右揃えにするのでしょうか。 LukeW( LukeW Webフォーム )は次のように述べています:入力フィールドに垂直に揃えます。これは、ユーザーのパスを照らし、ユーザーをフォームの完成に導きます。

しかし、@ Joelが言うように(そして私たちは光栄です!:)慣習的な議論もあります-ほとんどの人が(同じOSと他の要素が与えられた場合)ボタンを片側に置くと、本当に正当な理由がない限り、それはあなたのユーザーにとって本当に良いことを示し、慣習を破らないでください。

ユーザーの期待に応えることは、どちらかを選ぶ大きな理由です-多くの場合、それよりもずっと深く考える必要があるとは思いません-そして、白黒の明快さを得るつもりはないでしょう。それが正しいか間違っているかどうか。

3
Roger Attrill

ボタンを配置するためのセットスポットはありません。それはすべて、 ユーザーの視線がどこに行くかに依存します 。 1列のフォームの場合、ユーザーの目は左側から終わります。 2列のフォームがある場合、ユーザーの目は右側から終わります。

マルチページフォームとマルチセクションフォーム もありますが、配置の背後にある理由は少し異なります。

2
caramelcake

この問題の解決策を見つけるために「閉鎖の法則」を見てみましょう。建築では、審美性を揃えて句読点を作成するためにフォームにClosureと呼ばれる用語があります。

では、ボタンはフォームで何をするのでしょうか?フォームを一時的または永続的に高度に閉じます。一時的とは、ウィザードのように、次のアイテムまたはページに移動する継続的なプロセスの手段です。

ページにクロージャが必要です。つまり、ページの粘り強さを作成するため、ボタンのRHS調整はほとんど適切に適切です。反対に、ボタンのLHS調整は、注視をより良いレベルに保つように見えるかもしれませんが、心理学的要因の観点から考えると、アクションを実行することに感情的な満足度が低くなります。

心理学、美学、デザイン理論のルールを守るRHSに投票します。

1
inkmarble

私にとってこれは論理的な順序です:

<LeftRight>

<PreviousNext>

<BackForward>

<BackDone

Go backContinue

Do nothingDo it

CancelOK

OK以外は、次のような実際のアクションに置き換える必要があります。 SaveDeleteAcceptExit または Send

置くことを主張する人々に会ったとき OK 左側に、私はいつも彼らに置くように頼みます Left 対 Right、 Previous 対 Next、および Back 対 Forward、そしてなぜ彼らがその順序でそれらを置くのかを彼らに議論させてから、彼らにその理由を議論させる OK 左側にあるはずです。

1
Ole Tange

これに対する正解や誤解はありません。歴史に関係なく、私が最も効果的に機能するのは、それぞれの状況で視覚的な平準化に敏感であることだけです。

アクションが2つしかない場合(例:保存とキャンセル)、私にとっては、(ほとんどの場合)主要なアクションである「保存」をより目立たせることが最も理にかなっています。私は通常、このボタンを左側に配置し、「キャンセル」にはボタンをまったく使用しません。むしろ、ハイパーリンクがボタンからの適切な距離をオフセットします。両方のアクションが存在し、1つは強調されています。ただし、一貫性が必要であり、設計するものがシステム全体で比較的単純な送信オプションを持っている場合にのみこれを使用する必要があります。

同様の効果は、「保存」に色付きのボタンを使用し、「キャンセル」にグレー表示(ただし、スタイルは明確にクリック可能)を使用しても実現できます。通常、2つのボタンの間に十分なコントラストが存在することを確認します(例:プライマリボタンが白抜きのテキスト付きのBG、セカンダリテキストが暗いテキスト付きの明るいボタン)-カラーブラインド/視覚障害者の支援。

その他のトリック、たとえば変更が変更されたときに保存ボタンをアクティブにするだけ、および保存可能は、編集が開始されると(注意が表示されていると仮定して)注目を集めるのに役立ちます。

1
Jon Darke

私はユーザビリティのスペシャリストが右/左の配置について考えるときに1つの大きな欠落をすると思います-彼らはアカウントにマウスを置くことを省略し、パターンを読むことだけを理由にしています: https://cogsci.stackexchange.com/questions/2056/any -research-on-right-hand-left-hand-based-preferences-when-interacting-with-an

0
drabsv