ヘルプセンター

スクロールとローディングのマイクロアニメーションを作成する方法

ヤコブ・ニールセン

デンマークのウェブ・ユーザビリティ・コンサルタントで、「ニールセン・ノーマン・グループ」の創設者。コペンハーゲンのデンマーク工科大学でヒューマンコンピュータインタラクションの博士号を取得。

(ウィキペディア)

ヤコブ・ニールセンのユーザビリティ原則のひとつに、「システムは常に、何が起こっているのかをユーザーに知らせ続けるべきである」というものがある。

あなたのウェブサイトをこのルールに適合させる1つの方法は、マイクロ・アニメーション機能を提供することです。私たちは2種類のアニメーションを追加しました：
1.カスタマイズ可能な色のページ読み込みインジケーター：「ページが読み込まれています。
2.スクロール・インジケータで、現在ページのどの部分を見ているかをユーザーに伝えます。

ローディング・アニメーションとインジケーターの追加方法

その他」のカテゴリーからT228ブロックをページのトップに追加する。

これが、ローディング・アニメーションを使わない場合のページ・ローディングの様子である：

このブロックを追加すると、コンテンツの読み込みがスムーズになります：

ローディング・インジケータを表示する」チェックボックスを選択し、ブロックの設定パネルでローディング・インジケータの背景色を選択します。

ローディング・インジケーターを追加した後のページのローディングはこのようになる：

このインジケーターはサファリでは表示されません。 Safariには独自のページ読み込みインジケータがあります。

スクロールアニメーションの追加方法

ブロックの設定パネルで色とプログレスバーの高さを指定します。