ノーフレームワークのプロジェクトでの開発です
1. 背景
業務でローダーを実装しています。
待機時間が長すぎるかつ、ステップが分かれている為以下の追加要件を満たしユーザのストレスを減らしたいと思います。
- 進捗率の表示をしたい
- 全体のステップのうち、今どこのステップなのか知りたい
例）データ更新、計算、ダウンロード等
実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたいです。
また、拡張機能かつ、動いているサイトの要素も更新しない為スケルトンスクリーンは検討していません。
これを実現するにあたってどのようなローダー、はたまたローダーとは別の物にしようか考えたいと思います。
2. ステップインジケータ（Step Indicator）
ユーザーが複数のページにまたがるフォームやプロセスを、3つ以上のハイレベルなステップやチャプターに整理して作業している場合に利用されるべきである
ユーザの作業によりステップが変わる際に使うことを推奨されているため、今回の要件とは異なると考えました。
要件：実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたい
3. ローダー（スピナー）
ローダー + 「進捗状況と実行中のステップ名を表示」という物を作ってみます。
進捗状況・・・例）5ステップ中1ステップ目であることを示す
こちらのステップインジケータからヒントを得ました。
シンプルなローダー
See the Pen loader with step progress information by 山根大生 (@uuylkesg-the-styleful) on CodePen.
このローダーの内側にステップの進捗とステップ名を表示させます。
ステップの進捗状況とステップ名も付与したローダー
See the Pen Loader with step progress information by 山根大生 (@uuylkesg-the-styleful) on CodePen.
4. 最後に
ユーザにとって優しい設計をしたいです！
ステップインジケータの名前、定義を知らなかったのでとても勉強になりました
5. 参考
- UI UXデザインやWebデザインの参考になるおすすめサイト38選を紹介
- https://www.granfairs.com/blog/staff/centering-by-css
- UIデザインを比較！ステップインジケータUIの意外な落とし穴とは？
- スケルトンスクリーンをちゃんと理解する
- MDN viewBox
- MDN cy
- MDN stroke-dasharray
- MDN tspan
- MDN text
- 待機状態のUIについて整理してみる(デザイン編
- ローディング演出に使えるアイデア7選
- これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
- コピペで簡単！ローディングアニメーションの参考になるサイトまとめ
- CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック
- ローディング画面実装のメリット・デメリット
- スケルトンローダーvsスピナーvsプログレスバー