ボタンは標準のボタンでよい

2006/7/19 23:37

ITproに「Webデザインエンジニアリング第16回　ボタンを押させるテクニック」という記事がありました。

とを比べてみましょう。確かに画像のほうだと、「これを押したら支払い(もしくは支払い確認画面)に移動するんだな」と分かります。ただ、どちらが「押せそう」かという観点で見ると、立体感のある左のボタンのほうが「押せそう」に思えます。

ウェブブラウザのボタンは現実世界のボタンのメタファーです。ですので、ユーザに押せそうだと思わせることがまず大事です。そのためには立体感が必要ですし、押したときのボタンの動きなども必要になります。無理に画像で作成する必要はありません。

ウェブブラウザの標準のボタンはです。がインターネット上に大量に存在しているボタンです。インターネット上に共通して存在している形状のボタンを使うことで、そのユーザの学習やリテラシー向上にも役立ちます。色についても同様です。無理にボタンの色を変える必要はないと思います。

色や形状よりむしろ、ボタンを配置する場所やボタン上の文字に気を配る必要があります。

ボタンが左でボタンが右

というのは基本です。確認画面で入力項目を確認させてからボタンを押させたいときは、ボタンは画面の最下部に置きます。特に確認が重要でなかったり、確認画面が縦に長くなる場合は、画面上部に置いてもいいと思います。

ただ、画面が縦に長いからといって、複数のボタンを置くのはよくないことです。どのボタンを押しても同じアクションが実行されるなら、ボタンは一つにすべきです。そうでなければ、ユーザは二つのボタンの挙動が違うのではないかと疑ってしまいます。

また、ボタンが3つ以上並んでいるとユーザは確実に混乱します。ボタン以外の手段を用意するか、フォームの構成を見直す必要があります。3つ目のボタンは本当に必要なのか、時間をかけて議論をしてもいいと思います。

ボタン上の文字については、フォームの目的や入力からの流れによって許容できる範囲は様々です。ひとつ言えるのは、あまりダラダラとした長い表現は避けたほうがいいかもしれません。ユーザが理解できないのではないかと考えて長い文言にすると、ドツボにはまってしまう可能性があります。少しは表現を省略して、簡潔に見せることが大切です。