プラカンブログSTAFF BLOG

2015.07.15

永遠の葛藤、リセット問題。

reset

こんにちは、木村です。

弊社の仕事においてはあってはならないことですが、世の中にはまだまだ「分かりにくい」「使いにくい」ウェブサイトがたくさんあります。

そういうサイトでも、ちょっとした配慮でずいぶん使いやすくなったりすると思うのですが、そうなっていないということは結局のところ、作り手であるデザイナーやディレクターが「不親切で思いやりのない人」なのでしょう。それは「使う人の気持ちになって考えていない(もしくは考えているけど足りていない)」ということだからです。

今回は、そういう「ちょっとした配慮」が必要な例を一つ取り上げてみたいと思います。

リセット問題

ご存じのように、ウェブサイトには様々な「フォーム」があります。フォームというのは実は作り手の真価が問われる局面です。皆さんも一度や二度は、使いにくいフォームのせいでちゃぶ台をひっくり返したことがあるでしょう。逆に、さりげない親切心にあふれているフォームは、よく訓練された執事のようなものです。

フォームの中で起こりえる最大の惨事は、「間違えてリセットボタン(クリアボタン)を押してしまう」というものでしょう。一生懸命入力した内容が一瞬のうちに消えてしまいます。そのあと再起を図ることのできる強靭で寛容な精神をお持ちの方は、世の中にいったいどれぐらいるのでしょうか。

罠かと思うようなリセットボタンの例

罠かと思うようなリセットボタンの例。ちょっと手が滑っただけで、リセットボタンを押してしまいます。揺れる電車の中で操作している人もいるでしょう。あるいは、元々手が震える症状を持つ人も世の中にはいるのです。

どうしてもリセットボタンを設置しなければならない場合、我々デザイナーは、僕のようなせっかちな人間が押し間違えることのないように、最大限の配慮を行うべきです。

ここではいくつかの方法をご説明します。
なお、「確認」や「送信」などの「先へ進む系のボタン」を「ポジティブ系ボタン」、「リセット」「クリア」「戻る」などの「取り消し系のボタン」を「ネガティブ系ボタン」と呼ぶことにします。

1.離す。

もっともシンプルですが、効果的な方法です。
ボタンが近いと、間違えて隣のボタンを押してしまう危険性は高まります。

ボタン間を離すための最も単純でシンプルな方法は、「HTMLソース内で2つのボタンの間に全角スペースを2~3個入れる」という雑なものです。
しかし、さすがにそれはコーディング的にあまり上品ではないと思われるまともな制作者の方は、CSSでマージンを取るなどの方法でよいと思います。しかし僕が言いたいのは、多少下品なHTMLになったとしても、やらないよりはよっぽどいいということです。

ボタン間を離したよい実例

ボタン間を離したよい実例

無理に法則化するとこうなります。

リセットボタンの第一法則
「誤爆率はボタン間の距離に反比例する」

2.色を変える。

次に「色を変える」というという方法。ポジティブ系ボタンは目立つ色にし、ネガティブ系ボタンはグレーなどの目立たない色にするというものです。
ただ実際には、ポジティブ系ボタンの色で悩む場合もあります。

例えば、「赤」は確かに目立ちますが、一方では「禁止や警告を表す色」としても使われていますので、進んでいいのか進んではいけないのか、ユーザーが混乱する可能性があります。
「緑」や「青」は社会的には広く「安全な色」としても認識されていますので、先へ進む系のボタンには適切な場合が多いでしょう。しかしインパクトに欠けますので、ECサイトなどで「購入する」ボタンに使うには押しが弱いかもしれません。購入系のボタンが、赤ではなく、青や緑でもなく、オレンジや黄色が多いのも、そのあたりのバランスを考えた結果なのかもしれません。

実際にポジティブ系のボタンを何色にするかという問題は、そのサイト内での一貫したカラールールなどに従って考えることになるかと思います。

ボタンの色を変えた実例

ボタンの色を変えた実例

 

3.アイコンなどで補足する。

文字だけで分かりにくければ、ポジティブ系のボタンには「→」といった右向き矢印アイコンを付ける、ネガティブ系のボタンには「←」といった左向き矢印や「×」のような「取り消し」を想起させるアイコンを付けるなどの方法もあります。

記号の力は想像以上に絶大なものがあって、さすがにここまでやると間違えて押してしまう可能性はかなり低くなるのではないかと思います。

もちろん、ここまで紹介した方法を組み合わせて使うということも効果的です。

アイコンなどで区別をつけている実例

アイコンなどで区別をつけている実例。 この例では色も大きさも違いますので、さすがに間違うことはかなり減るのではないかと思います。

 

左右問題

矢印の話が出たところで少し余談になりますが、ウェブページにおいて「左右の軸」というのは、時として「前後の軸」にもなっています。一般的には「左→右」の方向は「進んでいく」ポジティブ系のイメージになり、逆に「左←右」は「戻っていく」ネガティブ系のイメージになるかと思います。

ですので本当は、このリセットボタンの問題と左右の問題は合わせて考える必要があるのですが、そこを考え始めると問題が少々込み入ってきて、睡眠時間が減ってしまうことになります。

例えば、ある問合せフォームがあるとします。入力画面の最後に「送信」ボタンと「リセット」ボタンがある場合、「送信」が左、「リセット」が右にある場合も結構あるのではないでしょうか。左右問題の視点で考えると、「送信」は次のステップへ「進む」わけですから本来は右側にあってほしいのです。ところが現実には左側にある場合も多く、その場合「リセット」が右側になりますので、せっかちな僕のような人間は、先へ進みたい思いのあまり、反射的に右にあるボタンを押して自爆してしまうわけです。

なぜ先へ進む系であるはずの「送信」ボタンが左側にあるのでしょうか。
はっきりした理由は分かりませんが、僕の想像ではそれが「メインのボタン」であるからではないかと思います。
言い換えれば、「リセット」はメインのボタンではなく、あくまでも「おまけ」的なボタンであるから、最初に置くのはなんかヘンだよね、ということで2番目に置かれているのではないでしょうか。

そもそもリセットは必要なのか?

リセットボタンは「おまけ」であるというところまで考えが及ぶと、リセットボタン不要論にまで発展するのは自然の理。
実際にそう考える人たちも多いのか、ネット文化の成熟とテクノロジーの進化も相まって、最近はリセットボタンがないフォームが主流になりつつあるように思います。

そう、僕も結論的には「リセットボタンは不要」と思っていますし、特別な理由がない限りはそうしています。

懲りずに法則化するとこういうことになります。

リセットボタンの第二法則
「落とし穴のないところに、人は落ちない。」

ただそうはいっても、何らかの理由でクリアボタンがどうしても必要な場合もあるでしょう。そういう場合は、上述した様々な方法で、ユーザーができるだけ地雷を踏んでしまわないように最大限の配慮をしてあげることは可能ですし、それが作り手としての良心だろうと思います。

submit

この記事は、KIMURA が書きました。