登録画面を作るなら、Googleのデザインガイドにある「テキストフィールド」を参考に

Googleにデザインガイドが存在するなんて知りませんでした。ここではECサイトに必須の登録画面の作成に役立つ「テキストフィールド」の解説から基礎項目だけを訳しておきます。

▼原則

目立たせる。

└テキストフィールドは、ユーザが一目で「ここに入力するんだな」とわかること。

▼ラベル(項目)

ラベル=項目名は常に表示しておく。

└ユーザが入力するときも消さない!

※Googleログインで試すとわかりやすいです。

f:id:yodakazoo:20190501195645p:plain
メールアドレスか電話番号を入力しようとすると…

f:id:yodakazoo:20190501195717p:plain

ラベルが上部に移動します。

一方、次はダメな例。入力をはじめるとラベルが消えます。これではユーザが「何を入力するんだったっけ?」となりかねません。

f:id:yodakazoo:20190501195805p:plain

入力しようとすると↓こうなってラベルが消えます。

f:id:yodakazoo:20190501195841p:plain


▼ラベル文言

短く、明確に。

└省略しても、2行にわたってもいけない。

▼必須項目の知らせ方

必須の記入項目にはラベルの横に*を付ける。
全項目の半数以上が必須項目の場合は、必須じゃない項目のラベルの横に括弧をつけて(オプション)と書いておく。

参照ページは↓こちらです。