- 井上 みやび子
- すぐ使える株式会社 代表取締役
- 東京都
- Webエンジニア
対象:ホームページ・Web制作
- 原島 洋
- (Webプロデューサー)
- 井上 みやび子
- (Webエンジニア)
まず1つ目の画像をご覧下さい。
ウェブサイトによくあるフォームの、一部を切り取ったものです。パターンA はこの All About Profile のコラム管理画面、パターンB は私が運営している「すぐ使えるCGI」の販売サイトの購入フォームです。
内容はもちろん異なりますが、その他に、構成上の違いがあります。
...そうです。主に使うボタンの位置が違うのです。
パターンA の方は、右にある赤いボタンがこのページの機能(検索)を実行するボタンで、左にあるのは検索条件をクリアするボタンです。
パターンB の方は、左にある青いボタンが次に進んで購入を進めるボタンで、右にあるのが進まずに戻って修正をするボタンです。
良く見て押せば間違う余地がないと思われるかもしれませんが、私はよく All About Profile (パターンA)の管理画面でつい「左にあるボタン」を押して条件をリセットしてしまいうんざりする事があります。
皆さんはそんな事ありませんか?
私は Web エンジニアですので自分でデザインは行わず、デザイナさんにフォームのデザインを頼むことがありますが、どうもデザイナさんは右側にメインボタンを配置する事が多いようです。
Web は横書きですので、画面をめくって進むのは 左―>右 で、右にボタンがあった方が(例えば検索結果のページをめくるのと同じで)しっくりくるせいかとも思いましたが、それならば、私ももっとその方法に慣れていてもいいはずです。
実はもっと習慣的な事に基づく理由を見つけました。
2つ目の画像を見て下さい。理由は OS なのです。
デザイナさんにファンの多い Macintosh は、昔から 「OK」ボタンが右側、キャンセルボタンが左側です。
2つ目の画像は Macintosh 版のブラウザ Firefox と Windows 版のやはり Firefox で同じペテストページで確認ダイアログを出したところですが、ボタンの配置が違います。
という事で、普段どの OS を使っているかでインターフェースの使いやすさは異なりそうですね。Web サイトの場合 OS を判別してボタンの配置を変える事は技術的には可能ですが、そうするとスクリーンショットを使ったマニュアルなどは2つパターンを用意しなければならず、これも混乱の元です。
作り手としては、なかなか悩ましいところです。
ホームページ自動更新「すぐ使えるCGI」