DailyUI #001 -Sign Up-

DailyUI Challenge 1日目のお題「Sign Up」のモバイルUIをFigmaでデザインしました。

コンセプト

これからDailyUIで創るものは、自分が考えるこんなサービス、プロダクトがあればいいなをベースにデザインしていきます。

私は2年ほど前から気候変動の対策として環境に配慮した暮らしを自分ができる範囲から実践しているのですが、今回は日本ではまだ数少ないプラスチックフリーで野菜、果物などの生鮮食品を購入することができるプラットフォームのサインアップ画面を作りました。

サインアップかログインどちらをメインにもってくるかは大半のユーザーが新規か既存かによりますが、今回は新規サービスという仮定でサインアップ画面をメインで作りました。

デザインする時に意識したこと

■入力項目をできるだけ少なく
最初のハードルを限りなく低くして多くのユーザーに登録してもらいやすくしました。他に必要な情報があれば後からリクエストします。

■ サインアップとログイン画面を簡単に切り替えられるように
既存ユーザーがメインのサインアップページからスムーズにログインできる導線を意識しました。

■ 既存ユーザーがサインアップ画面に情報を入力してもログインできるようにする
これは上記のUIでは表現できていませんが、仮に既存のユーザーであるにもかかわらずサインアップ画面で間違えてそのまま情報を入力してもエラーで返さずに、Eメール情報が合っていればそのままログインページへ導きパスワード入力を要求することでユーザーのストレスも軽減できると思います。

■ サードパーティ経由でサインアップ、ログインできるようにする
ユーザーが情報を入力する手間が省けます。これはプロダクトを展開する地域でよく使われているサードパーティを意識する必要があります。日本で展開する場合だとFacebookユーザーよりもLINEユーザーが多いのでLINEをサードパーティとして表示するのがより適していると思います。

■ 確認用のパスワード入力欄を作る代わりに、
①入力したパスワードを切り替えボタンで見て確認できるようにする　
②入力した最後の文字を見せることによりタイプミスを減らす
２回パスワードを入力するのは誰もが面倒と感じていると思いますが、上記の２点を意識することで確認入力欄を作らずにパスワードの入力ミスを防ぎます。

■ パスワードの必須条件を表示する
あらかじめパスワードの必須条件を表示しておくことで、スムーズにパスワードを考えられエラーを防ぎます。

■ パスワードが必須条件を満たさなかったら何が足りないのか表示する
エラーだけを表示してユーザーにストレスを与えるのではなく、ユーザーに何が不足しているかに素早く気づいてもらいます。

∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞

Daily UI Challenge 1日目はユーザーがストレスなく登録できるようなサインアップ画面を意識してデザインしました。
こんな感じでデザインと意識したことをこれからも投稿していこうと思います。
目指せ１００日間完走💪

フィードバックやご意見など頂けると嬉しいです！

Daily UI Design Challenge, Inspiration, and Resources