ダイアログ:選択肢の並び順

みのわようすけ
5 min readJan 29, 2017

下の二つはMacとWindowsのExcelのダイアログです。ボタンの並び順に注目してみると「保存」「保存しない」「キャンセル」の並び順が双方で異なっています。さて、この様な並び順になっているのは何故でしょうか。

MacとWindowsでボタンの並び順が異なります

Windowsの考え方

Windowsでは「保存しますか?」の回答に対して、「保存」「保存しない」「キャンセル」の順に並んでいます。

左側に「保存」ボタンがある

Windowsのダイアログでは「YES」「NO」「キャンセル」という順に並んでおり、文章や会話に近い聞き方、読み取りの順番に並べるという考え方です。

遡ればMS-DOSの時代になりますが、MS-DOSではテキストベースの画面だったため、

「実行しますか?」 YES/NO

とテキストで表示されました。操作は全てキーボードて行うため、左ボタンを押すとYESが選択され右ボタンを押すとNOが選択されます。

Windowsでは、このYES/NOの順番を踏襲してボタンが並んでいる様です。

Macの考え方

Macでは「保存しない」「キャンセル」「保存」の順番に並んでいます。Windowsとは逆に右側に「保存」ボタンがあります。

右側に「保存」ボタンがある

これは左上から右下に向かって操作を進める様に画面が構成されているためです。左上から右下へ向かう画面構成は、横書きの文章が左上から右下に向かって読むことに倣い、その流れに沿ってレイアウトされていると言われています。

従って、操作が戻るものは左側に置き、操作が進むものは右側に置いています。Macでは操作の流れに沿ってボタンが並べられている様です。

どちらの順番が正しいか

Mac:右にOK

Windows:左にOK

どちらの順番が正しいかという議論はありますが、選択肢の並び順はそれぞれのOSの考え方に依存した方が良さそうです。同じソフトの中でダイアログの選択肢の位置が変わると誤選択や迷いの原因となります。

一つのシステム内で並び順に一貫性があればダイアログの内容を注視せずとも、自分が選びたい選択肢を間違いなく選ぶことができます。

つまり、UI設計にはOSのルールを理解している必要があります。

モバイルデバイスのルール

MacとWindowsはデスクトップのOSですが、モバイルデバイスのOSではどうでしょうか。

iOSはMacと同じように、右側に「YES」に相当するOKボタンが配置されます。これはAppleで一貫したルールと言えます。

iOSでは右側にOKボタンがある

Androidも同様に右側に「YES」に相当するOKボタンが配置されます。

Androidも右側に「OK」ボタンがある

初期のAndroidは「OK」は左側にありましたが、OS 4.x から「OK」「キャンセル」の並び順が変わりました。

Windows phoneではWindowsと同様に左側に「YES」に相当するOKボタンが配置されています。

左側にOKボタンがある

Web上のダイアログはどうするべきか

問題はWeb上のボタンの並び方です。WebはMac、WindowsなどいろいろなOSで利用されます。OSによって選択肢の並び順を変えるのは、同じサービスを複数のデバイスから利用している人にとっては紛らわしいです。そうかと言って、どれかのOSにあわせても不都合が生じるかもしれません。

さて、どうするべきでしょうか。別の記事で書こうと思います。

ゲーム機のコントローラー

ファミコンのコントローラーは右側にAボタンがあります。AボタンはOKに相当する操作が割り当てられることが多いです。Bボタンは左側にありキャンセル操作に割り当てられることが多いです。

一方、MicrosoftのXbox のコントローラーは左側にAボタンがあり、右側にBボタンがあります。

もしかしたらXbox もWindowsの考えた方に倣ってボタンが並べられているのかもしれません。

OKキャンセルの並び方について詳しくはこちらを参照ください

--

--