UI Details JP

A collection of micro-interactions. Inspired by "Little Big Details".

form

Renet Japan - Input e-mail one time

メールアドレスの入力間違いを防ぐために、大体のサービスのフォームでは メールアドレスを2度入力させることが多いが、ユーザーにとってはかなり面倒な作業。慣れているユーザは最初に入力したメールアドレスをコピペするので、本来の目的が果たしにくくな…

Zozotown - Search facets

男性・女性・子供のアイコンをうまく使い、スッキリと分かりやすく表現している。価格指定のスライダーを操作すると、指で隠れて見えないことを防ぐために、見える位置に価格を表示している

H&M - Signup form validation

Good パスワード設定のテキストボックスでは、入力するたびに各条件をチェックし、条件を満たした時点でチェックマークがつく 視覚的に何を満たしていないのかがすぐに認知しやすい Bad 生年月日に関しては、遥か昔の日時を入れてもOKとなってしまうため問題…

Book off online - Remove bought item from bookmark

注文確定時に、購入商品に関する購入前に必要な情報や登録を解除することができる。 これにより不要な情報を受け取らずに済む。

Amazon - Input review

書籍の場合 文房具の場合 運動器具の場合 Good レビューできる項目が購入したアイテムのカテゴリ、ジャンルによって異なっており、より細やかなレビューができる。 Bad デフォルト X を押下後 「x」だと押下後どうなるかやや分かりにくかったので、「評価し…

Line - Auto focus to between brackets

括弧の始まりと終わりを連続入力して決定押下すると、自動で括弧の間にフォーカスされ、カーソルを移動せずにテキスト入力ができる。小さな工夫だが使い勝手が大きく向上する。 P.S LINEだけでなく、Twitter、Facebook、Instagram、slackでもできた Gmailやi…

Mooda - Open icon pack

パッケージに入っている状態で端末を傾けるとアイコンが向きに応じて移動する ドラッグで袋を開くことができる 何気ないところで遊び心があり、この遊びこそがこのアプリのブランディングになっている

Mooda - Insert image

画像を選択すると、インスタントカメラで撮ったようなアニメーションが表示された後に、インスタント写真の枠と一緒に画像が挿入される。 シンプルなアクションだが、楽しませる演出。

Mooda - Select icon

顔を選択する操作が単純に楽しい 普通のリストスタイルでも問題はないと思うが、顔オブジェクトの数と形(丸)と親和性が高いUI 今はまだ1個しかないが、選択した顔オブジェクトが増えるほどに画面が埋まっていく。その既存の画面を邪魔しない配置

Airbnb - Signup

テキストフィールドのプレースホルダーにラベルが付いていてわかりやすい上に省スペースになっている テキストフィールド(電話番号)にフォーカスするとアウトラインのカラー、太さ、形状が変わり一目でフォーカスしているのが分かる 電話番号を入力すると…