〜ほぼ Daily UI vol.1〜 Sign Up
Daily UI を気長にやっていくための note を書いていきます。最初に予防線貼っておくと ほぼ Daily と言っていますが、実際は ほぼ Weekly になると思います。そこまで強くコミットする気はないですが完走はしたいと思っています。
ルール
なんでそもそも note という形にするのかという話ですが、自分が何かを学ぶ時は言語化することをセットにするのが好きで、でもそれをそこそこちゃんとやろうとすると毎日は不可能だなと思ったので緩め(最低週に一個)というペースでやって行こうかなというモチベーションです。
なのでお題のデザインを作るだけでなく、そのお題にまつわるポイントなども書いていきたいので、次のような独自ルールでやって行こうと思います。
- 参考にするサイト・アプリを最低5個見つける
- それぞれのデザインや違いに関して、どんなユースケースや文脈がデザインに影響を与えるか言語化する
- 自分でデザインを作る
今日のお題: Sign Up
ログインが必要なサイトでは必須のUI、Sign Up ですね。私もこれまで携わってきたサービスでは毎回実装しているUIです。
参考にしたサイト・アプリ
GitHub
Cocoda!
https://cocoda-design.com/signup/form
ニコニコ動画
https://account.nicovideo.jp/register/email?site=niconico&sec=common_header&next_url=%2F&mode=landing&transition=common
ニンテンドーアカウントログインとかあるんだ。
Dribbble
https://dribbble.com/signup/new
Discord
https://discordapp.com/register
唐突な「はい」
PCサイズだと背景がかわいい。
デザインを考える上でのポイント
1. Sign Up は基本的に Sign In とセット
そりゃそうやろという感じではありますが、このため切り替える UI をどうするか、もしくは切り替えずに一画面に両方表示させるか、などの問いが発生します。
基本的に Sign Up と Sign In を間違えるやつはおらんやろという気がするので、一緒に表示させるのではなく、片方へのリンクをひっそり載せた方が良さそう、そうしない場合ユーザから見て分かりづらい UI になる可能性があります。
2. ソーシャルログイン
割と大体のサービスで当然の如く存在するようになったソーシャルログイン。新規登録のCV率アップに貢献するのでなるべく何かしら入れたいものでしょう。これも考慮したデザインにした方がいいなと感じました。
ポイントとしては次のあたりかなと
▼ メルアドでの新規登録とどう分けて表示するか
全然別なので分けて表示する必要性。 `or` でさりげなく分けるか、Cocoda! みたいにソーシャルログインの選択を出して、それを使わない人に対してメルアド登録を出すみたいなパターンがありそう。
後者はむしろソーシャルでログインして欲しいみたいな意図を感じる。サービス内のものをシェアして欲しいとかの場合に有効なのかも。
▼ どこまで自分のプロダクトのトンマナに溶け込ませるか
結構各社違うテーマ色だったりするので、ニコ動のとか見ると分かりますが、そのまま使うと大分カラフルになります。
それぞれの社のデザインガイドラインに則りつつ、控えめに調整できると良さそうです。
3. エラーメッセージをどう出すか
メルアドとかが間違っている時に出るアラート、例えばGitHubだと次のような感じです。
どんなフォームでもそうですが、真面目にやろうとすると touched(一度でも入力したかどうか) や submitted(送信を試みたか)のような状態で出し分けるのはまあまあめんどくさいです。
私が好きなエラーメッセージの出し方で、よく人に紹介する時は 「Cocoda! のやつ」と言ってURL送るのですが
これのいいな〜と思っているのは下記のあたりです。
- アラートではないので怒られている感じがしない
- 何を満たしたら OK なのかクリアである("利用可能なユーザ名" みたいな独自基準はヘルプアイコンとかで補足してもいいかも知れんが)
- 実装的にも考慮する状態が少ない(入力されている情報を元に基準を満たしているかを表示するだけなので、 touched, submitted などの状態を考えなくていい)
いい打ち手だと思うので、自分がデザインするなら真似したいな〜。
4. メルアドを入力させてからパスワードを入力させるか
参考にした中だとニコ動がそうでしたが、まずメルアドを入力させてから、パスワードを入力させるかどうか。基本的にはユーザからしたらメリットないので、同一IDで複数サービスやっているようなもので「そうせざるをえない」時に使う方法なのかなと思いました。
リクルートIDとかは例として分かりやすくて、じゃらんやホットペッパー beuaty とか全然違うジャンルに使えたりするので、こういう形式にしないで「すでに同じメールアドレスで登録されています」みたいなメッセージ出されても「は？」という感じでしょう。
なので、まずメルアド入力させる -> 存在チェックしてない場合に新規パスワード入力させるという感じなのかなと。
その他思ったこと
Sign Up 部分はそのサイトの特徴を出しているところがないというか、基本的に背景は白固定で、すごい独自の何かみたいなものがあるところはなかった。機能性が多いところは見えやすさ重視とかのがいいのかも。
自分のデザイン
それではインプットと考察を終えたところで自分で手を動かしてみます。最近某無人島開発ゲームが日課なので、島構想をデザインできる架空のアプリという体で Sign Up を作ってみます。
できたものがこちら。
その他思ったこと
- Daily UIは情報設計を形にするUI案の引き出しを増やすにはいい練習だと思うが、配色だったりタイポグラフィーなりには別途練習が必要だなと思った
- Social Login のアイコン探すの地味にめんどかったんだが、figma のリソースとかあるのかな
- やっぱ慣れてないと「ボタンの高さって何pxがいいんだろう」みたいなので一個一個悩んでしまう。多分型みたいなのはサイズだったり色だったり、shadowだったり角丸だったりいろんなものにあるはずなので、一個一個身に付けていくと良さそう
- アプリかWebどっちかに絞った方が参考にする時困らなそう。アプリにするか