こんにちは。やまです。

Daily UI 001のテーマは【 Sign in 】でした。
今回は、２つのログイン画面をトレースしてみました！

利用しやすいログイン画面とは

わたし、ログインに失敗すること結構あるんですよね。。ユーザーIDやパスワードを忘れて、再設定したり、そもそもログインするのを諦めてしまったり。みなさんはどうでしょうか？？

ユーザーにとってログインは最終的にやりたいことではなく、ログイン後の行為が最終目的だと思います。

したがって、ログイン画面は必要情報を素早くかつ正確に入力できるかどうかがデザインする上で大切なポイントだと感じています。

どのような要素が好まれるか、トレースを経て気づいたことは、

・入力フォームやボタンが十分な大きさである。
・入力フォームに何を入力すればよいか記されている。
・色数が少なく、シンプルな設計。
・ログインに失敗したとき、赤字でエラー項目とその理由が表示される。
・ログインボタンの前後に十分な余白がある。
・パスワードの再設定、新規ユーザーへの新規登録を促す項目がある。

以上のような点かと思いました。

トレース①：Starbacks Coffee JAPAN

・色数：7色
・フォント：Hiragino Kaku Gothic Pro
・入力フォームのサイズ：W1035：H102
・ログインボタンのサイズ：W1037：H121
・ログインボタン周囲の余白：上68：下83

トレース②：メルカリ

・色数：5色
・フォント：YuGothic、Source Sans Pro
・入力フォームのサイズ：W934：H144
・ログインボタンのサイズ：W934：H151
・ログインボタン周囲の余白：上119：下122

※上記内容は、正式なものではないため、記載内容の真偽についてはご容赦願います。