会員登録のUIに関する22個のルール

これを和訳した

おれに偏った解釈/解説をしています。訳は忠実ではないかもしれません

登録のUI

1.必要最低限の情報だけを聞く

会員登録に必要なものって、名前、メール、パスワードくらいでしょ。電話番号による認証がしたい？住所が欲しい？強制するな。あとからでも聞けるっしょ

会員登録フォームが２ページを超えるなら削減すべきだよ

2.requiredは明記してグループ化する

赤い "*" とかつける。
autofieldについて

3.不適切なパスワードは本当に不適切な場合だけだめだよって表示させる

ごちゃごちゃ「8文字以上です」「単純なパスワードはだめです」とか書かない

4.onInput でも onSubmit なくて onFocusOut でバリデーションを行う

送信してからバリデーション始まったらだるい
inline validation っていうらしい

一回でもひっかかったフォームにFocusが戻った時、onKeyUpで見てOKになるのを示す

5.認証メールを通らないとサイトすら見れないようにはするな

セキュリティ的に困る部分だけ認証メール通過してない人をブロックすればいいじゃん

6.使おうと思ってたメールが登録済みだったとき、リセットかログインに誘導しろ

そのメアド使われてるよ。で終わったら、どうすればいいねーんってなっちゃうから。できれば遷移なしで使用済みメアドチェックしようね。

Security note: I know that it is foolish to provide an API to the blackhatter to check which emails exist in your database, but if you are smart about it — using throttling or adding a device fingerprint layer to restrict the number of calls made, you are saving so many users the trouble of getting lost in the journey.

7.Socialログインは常識だよ

githubとlinkedlnだけとかはだめでちゃんと有名なやついれるんだよ
デフォ設定にする
複数経路でログインしようとしてきたらちゃんとログインさせてあげる(メール登録の後にtwitter連携とか)
違う経路で登録しようとしてきて、もし以前の登録情報が残ってたら、リマインドする。
ツイート権限とかは最小限にして安心させる

8. タブで次の欄に飛ばせ

メアドかIDでログインってのあったらいいねとも書いてあった
登録ありがとうメール送ろうねとも書いてあった

ログインのルール

9.メールは正規表現でちゃんとバリデーションしなさい

So many sites do not apply email field validation (the standard regex one). Your system has the information that the email format is incorrect — indicate!

10.パスワードリセット画面に飛ばすときは遷移後のフォームを埋めておいてあげる

11.パスワードを三回間違えたらパスワードリセットを促す表示をぴょこんって出す

12.自動生成のパスワードは使わせるな

リセットリンクを送ろう

13.password manager(覚えてくれるやつ)にキャプチャーしてもらえ

どうやってやるんだろ(たかぴろコメント)

14.アプリでは生体認証などアプリ独自の認証方法をつかわせろ

頻繁にログインが求められる場合かな(たかぴろコメント)

15.socialログインについて

If a user is trying to SSO with an email that doesn’t exist in the system, indicate the same and ask if the user wants to create an account with that email.
If a user is trying to SSO with an email that exists, authenticate and add the SSO to the account. On successful sign-in, inform the user of the same.
Try not to go more than 3 SSO options — any more will confuse the user. I do not remember if I used Facebook or Google or Twitter or whatever.
Mobile App SSOs — DO NOT open an in-app browser with the facebook/google page with sign-in option to authenticate. Most users have the app — use the Facebook/Google app to authenticate. I don’t want to enter a username/password combination just to save me from another email/password combination entry.

16.セキュリティが問われるサービスでは２段階認証をする

17.認知的負荷を考慮する

ログイン・登録のプロセスに慣れてない人のために、無限ループとなるようなパターンを作らない。
どこかでいにしえの形式に戻れる道を作っておく。

18.ログインしたままにする

機密情報を含まないのならば、ログインしたままにすること。
セッションが切れてもカート情報とかは残す。アマゾンはうまくやっている。

操作中にログインさせるときのはなし(主にe-commerce)

19.ログインなしで操作を完了できるときには、ログインさせない

必要になったときのみログインさせる
・前回ログインした方法を出しとくのめっちゃいいな(たかぴろコメント)

takapiro99/Signup_Signin_Rules.md