UI Details JP

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

Renet Japan - Input e-mail one time

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

Chrome - Address bar show current page

Chrome のアドレスバーの予測候補で、現在開いているページの場合、ページを新規で開くのではなくそのタブに切り替えるアクションボタンが表示される 「切り替え」ボタンをクリックするとタブ切り替えになり、ボタン外をクリックすると通常通り遷移する 多数…

Zozotown - Search facets

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

Gmail - Show summary of purchase information

Amazon からの購入確認メールを受診トレイで開くと、購入詳細の知りたい概要(到着予定日、金額、購入商品)が上部に表示される わざわざ細かい本文を見なくても知りたい情報をすぐに確認できる

Google flight - Checkbox single active

チェックボックスは通常、複数選択が可能なため、複数選択している中からひとつだけを選択したい場合は対象以外のチェックを外す必要があるが、ここではオンマウスをした際に表示される「のみ」のリンクを押下すると、他のチェックが外れて、対象のみアクテ…

H&M - Toggle show item's photo style

h&m

商品一覧の画像を「商品画像」にするか、「モデル着用画像」にするかを切り替えることができる PCではマウスオーバーすることで切り替えることもできる わざわざ詳細ページを開かなくても自分の好きなスタイルの方で見れるのはありがたい

H&M - Signup form validation

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

Book off online - Remove bought item from bookmark

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

Rakuten fashion - Search by shop

横並びのナビゲーションと縦並びのリストが常に同期していて、省スペースかつ見やすさを保っている

Amazon - Notify bought already

すでに購入したことのある商品のページを見ると、購入したことのある旨を教えて、二重購入を防いでくれる。わざわざ購入履歴から探す手間もない。

macOS - Show finder in window

ウィンドウ内でファイル挿入する際などに Finder が表示されるが、呼び出し元のウィンドウ幅によって表示・非表示される際のアニメーションが異なる 幅が狭いと「よっこらしょっ」という感じでヌルっと出てくるが、幅が広いと普通にスッとスライドダウンして…

Gmail - Empty illustration

下書きがない場合 スヌーズがない場合 迷惑メールがない場合 各メールボックスに見合ったイラストが、そのメールボックスが空の場合にテキストと一緒に表示される 無機質な表現になりがちな場面に個性を出している

Twitter - Topic remove

トピックを「x」をタップして非表示にすると、今後表示されなくなる旨を知らせる もし都合が悪ければその場で取り消しできる 予め注記として表示しておくよりも、スマートかつ発見しやすく表示できる

Amazon - Notify shortcut

Tabbarsの右端のメニューから、アカウントに紐づくページにアクセスすると、アカウントメニューからアクセスできるツールチップを表示して、もっと便利にアクセスできることを伝えてくれる

iOS13 - Home app folders

ios

新着通知があるアプリが含まれているフォルダを長押しすると、その新着通知があるアプリにアクセスできる 複数アプリがある場合もリストで表示される また、長押ししたまま離さずに指を下もしくは上にずらすとリストにフォーカスを当てることができ、指を離…