リアクティブWebデザイン:素晴らしいと感じるWebアプリを構築する秘secret

昨年、一部の開発者が2つの微妙なテクニックを使用して、Webアプリを遅くてジャンキーな感じから非常に反応的で洗練されたものにする方法を見てきました。

これらの手法は、リアクティブWebデザインという名前が必要になるほど重要だと思います。

要約すると、リアクティブWebデザインは、ネットワークの速度や待ち時間に関係なく、常に高速でユーザー入力に応答するサイトを構築するために使用できる一連の手法です。

Web開発者およびフレームワークの作成者として、私たちが構築するすべてのものでこれらのパターンをデフォルトにする方法を見つけることは、WebでのUXおよび知覚パフォーマンスを改善するための最優先事項です。

テクニック1:スケルトンスクリーンを使用したインスタントロード

よく使用すると、この手法はほとんど気付かれることはありませんが、サイトの知覚パフォーマンスに大きな影響を及ぼします。

興味深いことに、この手法はほとんどすべてのネイティブアプリで使用されており、ひどいネットワークでも非常に反応的に感じますが、Webではほとんど使用されません!

この機会は嘘です!

要するに、スケルトン画面は、ユーザーがボタンまたはリンクをタップするたびに、ユーザーを新しいページに移行し、コンテンツが利用可能になったときにそのページにコンテンツをロードすることにより、ページが即座に反応することを保証します。

スケルトン画面を使用して、最初に開いたときに知覚されるパフォーマンスを改善するFacebook

スケルトンスクリーンは、アプリケーションがはるかに速く感じるため、ユーザーが不思議に思う瞬間の数を劇的に削減するため、認識される重要なパフォーマンステクニックです。

何が起こっている?読み込み中ですか?正しくタップしましたか?

Flipkart.comは、このアプローチを利用するWebサイトのまれな例です。そのため、実際の結果を読み込むのに数秒かかる場合でも、カテゴリを閲覧したり、製品をタップしたりすることは非常に速く感じられます。

Androidのスタンドアロンモードでホーム画面から起動されたflipkart.comのスクリーンキャプチャ

この手法を最適に使用すると、サムネイルや記事タイトルなどの既に利用可能なコンテンツを再利用して、知覚されるパフォーマンスをさらに向上させ、負荷を本当に瞬時に感じることができます。

app.jalantikus.comは、スケルトンスクリーンパターンを使用し、トランジション全体でタイトルとサムネイルを再利用します

スケルトン画面を使用したサイトのテスト

サイトがこの手法をどれだけうまく使用しているかをテストするのは簡単です。Chromeネットワークエミュレーションを使用して、ネットワークの速度をできるだけ遅くし、サイト内をクリックします。これがうまく機能している場合でも、サイトはきびきびと感じ、入力に反応します。

Chromeネットワークエミュレーションでサポートされる最も遅い速度

テクニック2:要素の事前定義サイズによる「安定した負荷」

あなたはそれを使用しようとしている間にウェブサイトが飛び回っているという感覚を知っていますか?記事を読んでいるだけで、テキストは動き続けますか?それは「不安定な負荷」と呼ばれるものであり、火で燃やす必要があります。

slate.comコンテンツは、ページが読み込まれると非常に積極的にジャンプします。ネットワークの速度が遅いほど、ジャンプする時間が長くなります。

不安定なロードは、ウェブサイトとのやり取りを困難にし、それらを…よく…不安定にします!

不安定なサイトを閲覧すると、地震中に歩き回るのがどんな感じかをいつも思い出します

不安定な読み込みは、ページに埋め込まれた画像や広告によって引き起こされますが、サイズ情報は含まれません。デフォルトでは、ブラウザはこれらのサイズが読み込まれた後にしか認識しないため、画像が読み込まれるとすぐに、ページ全体がスライドダウンしますdown。

これを防ぐには、ページ上のすべてのタグに、含まれる画像のサイズを積極的に含める必要があります。

多くの場合、特定のページで使用される画像は常に同じサイズであるため、それらのサイズは単にHTMLテンプレートに含めることができますが、画像のサイズは動的であるため、画像をアップロードしてからテンプレート化するときにサイズを計算する必要があります作成時にHTMLに追加します。

<!-不安定なロードを防ぐために、常に画像にサイズを含める->

同じことが広告にも当てはまります。これは多くの場合、不安定な負荷の原因となっています。可能な限り、広告を含むdivを作成し、テンプレートで、この広告の大きさを最大限に推測してサイズを設定します。

不安定な負荷は、コンテンツが突然ジャンプしたときに読み取りに落ち着いたばかりであるため、低速ネットワークでは最悪の状態になります。

すべてを一緒に入れて

Reactive.surge.shに小規模なデモサイトを構築し、従来のWebデザインとリアクティブWebデザインの違いを示しました。

従来品のローディング

それがいかに遅いか、コンテンツのジャンプがどれほどイライラするかに注意してください。興味深いことに、モバイルデバイスでは、画面をタップしても反応が見られないため、この桁違いに迷惑です。

リアクティブWebデザインで記事を読み込む

事後対応設計により、負荷は瞬時に感じられ、戻るアイコンと記事タイトルを複数回タップしてもサイトは事後対応のままです。

まとめ

ネットワークが低速であるほど、ページ遷移がネットワーク上でブロックされ、ページが長時間ジャンプするときのユーザーエクスペリエンスが悪化します。

Reactive Web Designを使用すると、低速で痛みを伴うネットワーク上でも、経験をよりスピーディーでレスポンシブに感じることができます(「レスポンシブデザイン」という名前が既に付けられています!)。

エンゲージメントや収益など、KPIに対するパフォーマンスの認識の影響に関するコミュニティからのデータについて知りたいです!

さらに、フレームワークとライブラリの作成者に、スケルトン画面と安定ロードをデフォルトの設定(成功の穴とも呼ばれる)にする方法を検討することをお勧めします。

これについて考えがあれば、@ owencmにツイートしてください。これを楽しんだ場合は、♥をください。

追伸モバイルデバイスでデモサイトReactive.surge.shをチェックしてみてください。