アイキャッチ

DailyUI 001 signUp - 登録しやすい新規登録とは

アウトプット!アウトプット!アウトプット!

DailyUI 001
登録しやすい新規登録を考えてみました。

目次
はじめに
・何を作ったか
・意識したこと

具体的な工夫点
・遷移をひとつにする
・入力操作をアシストする
・過度な装飾を避け、シンプルに見せる
・わかりやすいフィードバックを示す
・文字を読みやすくする
・少しボタンを多くする

悩んだところ
片手操作をどうするか

おわりに
・まとめ
・おわりのおわりに

はじめに

何を作ったか
タスク管理アプリの新規登録 / ログイン遷移を作成。
しっかりとタスク管理したい男性がメインターゲット。

意識したこと
新規登録は、離脱を抑える、が最も重要です。そのため、遷移と操作をできる限り、少なく見せる、を意識しました。 なるべくはやくアプリ体験をしてもらえるように。

具体的な工夫点

1. 遷移をひとつにする

やったこと
新規登録とログインの遷移をまとめました。TOPで入力したメールアドレスが未登録 or 登録済 で遷移先を振り分け。

意図は?
遷移 = ボタンが減らせるので、TOP ですぐにメールアドレスの入力を表示できる。実際は、textfiled のフォーカスに 1 タップ使うので、操作数自体は変わらないが、すでに登録が始まっている感を演出しやすい。データ的に最も離脱しやすいのは、最初の入力なので、このステップのハードルを如何に減らして見せるか、を意識しました。

2. 入力操作をアシストする

やったこと
・パスワード管理アプリの連携アイコン
・リアルタイムバリデーション
・エラーはスナックバー

意図は?
パスワード管理アプリは言わずもがな。バリデーションとエラーについては、アラートやダイアログで表示するアプリが多いですが、「OK」など、閉じる操作が発生するので、個人的には避けたほうがいいかなと思ってます。そのため、操作を止めないより補助的なフィードバックを採用しました。

3. その他工夫点

やったこと
・装飾を限りなく減らす(ほぼロゴのみ)
・文字を読みやすく(title 以外もウェイトを少し太めに)
・フォーカス中の textfiled は下線に色付け
・少し大きめのボタンサイズ
意図は?
最低限の装飾
アプリ全体で「軽さ」を印象付けたかった + オンボーディングまで時間的に考える余裕がなかった。

太めのフォント

読みやすさアップ。実際、アプリ内で使うときは、他ともバランス取りながら。

フィードバック強めのテキストフィールド

わかりやすさアップ。背景色もうっすら色付けすると、タップ感ましまし。

少し大きめのボタン

iOS の場合、44pt 前後が多いですが、今回は、56pt に設定。
タップ率アップが主目的。あとは、テキストが大きめ + 太めなので、それらとバランスをとる意図も。

あと、
入力フォームなどは誤タップで「閉じる操作」しゃちゃう時があるので、入力項目があって「閉じる操作」があった場合、「本当にやめますか?」のような確認アラート出したほうが親切。

悩んだところ - 片手の閉じる操作

TOP でメールアドレスをタップした場合、入力項目が上にスライドする、を想定しました。モーダル的に表示する感じです。最近の iOS では、こういった場合、画面を下に引っ張って閉じる、の操作が増えてきました。

しかし今回は、以下観点から見送りました。
・気軽に閉じるものでもない(登録する or 離脱の 2 択しかない)
・タップで閉じるより誤操作増えそう(あ、入力したのに..! が起きそう)

新しいナビゲーションUI が出てきたとき、それぞれの良し悪しやケーススタディをしっかり把握しないとなぁ、と思います。

おわりに

登録しやすい新規登録とは
・遷移数を少なく見せる
・操作の手間を減らす
・無駄を省く

個人的には、遷移を減らす、ではなく、少なく見せる、が結構重要かなと思いました。

リファレンスの共有
dailyUI を作成する前にリファレンスをまとめてます。もしよければ参考まで。

おわりのおわりに
この記事が役に立ったぞ!という方、お気軽に「いいね」「シェア」いただけますと、素直にめちゃくちゃ嬉しいです。あと、ダメ出しもあればぜひ!

それでは、

最後まで読んでくださってありがとうございました!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートいただけた場合、書籍や note に使いたいと思います! ただ、note はあたまの整理とノウハウ共有が目的なので、もし参考になったよ、という場合は投げ銭ではなく SNS 等でシェア or スキ いただけると嬉しいです〜

わお!ありがとうございます!
27
0 → 1 を繰り返して、気付けば、売れないバンドマンからデザイナーになっていました。Zaim でデザイン × データ × マーケティングやってます。いいものを作ってちゃんと届けたい。

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。