web-dev-qa-db-ja.com

「お待ちください」アニメーションを表示するにはどうすればよいですか?

私たちのウェブサイトに「お待ちください」ページを作成しなければなりません。普段は「お待ちください」という言葉を、回転するアニメーションと一緒に書いていると思いますが、本当にテキストが必要なのでしょうか?

砂時計や回転歯車の回転アニメーションで十分ではありませんか?現在、サイトに表示されるテキストよりも多くの情報が表示されています。

1
user9533

feedbackがすべてです。
直面している状況に応じてユーザーに適切なフィードバックを提供するために、いくつかの選択肢があります。以下に、テキストとアニメーションのガイドラインをいくつか示します。

  1. Text:ユーザーが期待する待機のタイプを明示するのに役立ちます。なぜ待つ必要があるのですか?彼らは待ち時間の理由を認識する必要がありますか? 「お待ちください」または「XからYにファイルをコピーしています...」は、ユーザーの期待の点で非常に異なる場合があります待ち時間を緩和します。
  2. アニメーション:アニメーションのタイプに関するトピック全体があり、通常、進行状況が確定している場合とそうでない場合の2つのシナリオがあります。 確定的な進行状況の場合、%インジケーター付きの進行状況バーを使用するでしょう。一方、不確定な進行状況には、いくつかの代替策があります:%のない進行状況バーと throbbers

このトピックに関する興味深い記事をいくつか紹介します。

2

CSS3アニメーションを使用すると、かなりクリエイティブにできます。従来の方法に固執する必要はありません。私のアプリケーションの1つには、ブラウザー全体に100%広がる10px(高さ)のレインボーバーがあります。デフォルトでは非表示になっており、ビューとページが読み込まれると、スライドしてアニメーション表示されます。それは、私たちのクライアントが邪魔にならないアニメーションを好むが、彼らはまだアニメーションを望んでいるからです。

私はユーザーが誰であるかについて考えます。私はペルソナが古いニュースであることを知っていますが、このような決定をする際には非常に役立ちます。これがお役に立てば幸いです。

画像に加えてテキストを入力しない場合は、write「お待ちください」を忘れないでください画像のalt属性内。画像のalt属性を書き込むことは、Web上で必須です。これは accessibility にとって重要です。

0

今日では、砂時計や旋回歯車の回転アニメーションがテキストよりも好まれています。ユーザーに視覚的な刺激を与えるため、テキストよりも魅力的です。時々、彼らは進行状況も表示し、ユーザーがどれだけ待つ必要があるかを知るのに役立ちます。

いくつかのケースでは、テキスト付きのアニメーションが好まれます。しかし、アニメーションを使用する大きな利点は、魅力的な体験を提供し、ステータスを表示することです。

0
D K