待機状態のUIについて整理してみる(デザイン編)

Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UIのことです。ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため、今回はこのように言及させてください。 この記事では、既存のデザインガイドラインや既存のデザインシステムから待機状態の UI の概観、デザインにおいて考慮することをまとめます！ ベストプラクティスを提案するわけではなく、作成する際、配慮することを頭に入れて思考できる記事にします。 背景、課題感 WebFront-end における各 UI の実装を行おうと考えているが、実装する際、ビジネス側やデザイン側と実装する UI について話し合って作ることが多いです。 小さなプロジェクトだと、デザイナーがいない事も多く、Front-end

[yoshi-nkyma]

“ユーザーに待機状態を示し、待機を促す。”

[d4-1977]

待機状態って一口に言っても色々あるよねえ。適切に使い分けるにも、種類知っておくの大切そう！

[Eiichiro]

“ 10s IndicatorUI に注目してもらう限界 別サイトに移動したり、利用をやめる可能性あり 対処 ユーザーに終了時間を明示 待機状態の終了時間、タスク段階を示す 待機終了タイプが確定タイプの UI を用いる 予定からずれたり

[rryu]

スケルトンスクリーンはあの形で情報が埋まることはほぼないから表示されたら全然違ったという残念さの体験が積み上がるだけという。

[taguch1]

単にフリーズしてる場合と本当に必要な待機中の違いがわかれば割とデザインなんてどうでもいい。 極端にいうと待ち時間の中央値と現在の待ち時間を表示してるだけでもいいわ。とにかく固まってて無駄に待ってるの辛

[sotarok]

スケルトンスクリーンって、待機状態描写というより文脈的にはCLS対策で生まれてきた、という理解でいるんだよな。

[Keisuke69]

スケルトンスクリーンはちょっと賛同できない

[spark7]

「スケルトンスクリーン」こいういう待ち画面の方が、画面全体を書き換える方式より待たされ感が強いのは何でだろ。

[naoya2k]

僕が重視してほしいのは1点だ。電池とCPUを浪費するな。3秒以上待たせるときには60fpsのアニメーションは要らん。

[mayumayu_nimolove]

先生！ちょっと待っててねという文字じゃダメなんでしょうか？あと目が見えない人はこれらは意味ないんじゃないんでしょうか？