OKボタンの位置はどこが適切?

Question

WEBアプリで掲示板を作ったのですが、
オープンテストでボタンの位置について悩んでおります。。。

私が利用している大半のコミュニティが（掲示板のようなものが多い。）
【(左)　戻る　／　投稿　(右)】又は【(左)　修正する　／　次へ　(右)】のようにデザインされているのに慣れていたので、
何の違和感もなく【(左)　戻る　／　進む　(右)】とボタンを配置していたところ、
先輩から逆だという指摘を受けました。。。

調べてみたところ、確かに、Winユーザは「OK」ボタンは左であるということでしたが、
それはtype属性をsubmitにせざるを得ない状況の場合、という条件や、JavaScriptがそうだから、といった理由で、
本来は右の方が違和感を感じない人が多いそうです。
また、「OK」ではなく、「次へ」や、「進む」に関しては右が多いという情報もありました。

この件に関して、何か情報がありましたら、ご教示いただきたいと思います。
よろしくお願いします。

tadon555 · Accepted Answer

こんにちは。

Webを横書き本のページだとすれば、左が戻るで、右が進むで良い気がするのですが。
少なくとも自分は、そう解釈して作っています。（10年以上前から作ってますが、クライアントを含め、今まで誰からも指摘されたことはないです）

「OK」ボタンはあまり考えたことがなかったですね。難しいですね、、、Macだと「OK」は右端にあることが多いですし。（一応、昔からのMacのルールなんです。デフォルトのボタンは右端におくってのが）
多分、Winは重要なボタンを左から並べる、という性質なのではないでしょうか？
「OK」ボタンの役割が、何かにGOサインを出して先に進むということを考えれば、「進む」方向である右にくるのが自然かな、とも思います。

もしかして、あなたの先輩は、日本語のたて書き本や漫画などの感覚から、左が次ページという感覚があるのかも知れませんね。

taloo · Answer

私の感覚では送信は左や右に行くのではなく、上に行く（「アップ」ロード）なので、
ボタンの位置はタブキーで移動しやすい場所として、左側に置いています。

>>アカウント作成 >> [氏名登録] >> 完了
こういう表示があるとそれに感化されてしまい、左右に行くという感覚になります。
スタイルシートをはずしたときに表示とボタンの位置が逆転しない様に、
HTMLとスタイルシートの書き方に注意が必要ですね。

> TABで消してしまわないようにするのを優先したらいいのか、
> ページの移動の感じで違和感の無い方を優先すべきなのか。。。
たしかに悩むところです。(^^;
他のページや何かの表示とのカラミもありますし、
どちらか統一して置いた方が良いと思います。
どちらか使いやすいと思われる方で作ればいいと思いますよ。

mizuno3 · Answer

私もTABで動かすタイプなので、左にリセットがあると良く消してしまいます。
自分の会社のコンテンツでも良くやってしまうのです。

TABを使わなければ左が戻るというイメージですけどね。
tabindexをつけて置けばいいのかも知れませんね。

taloo · Answer

私が書くと全部逆になりますね。


　(1)投稿フォーム　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　　　｜
　｜　カテゴリ選択　　　　　｜
　｜　メッセージ入力欄　　｜
　ーーーーーーーーーーーーー
　[確認画面へ][編集を元に戻す]

　　　　(2)確認画面　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　｜
　｜　　　　　　　　　　　　｜
　｜　メッセージ　　　　　｜
　ーーーーーーーーーーーーー
　　[投稿する][修正する]


ご参考まで。

taloo · Answer

> ※そういえば、OK Waveは左が【進む】ボタン？？リニューアル前はどうでしたっけ？？
私が見ているブラウザでは左に「送信」ボタンとなっています。

「進む」「戻る」ということを意識させるフォームの場合は、ページの移動と考えた方が使いやすいと思います。
送信が１ページ（１回）で完結しないユーザー登録ページなどでは、「戻る」「進む」が使われているところが多いです。

その場合は、フォームの下、中央付近に置くのではなく、左右に分けておくと良いと思います。

>>アカウント作成 >> [氏名登録] >> 完了
ーーーーーーーーーー
｜　名前｜入力欄　　｜
｜　住所｜入力欄　　｜
ーーーーーーーーーー
[戻る]　　　　　　　　　[次へ]



コメント送信
ーーーーーーーーーー
｜　名前｜入力欄　　｜
｜　メッセージ入力欄　　｜
ーーーーーーーーーー
[送信][リセット]

taloo · Answer

ページの移動は左が戻る、右が進む。
ブラウザの戻るボタン、進むボタンの位置と同じです。


フォームのボタンは、左に送信、右にリセット。
タブキーを押してフォーカスを移動するときに、もっとも利用数の多い送信ボタンに移動するのに、タブキーを押す回数が減らせられるから、

いまではその理由と慣例に従い、一般的に配布されているCGIスクリプトやPHPBB、CMSなどでは左に送信ボタンがあり、スタンダードとなっています。
リセットボタンのないフォームなどでは、
左から順に、間違えて押してしまったときに、入力内容にもっとも影響が少ない物から配置されていると思います。

ユーザーが書かれている文字を見ずに、他のBBSと同じだろうと一番左のボタンを押してしまった場合、
スタンダードに合わせていればその操作による影響はほとんどありませんが、
戻るボタンやリセットで消えてしまっては目も当てられません。


ダイアログは自分で作るのではなく、JavaScriptのconfirmやpromptなどを使ってブラウザに任せるのが良いと思います。
ポップアップウインドウでフォームを作成する場合は、一般的なフォームの作成と同じで良いと思います。

全部一緒ゴタにするとややこしくなると思います。（個人的には）

アクセシビリティー・ユーザビリティーで言えば慣例やスタンダードに合わせるのがベターです。
しかし、慣例やスタンダードが必ずしも正しいわけではありません。
左に進む、右に戻るとなっているページも多々あります。
IE7はメニューやボタンの位置が慣例やスタンダードからはずれて使いづらいブラウザの第一と呼ばれましたが、Microsoftは「使いやすいブラウザを目指しての配置」と公表しています。
（ＩＥ7やそれらのサイトが正しいと言っているわけではありません。スタンダードからはずれても利用者があるという例です。

OKボタンの位置はどこが適切?

こんにちは。

私の感覚では送信は左や右に行くのではなく、上に行く（「アップ」ロード）なので、

私もTABで動かすタイプなので、左にリセットがあると良く消してしまいます。

この回答への補足

私が書くと全部逆になりますね。

この回答への補足

> ※そういえば、OK Waveは左が【進む】ボタン？？リニューアル前はどうでしたっけ？？

この回答への補足

ページの移動は左が戻る、右が進む。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング