「毎日考ブログ」はとっくの昔に移転してました
個別記事にお引越し表記するの、一年近く忘れてました(最低
すでに新しくもないブログのURLは以下ですよろちくび。(最低

mkb : http://mkb.salchu.net/

<< 暖かすぎて寝坊必至の「安眠ナイト」で湯たんパー | main | Googleモバイル検索の不満 >>

使う人が「ウッ (゚∀゚;)」とならない登録ボタン

2009-01-29 Thu[Web制作 > デザイン]

ネットで、例えば会員情報を登録したり変更したりするとき、入力フォームの最後に「送信する」とか「変更する」とかのボタンを押すと思います。

昨日、あるサイトの会員情報を修正していたときに「お?」と思うものがあったので、大したネタではないのですがご紹介。

まずは、いくつかのWebサービスのボタンからご覧ください。

はてなのユーザ情報変更画面

はてなのユーザ情報変更画面

携帯電話のメールアドレスを修正する画面です。上が今までのアドレス、下に新しいアドレスを入れるようになっているんですが、その下のボタンが思いっきり同じデザインなのね。一番手に近い「削除する」ボタンをうっかりクリックしそうになりませんか?

ユーザは得てして(私も含めて)せっかちなものだから、こういったフォームの入力は極力早く終わらせたいのが常。ですが、ここで一瞬思考が止まるんですね。

Livedoorの登録変更画面

Livedoorの登録変更画面

物としては上とそう変わらないのに、なぜかこちらのほうがラク。入力内容が違うので単純に比較できませんが。

Webのような横書きの場合、基本的に人の目は左から追っていくものだから、自分にとって消極的なボタン、というのかな…言い方が当てはまってないかもしれないけど、「削除」や「キャンセル」ボタンが右にあるだけで、ちょっとだけ心理的にラクになるのね。

Dropboxの設定変更画面

Dropboxの設定変更画面

ちょっと前に記事にした(Dropbox試用、使用→愛用中のまとめ)DropboxのWebのインターフェースです。左が「設定を変更する」右が「変更するのを止める」というボタンになっています。

色が変わっているので見やすいし、こちらもフォームから一番近い左側が「変更」になっているのがポイント。もちろん、色が認識できないとしてもコントラストの違いである程度わかります。

Yahoo!の登録情報変更画面

Yahoo!の登録情報変更画面

こちらもキャンセルが右側。黄色が注意を喚起される色なのでわかりやすいというのもあります。フォントが大きいのも見やすいですね。

ブログ村の登録変更画面

はい。で今回の主役なのですが、私が登録しているブログ村のものです。といっても画期的というわけでもない、いたって原始的?な一工夫なのですが。

ブログ村の登録変更画面

そう、「登録」ボタンが枠で囲んであるの。ボタンが二つ並んでいると普通、どちらをクリックすればいいのか? と無意識でも考えるもの。でもこうなっていると頭にストレスがかからず「あ、こっちだ」となるんです。

ユーザはせっかちだと書きましたが、いくらボタンの周りにこまごま注意書きが書いてあってもほとんど読まれないのは必至。だからよりわかりやすい作りが求められるんですよね。

さて、今回の記事のようなチマっとしたことばかりではなく、ユーザビリティについて詳しく書かれ参考にしているのがユーザビリティ実践メモさん。ご存じでない方は是非ご一読を。

また、関連としては過去にコメント欄のユーザビリティを考える(07-02-03)という記事を書いています。こちらもチマっとした内容ですが(笑)。

そいではまた。

にほんブログ村 デザインブログ Webデザインへ にほんブログ村 PC家電ブログ Macへ

<< 暖かすぎて寝坊必至の「安眠ナイト」で湯たんパー | main | Googleモバイル検索の不満 >>

同じカテゴリの新着記事

いただいたコメント

waka | 2009-01-30 08:11 AM
これねー、悩ましい問題なんですよねー。

次へで進んでいくタイプのウィザード型だと、次へは右にあるのが正しいんですよ。

[キャンセル]  [決定 >>>]
みたいだとおかしくないでしょ?

同様に左から右へと文字が進んでいるが故に決定は未来だから右側ってのがユーザビリティ的には正しいとされているんですね。
(もちろん、人によりますけど)


で、なんで決定が左にあるものもあるかと言うと、これも諸説あるんですが、なぜかWindowsでは決定が左、キャンセルが右になっているのでそれにならっているからみたいなんですね。
慣れってのは重要ですから。

ただ、右が決定が正しいってのも論拠があるだけに否定し難いところもあるんですね。
仰せの方に決定が近い方が(早く見える方が)いいってのも頷けますし…

とはいえMacだと、すべからく右が決定ってなってますし…

お互いがお互いに正しいと思っているだけに(実際どっちも間違いじゃないですし)、統一は難しいですよねぇ。

そういう意味ではブログ村の工夫はやられたって感じですね。目からウロコ。
ふうこ | 2009-01-31 07:17 AM
つうか、はてなの場合は単純にそこに「削除する」ボタンがあること自体が唐突すぎるんでは。

フォームに記入しないまま送信すると削除、とかにすりゃいいのに。
(当然変更時とは別の文言の確認ダイアログ付きで)
salsa | 2009-01-31 01:48 PM
■wakaさん
確かにウィザードの場合は進んでいく方向→右に進むボタンが望ましいですね。ユーザの動線とずれの無いインターフェースが理想的だということですよね。

そうそう、今ではなれましたが、WinとMacの決定ボタンの違いは当初迷った覚えがあります。ただ、Macの場合は「この流れだとこっちだろう」というほうが濃いボタンになっていたりとか、なるべくユーザに負担をかけないUIになっているイメージがありますねえ。ひいきめだろうか。

ブログ村のこれは、そういう意味で画期的ですよねw
わかりやすいように枠つけちゃえばいいんじゃん?って(笑

■ふうこさん
…考えてみれば本当だ。そうですよね。
確かに一個前のリンクが「変更・削除する」となっているけれど、ここには「変更する」「やめる」くらいのボタンがあるべきで、削除については別枠にするべきですよね。
削除を押してももちろん警告が出るんですけど、間違ってEnter押しちゃわないとも限らない。

トラックバックはこちらから。



いただいたトラックバック

ページの先頭へもどる


毎日考ブログ新着

緑町のウェブ屋新着

Author:salsa

MacとWebが三度の飯よりは好きでない猫好きのWeb屋。
Twittersalchu's flickrFriendFeedsalblr.
» about

Categories

Archives

mobile

QRコード

» 携帯で読む