notitie

日々感じたことをメモ書き

【UI】Twitterのログイン画面をトレースして気がついたこと

f:id:rindarinda5:20170323155340p:plain

Twitterのログイン画面は至ってシンプルなデザインだった。始めに「新規登録」か「ログイン」のどちらかを選択し、そのあとそれぞれに続く画面に遷移する。上の2枚目、3枚目の画像は「ログイン」画面に続くものである。

気がついた点

  1. 文字入力する際に表示される縦バー?(どう表現すれば正しいのか分からない)の色が、一度も文字入力されていないときと文字入力したあとで異なっていた。
  2. 一度も文字入力されていないとき→#48B3F5
  3. 文字入力したあと→#1DA1F2 ちなみにこの色は画像1枚目の背景色、Twitterのロゴ、ログインボタンの背景色にも同様に使われていた。文字入力されていないときよりも少しだけ濃い青色を用いていたが、この狙いは何なのか。何気なく触っているだけでは気が付かない微妙な色の変化だけれど、これにも何らかの狙いがあるのだろう。

良いと思った点

  1. 画像2枚目、3枚目のキーボードすぐ上に配置してある「ログイン」が、一文字も入力していないときには背景色が白色のままであるのに対して、文字入力が行われると背景色が青色に変化する。ユーザーが入力するキーボードすぐ上で「ログイン」が青色に変わることで視認性が高まり、そこにログインボタンがあることを認識する手助けになると思った。それに合わせて、すぐ左に位置する「パスワードをお忘れですか」にも視線が流れると考えられるので、こちらも同時に認識されやすくなるのではないだろうか。
  2. キーボードすぐ上に「パスワードをお忘れですか」「ログイン」が配置されているのが良い。ユーザーは当然キーボードを用いて文字入力するわけだから、入力最中に指がすぐ届くところに「ログイン」等を配置することで無駄に指を移動させる必要もなくなりそう。