こんにちは。にゃんこ師匠です。

前回の「Black Friday & Cyber Monday 2015がわかる海外データのまとめ 」を書いていた時、いろんなサインアップフォームを見る機会がありました。

プレースホルダを使用しているケースが多いのですが「???」な使用例が多かったです。

もはや「駄目プレースホルダ」の代表格 Facebook

プレースホルダは省スペースで入力を補助するのが目的ですが、ラベル代わりに使ってしまい本来の目的を果たしていないことも少なくありません。

スクリーンショット 2015-11-25 18.37.44

プレースホルダの特性は入力を始めると「消えてしまう」ことです。よってラベルの代わりにプレースホルダを使ってしまうと、入力開始時には、そのフィールドに何を入れるべきか指標がなくなります。

スクリーンショット 2015-11-25 18.37.24

Facebookの場合、なぜエラーなのかの原因が正確に出ないため、意味不明になることも少なくありません。(メールアドレスまたは携帯電話番号を入れるということ自体が乱暴ではありますが)

配慮を間違ったWalmart

スクリーンショット 2015-11-25 18.33.01

Facebookと同じ、ラベル代わりにプレースホルダを使った事例ですが、プレースホルダの特性を理解していたのか、入力を開始するとラベルが移動します。

スクリーンショット 2015-11-25 18.33.13

First Name 部分が一般的なラベルの位置までJavascriptのエフェクトで移動するのですが「だったら、最初からそこでよくない?」と、思わず突っ込んでしまいました。

移動することを前提に、フォーム間の隙を最初から作っているので省スペースになってない上に無駄なエフェクトです。

意味のないアイコンを配置したArbnb

スクリーンショット 2015-11-25 18.32.28

ラベル代わりにプレースホルダを使った上に、意味のないアイコンまで配置して混乱を招くパターンです。
欧米圏のFirst Name → Family Nameなのでラベルが消えると、ちょっとわかりにくくなる上に、右のアイコンは全く役立っておりません。

「そのアイコンスペースでラベル入れられたよね?」と思ってしまうパターンですね。

全てを配置したYahoo!

スクリーンショット 2015-11-25 18.44.11

まず、ラベルをプレースホルダにしてますね。

そして、入力開始すると、エフェクト付きでフォームが伸びていきます。入力開始したエリアのラベルが登場。

スクリーンショット 2015-11-25 18.44.28

すごく長くなった!最初にフォームを見た時の視認性を上げたかったのだろうなと思いますが、ちょっと狙ったところとは違う方向に向かってしまった気がします。

おそらく、入力項目が多いので少しでもすっきりさせようと、ラベルをプレースホルダにしたのでしょうね。
それ自体は、成功してて最初はすっきりフォームなのですが。。。

UIデザイナーって大変ですよね。外野がうるさいから。

意外に良かったGoogle

スクリーンショット 2015-11-25 18.45.47

合理的な配置です。名前の入力を促しつつ、姓名を分割することを促しています。
@gmailの部分は入力開始しても消えません。

入力効率を意識したのか、年と日は入力。月はプルダウン。それが理解できるようにプレースホルダ。

アラートも出て、一度入力をミスした場所は赤い罫線で囲まれます。

スクリーンショット 2015-11-25 18.46.12

スクリーンショット 2015-11-25 18.46.37

無駄がなくて理想的なプレースホルダの使い方です。

(おまけ)全てに投げやりなAmazon

スクリーンショット 2015-11-25 18.35.49

古いデザイン、その代わりにシンプルな入力項目。Amazonらしい?のでしょうか。
デザインが古すぎて、ちょっと抵抗感あるんですが。

サインアップがメールだけだということに、気づけば問題ないのでしょうが、なんかフィッシングサイトっぽいです。

【参考】フォームに使うプレースホルダの利点と欠点