2
1
アクセシビリティの知見を発信しよう!

ローダーにステップの進捗状況も付与する

Last updated at Posted at 2024-05-12

ノーフレームワークのプロジェクトでの開発です

1. 背景

業務でローダーを実装しています。

待機時間が長すぎるかつ、ステップが分かれている為以下の追加要件を満たしユーザのストレスを減らしたいと思います。

  • 進捗率の表示をしたい
  • 全体のステップのうち、今どこのステップなのか知りたい
    例)データ更新、計算、ダウンロード等

実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたいです。
また、拡張機能かつ、動いているサイトの要素も更新しない為スケルトンスクリーンは検討していません。

これを実現するにあたってどのようなローダー、はたまたローダーとは別の物にしようか考えたいと思います。

2. ステップインジケータ(Step Indicator)

ユーザーが複数のページにまたがるフォームやプロセスを、3つ以上のハイレベルなステップやチャプターに整理して作業している場合に利用されるべきである

ユーザの作業によりステップが変わる際に使うことを推奨されているため、今回の要件とは異なると考えました。

要件:実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたい

3. ローダー(スピナー)

ローダー + 「進捗状況と実行中のステップ名を表示」という物を作ってみます。
進捗状況・・・例)5ステップ中1ステップ目であることを示す

こちらのステップインジケータからヒントを得ました。

image.png
引用元

シンプルなローダー

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. 参考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1