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

質問

WEBアプリで掲示板を作ったのですが、
オープンテストでボタンの位置について悩んでおります。。。

私が利用している大半のコミュニティが（掲示板のようなものが多い。）
【(左)　戻る　／　投稿　(右)】又は【(左)　修正する　／　次へ　(右)】のようにデザインされているのに慣れていたので、
何の違和感もなく【(左)　戻る　／　進む　(右)】とボタンを配置していたところ、
先輩から逆だという指摘を受けました。。。

調べてみたところ、確かに、Winユーザは「OK」ボタンは左であるということでしたが、
それはtype属性をsubmitにせざるを得ない状況の場合、という条件や、JavaScriptがそうだから、といった理由で、
本来は右の方が違和感を感じない人が多いそうです。
また、「OK」ではなく、「次へ」や、「進む」に関しては右が多いという情報もありました。

この件に関して、何か情報がありましたら、ご教示いただきたいと思います。
よろしくお願いします。

回答No.1

noname#40116 · ベストアンサー

こんにちは。

Webを横書き本のページだとすれば、左が戻るで、右が進むで良い気がするのですが。
少なくとも自分は、そう解釈して作っています。（10年以上前から作ってますが、クライアントを含め、今まで誰からも指摘されたことはないです）

「OK」ボタンはあまり考えたことがなかったですね。難しいですね、、、Macだと「OK」は右端にあることが多いですし。（一応、昔からのMacのルールなんです。デフォルトのボタンは右端におくってのが）
多分、Winは重要なボタンを左から並べる、という性質なのではないでしょうか？
「OK」ボタンの役割が、何かにGOサインを出して先に進むということを考えれば、「進む」方向である右にくるのが自然かな、とも思います。

もしかして、あなたの先輩は、日本語のたて書き本や漫画などの感覚から、左が次ページという感覚があるのかも知れませんね。

お礼

＞Webを横書き本のページだとすれば、左が戻るで、右が進むで良い気がするのですが。

なるほど～！！！！！
それで、感覚の違いが出てくるのですね！！！！！
とてもすっきりしました！

たしかに。
特に掲示板ですから、横書き本のようなものですよね。
先輩は、画面遷移の多いアプリは作っていないかもしれません。
例えば一画面で何度も処理するようなものとか。

Winユーザの方がどう感じるかが気になるところですが、
納得のいく回答ありがとうございました。

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

回答No.6

神崎 渉瑠（@taloo）

私の感覚では送信は左や右に行くのではなく、上に行く（「アップ」ロード）なので、
ボタンの位置はタブキーで移動しやすい場所として、左側に置いています。

>>アカウント作成 >> [氏名登録] >> 完了
こういう表示があるとそれに感化されてしまい、左右に行くという感覚になります。
スタイルシートをはずしたときに表示とボタンの位置が逆転しない様に、
HTMLとスタイルシートの書き方に注意が必要ですね。

> TABで消してしまわないようにするのを優先したらいいのか、
> ページの移動の感じで違和感の無い方を優先すべきなのか。。。
たしかに悩むところです。(^^;
他のページや何かの表示とのカラミもありますし、
どちらか統一して置いた方が良いと思います。
どちらか使いやすいと思われる方で作ればいいと思いますよ。

お礼

わかりました。

何度もすみません。
ありがとうございました。

回答No.5

みずの（@mizuno3）

私もTABで動かすタイプなので、左にリセットがあると良く消してしまいます。
自分の会社のコンテンツでも良くやってしまうのです。

TABを使わなければ左が戻るというイメージですけどね。
tabindexをつけて置けばいいのかも知れませんね。

お礼

回答ありがとうございます！
ちょっと混乱してきました。。。
TABで消してしまわないようにするのを優先したらいいのか、
ページの移動の感じで違和感の無い方を優先すべきなのか。。。

reset()をテーブルの右上とかに付けられたらいいのになー。

補足

ということは、mizuno3さんのよく使うコンテンツは左にリセットがあるということですか？？
参考までにお聞かせください。

回答No.4

神崎 渉瑠（@taloo）

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

　(1)投稿フォーム　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　　　｜
　｜　カテゴリ選択　　　　　｜
　｜　メッセージ入力欄　　｜
　ーーーーーーーーーーーーー
　[確認画面へ][編集を元に戻す]

　　　　(2)確認画面　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　｜
　｜　　　　　　　　　　　　｜
　｜　メッセージ　　　　　｜
　ーーーーーーーーーーーーー
　　[投稿する][修正する]

ご参考まで。

補足

な、なんどもすみません。。。それだと、ページは左めくりになりませんか？？？
ページの移動なんですよね？？
結局どちらがいいんでしょう。。。

回答No.3

神崎 渉瑠（@taloo）

> ※そういえば、OK Waveは左が【進む】ボタン？？リニューアル前はどうでしたっけ？？
私が見ているブラウザでは左に「送信」ボタンとなっています。

「進む」「戻る」ということを意識させるフォームの場合は、ページの移動と考えた方が使いやすいと思います。
送信が１ページ（１回）で完結しないユーザー登録ページなどでは、「戻る」「進む」が使われているところが多いです。

その場合は、フォームの下、中央付近に置くのではなく、左右に分けておくと良いと思います。

>>アカウント作成 >> [氏名登録] >> 完了
ーーーーーーーーーー
｜　名前｜入力欄　　｜
｜　住所｜入力欄　　｜
ーーーーーーーーーー
[戻る]　　　　　　　　　[次へ]

コメント送信
ーーーーーーーーーー
｜　名前｜入力欄　　｜
｜　メッセージ入力欄　　｜
ーーーーーーーーーー
[送信][リセット]

補足

回答ありがとうございます。
補足質問よろしいでしょうか。

先輩に指摘を受けた画面は、『投稿フォーム』でした。
(1)投稿フォーム　(2)確認画面　(3)投稿完了画面
OK Waveとほとんど一緒です。

回答者様の例に沿って書くと、

　(1)投稿フォーム　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　　　｜
　｜　カテゴリ選択　　　　　｜
　｜　メッセージ入力欄　　｜
　ーーーーーーーーーーーーー
　[編集を元に戻す][確認画面へ]
　　　　　　　{戻る}←リンク表示

　　　　(2)確認画面　
　ーーーーーーーーーーーーー
　｜　タイトル　　　　　　｜
　｜　　　　　　　　　　　　｜
　｜　メッセージ　　　　　｜
　ーーーーーーーーーーーーー
　　[修正する][投稿する]

といった感じなのですけれども、ここで[編集を元に戻す]を右にした場合、
次のステップに進む系のボタンが(1)と(2)で真逆になってしまうのです。
このパターンについて、再度ご助言願います。

回答No.2

神崎 渉瑠（@taloo）

ページの移動は左が戻る、右が進む。
ブラウザの戻るボタン、進むボタンの位置と同じです。

フォームのボタンは、左に送信、右にリセット。
タブキーを押してフォーカスを移動するときに、もっとも利用数の多い送信ボタンに移動するのに、タブキーを押す回数が減らせられるから、

いまではその理由と慣例に従い、一般的に配布されているCGIスクリプトやPHPBB、CMSなどでは左に送信ボタンがあり、スタンダードとなっています。
リセットボタンのないフォームなどでは、
左から順に、間違えて押してしまったときに、入力内容にもっとも影響が少ない物から配置されていると思います。

ユーザーが書かれている文字を見ずに、他のBBSと同じだろうと一番左のボタンを押してしまった場合、
スタンダードに合わせていればその操作による影響はほとんどありませんが、
戻るボタンやリセットで消えてしまっては目も当てられません。

ダイアログは自分で作るのではなく、JavaScriptのconfirmやpromptなどを使ってブラウザに任せるのが良いと思います。
ポップアップウインドウでフォームを作成する場合は、一般的なフォームの作成と同じで良いと思います。

全部一緒ゴタにするとややこしくなると思います。（個人的には）

アクセシビリティー・ユーザビリティーで言えば慣例やスタンダードに合わせるのがベターです。
しかし、慣例やスタンダードが必ずしも正しいわけではありません。
左に進む、右に戻るとなっているページも多々あります。
IE7はメニューやボタンの位置が慣例やスタンダードからはずれて使いづらいブラウザの第一と呼ばれましたが、Microsoftは「使いやすいブラウザを目指しての配置」と公表しています。
（ＩＥ7やそれらのサイトが正しいと言っているわけではありません。スタンダードからはずれても利用者があるという例です。

お礼

＞ブラウザの戻るボタン、進むボタンの位置と同じです。
それもそうですよね！
同じく、私も前の5件／次の5件というふうに設置しています。

＞左から順に、間違えて押してしまったときに、入力内容にもっとも影響が少ない物から配置されていると思います。

なるほど。。。
今は【(左)　reset()　／　submit　(右)】になっていました。。。
確かに、これだと、誤ってリセットしてしまう可能性がありますね。

詳しい回答ありがとうございました。