このページでは、低速なネットワークとオフラインで優れたユーザー エクスペリエンスを実現するための設計ガイドラインについて説明します。
ネットワーク接続の品質は、次のようなさまざまな要因の影響を受けます。
- ネットワーク プロバイダの通信エリアが狭い。
- 極端な気象条件。
- 停電。
- ネットワーク接続を遮断する壁のある建物など、永続的な「デッドゾーン」に入る。
- 電車に乗っているときやトンネルを通過しているときなど、一時的な「デッドゾーン」に入る。
- 空港やホテルなど、時間制限のあるインターネット接続。
- 特定の時間帯や特定の日にインターネットへのアクセスを制限または禁止する文化的慣習。
デベロッパーとしての目標は、接続の変化の影響を軽減する優れたエクスペリエンスを提供することです。
ネットワーク接続が不安定な場合にユーザーに表示する内容を決定する
まず、ネットワーク接続の成功と失敗がアプリでどのように見えるかを確認します。接続が成功した場合は、アプリの通常のオンライン エクスペリエンスです。接続エラーには、アプリがオフラインで動作する方法と、遅延のあるネットワークで動作する方法の両方が含まれます。
接続エラーを処理する方法を決定するには、次の重要な UX に関する質問を自問します。
- 接続の成功または失敗を判断するまでの待機時間
- 成功または失敗が判明するまでの間、何ができるか
- 接続に失敗した場合はどうすればよいですか？
- お客様に状況をどのように伝えればよいですか？
現在のステータスとステータスの変更をお客様に伝える
アプリの状態と、ネットワーク障害が発生した場合に引き続き実行できる操作の両方をお客様に伝えます。たとえば、通知には次のような内容が含まれます。
ネットワーク接続が不安定なようです。ご心配は無用です。ネットワークが復元されると、メールが送信されます。
ネットワーク接続が改善または復元されたことをユーザーに通知する
ネットワーク接続が改善されたことをユーザーに伝える方法は、アプリによって異なります。天気や株式市場の追跡など、最新情報を優先するアプリは、できるだけ早く自動更新し、ユーザーに通知する必要があります。
マテリアル デザインのトースト要素などの視覚的な手がかりを使用して、ウェブアプリが「バックグラウンドで」更新されたことをユーザーに知らせることをおすすめします。これには、サービス ワーカーの存在と、その管理対象コンテンツの更新の両方の検出が含まれます。この関数の動作に関するコード例については、こちらをご覧ください。
たとえば、Chrome プラットフォームのステータスは、アプリが更新されたときにユーザーに通知を送信します。
一部のアプリでは、最終更新日を常に表示できます。たとえば、これは通貨換算アプリで特に役立ちます。
ニュースアプリでは、新しいコンテンツがあることをユーザーに知らせる、タップして更新するだけのシンプルな通知を表示できます。記事を自動更新すると、ユーザーが読みたい場所を失う可能性があります。
現在のコンテキスト状態を反映するように UI を更新する
各 UI 要素には、接続の成功が必要かどうかに応じて変化する独自のコンテキストと動作を設定できます。たとえば、オフラインでブラウジングできる e コマース サイトでも、接続が再確立されるまで料金と購入ボタンが無効になっている場合があります。
その他のコンテキスト状態には、データを含めることができます。たとえば、金融アプリの Robinhood は、色とグラフィックを使用して、株式市場が開いているかどうかをユーザーに伝えます。市場が閉まると、インターフェース全体が白色に変わり、その後グレー表示になります。株価が上がったり下がったりすると、各個別の株価ウィジェットが、その状態に応じて緑色または赤色に変わります。
オフライン モデルについてお客様に説明する
ほとんどのユーザーは、常にネットワークに接続されていることに慣れています。接続がない場合にアプリでどのような変更が行われるかをユーザーに説明する必要があります。大規模なデータが保存される場所と、デフォルトの動作を変更する設定をユーザーに伝えます。アイコンのみでストーリー全体を伝えるのではなく、複数の UI デザイン コンポーネント（情報提供のための言語、アイコン、通知、色、画像など）を組み合わせて、これらのアイデアを伝えます。
デフォルトでオフライン エクスペリエンスを提供する
アプリで多くのデータが必要ない場合は、そのデータをデフォルトでキャッシュに保存します。ネットワーク接続でのみデータにアクセスできる場合、ユーザーは不満を募らせる可能性があります。
できるだけ安定したエクスペリエンスを提供してください。接続が不安定だと、アプリが信頼できないものに見えます。ネットワーク障害の影響を軽減するアプリは、ユーザーの満足度を高めます。
ニュース サイトでは、最新のニュースを自動的にダウンロードして自動保存できます。テキストのみをダウンロードしてデータを節約し、ユーザーが接続なしで今日のニュースを読めるようにすることもできます。ユーザーが最もよく見るニュース カテゴリのダウンロードを優先することで、この動作をユーザーの動作に合わせて調整できます。
アプリをオフラインで使用できる状態になったことをユーザーに通知する
ウェブアプリを初めて読み込むときに、オフラインでの使用が可能かどうかをユーザーに示す必要があります。セクションの同期やファイルのダウンロードなど、操作に関する簡単なフィードバックを画面下部のメッセージを通じて提供するウィジェットを使用します。
使用している言語が視聴者に適していることを確認し、適用されるすべてのケースで同じフレーズを使用します。技術に精通していないユーザーは「オフライン」という言葉を誤解することがよくあります。そのため、ユーザーが理解できるアクションベースの言語を使用します。
インターフェースで「オフライン用に保存」を明確にする
アプリで大量のデータを使用する場合は、オフラインで使用するためにアイテムを追加するスイッチまたはピンがあることを確認します。ユーザーが設定メニューでこの動作を明示的にリクエストした場合にのみ、ファイルを自動的にダウンロードします。固定またはダウンロードの UI がユーザーにとってわかりやすく、他の UI 要素に隠れていないことを確認します。
たとえば、大容量のファイルを必要とする音楽プレーヤーなどです。ユーザーは関連するデータ通信料金は認識しているが、オフラインでプレーヤーを使用したい場合。後で使用するために音楽を一時保存するには、ユーザーが事前に計画を立てる必要があるので、オンボーディング時にそのことをユーザーに説明することをおすすめします。
オフラインで利用できるコンテンツを明確にする
提示するオプションを明確にします。ユーザーがデバイスに保存されているコンテンツと保存が必要なコンテンツを確認できるように、「オフライン ライブラリ」またはコンテンツ インデックスのタブまたは設定を表示する必要があります。設定は簡潔にし、データの保存場所とアクセス権を持つユーザーを明確にします。
アクションの実際の費用を表示する
多くのユーザーは、オフライン機能と「ダウンロード」を同義と見なしています。ネットワーク接続が頻繁に失敗する、または利用できない国では、ユーザーは他のユーザーとコンテンツを共有したり、接続があるときにオフラインで使用するためにコンテンツを保存したりすることがよくあります。
データ通信プランをご利用のユーザーは、費用がかさむのを恐れて大きなファイルをダウンロードしないことがあります。そのため、関連する費用を表示して、ユーザーが特定のファイルやタスクを比較できるようにすることもできます。たとえば、前述の音楽アプリは、ユーザーがデータプランを利用しているかどうかを検出し、ファイルサイズを表示して、ユーザーがファイルの費用を確認できるようにします。
ハッキングを防ぐ
ユーザーは、自分がハッキングしていることに気付かずにハッキングしていることが多いです。たとえば、クラウドベースのファイル共有ウェブアプリが存在する前は、ユーザーは大きなファイルを保存してメールに添付し、別のデバイスからそのファイルを編集するのが一般的でした。優れた UI は、ユーザーが解決しようとしている問題を、ハッキングされたエクスペリエンスに引き込まれることなく解決します。たとえば、サイズの大きなファイルをメールに添付する方法の使い勝手を良くするのではなく、サイズの大きなファイルをデバイス間で共有する方法を提供します。
デバイス間でエクスペリエンスを移行できるようにする
不安定なネットワーク向けにビルドする場合は、接続が改善されたらすぐに同期して、エクスペリエンスを移行できるようにしてください。たとえば、旅行アプリで予約の途中でネットワーク接続が切断された場合を考えてみましょう。接続が再確立されると、アプリはユーザーのアカウントと同期され、ユーザーはパソコンで予約を続行できるため、シームレスなエクスペリエンスが実現します。
データの状態をお客様に伝えます。たとえば、アプリが同期されているかどうかを表示できます。可能な場合はお客様に説明しますが、メッセージの量が多すぎてお客様を圧倒しないようにしてください。
包括的なデザイン エクスペリエンスを作成する
UX を設計する際は、ユーザーの邪魔にならないように、ユーザーがアクションやタスクを完了できるように、意味のあるデザイン デバイス、シンプルな言語、標準的なアイコン、意味のある画像を提供することで、包括性を高めましょう。
わかりやすく簡潔な表現を使用する
優れた UX は、インターフェースの設計だけではありません。これには、ユーザーがアプリ内でたどるパスと、そのパスで遭遇するすべてのもの（アプリがその経路の説明に使用する言語を含む）が含まれます。UI コンポーネントやアプリの状態を説明する際は、技術的な専門用語は使用しないでください。多くの場合、「オフライン」という単語は、アプリが何をしているかをユーザーに伝えるのに十分な明確さがありません。
複数の設計デバイスを使用してユーザー エクスペリエンスを向上させる
言語、色、視覚的なコンポーネントを使用して、ステータスやステータスの変化を表示します。色のみを使用して状態を示す場合、ユーザーが気付くのが難しい場合や、視覚障がいのあるユーザーが完全にアクセスできない場合があります。また、ウェブデザインでは無効な要素にグレーを使用する傾向があるため、グレーの UI を使用してアプリがオフラインであることを示すと、特に状態を示すために色のみを使用している場合は、オフラインでアプリができることについて混乱が生じる可能性があります。
誤解を防ぐため、アプリの状態を色、ラベル、UI コンポーネントなど、複数の方法でユーザーに伝えます。
意味を伝えるアイコンを使用する
アイコンの横には、意味のあるテキストラベルを使用してください。アイコンだけではわかりにくい場合があります。特に、ウェブでの「オフライン」のコンセプトは比較的新しいためです。アイコンが混乱を招くその他の例としては、フロッピー ディスクを使用して「保存」を表すアイコンがあります。フロッピー ディスクを見たことがない若いユーザーには意味がないものになる可能性があります。また、「ハンバーガー」メニュー アイコンも混乱を招く可能性があります。
オフライン アイコンを導入する場合は、業界標準のビジュアル（存在する場合）と整合させ、テキストのラベルと説明を指定します。たとえば、オフライン用に保存することを示すにはダウンロード アイコンを使用し、同期に関するアクションには同期アイコンを使用します。アイコンを使用してステータスを表す場合は、保存やダウンロードの操作と誤解される可能性があることに注意してください。
アイデアが欲しい場合は、マテリアル デザインのアイコンセットをご覧ください。
スケルトン レイアウトやその他のフィードバック メカニズムを使用する
アプリがコンテンツを読み込む間、読み込み中であることをユーザーに示すことで、アプリが機能していないとユーザーが思わないようになります。これを行う 1 つの方法は、スケルトン レイアウトを使用することです。これは、コンテンツの読み込み中に表示されるアプリのワイヤーフレーム バージョンです。また、アプリの読み込み中であることをユーザーに伝えるテキストラベル付きのプリローダー UI を使用するか、ワイヤーフレームのアニメーションをゆっくりと点滅させて、アプリが動作中であることをユーザーに伝えることも検討してください。これにより、何か処理が行われていることをユーザーに安心して伝えることができ、再送信や不要な更新を防ぐことができます。
フィードバックを提供して、アクションの状態を表示します。たとえば、ユーザーがオフラインでドキュメントを編集している場合は、フィードバック デザインを変更して、オンラインの場合とは視覚的に異なるようにしつつ、ファイルが「保存」され、ネットワークに接続すると同期されることを示すようにします。これにより、アプリの動作についてユーザーに説明でき、タスクやアクションが保存されていることをユーザーに安心してもらえるため、ユーザーはアプリをより安心して使用できるようになります。
コンテンツをブロックしない
一部のアプリでは、ユーザーが新しいドキュメントの作成などのアクションをトリガーする場合があります。一部のアプリは、新しいドキュメントを同期するためにサーバーに接続しようとします。このことを示すために、画面全体を覆う侵入的な読み込みモーダル ダイアログが表示されます。ユーザーのネットワーク接続が安定している場合は機能する可能性がありますが、ネットワークが不安定な場合は、このアクションから抜け出すことができないため、UI によって他の操作がブロックされます。
コンテンツをブロックするネットワーク リクエストを避ける。ユーザーがアプリのブラウジングを継続できるようにし、接続が改善されたときに実行および同期されるタスクをキューに追加します。
新興市場向けに設計する
多くの地域では、ローエンドのデバイスが一般的で、接続は信頼性が低く、多くのユーザーにとってデータは非常に高価です。データの透明性と節約を徹底して、ユーザーの信頼を獲得しましょう。接続が不安定なユーザーをサポートする方法や、タスクを迅速に進めるためにインターフェースを簡素化する方法を検討します。データ量の多いコンテンツをダウンロードする前に、必ずユーザーに確認してください。
遅延のある接続を使用しているユーザー向けに低帯域幅のオプションを提供します。低速のネットワーク接続では小さいアセットを提供するか、高品質または低品質のアセットを選択するオプションを提供します。
まとめ
ユーザーはオフライン デバイスに慣れていないため、教育がオフライン UX の鍵となります。学習を支援するには、よく知られているコンセプトと関連付けるようにします。たとえば、後で使用するためにダウンロードすることは、データをオフラインに保存することと同じであることを説明します。
不安定なネットワーク接続を想定して設計する場合は、次のガイドラインに従ってください。
- ネットワーク接続の成功、失敗、不安定さを想定して設計します。
- データ通信料は高額になる可能性があるため、ユーザーに配慮してください。
- 世界中のほとんどのユーザーにとって、テクノロジー環境はほぼモバイルのみです。
- 低価格帯のデバイスは一般的に、ストレージ、メモリ、処理能力が限られており、ディスプレイが小さく、タッチスクリーンの品質が低くなっています。パフォーマンスが設計プロセスの一部であることを確認します。
- ユーザーがオフラインのときにアプリをブラウジングできるようにします。
- 現在のステータスとステータスの変更をユーザーに伝えます。
- アプリで多くのデータを必要としない場合は、デフォルトでオフラインを提供するようにしてください。
- アプリのデータ使用量が多い場合は、オフラインで使用するためにダウンロードする方法についてユーザーに説明します。
- エクスペリエンスをデバイス間で転送できるようにする。
- 言語、アイコン、画像、タイポグラフィ、色を組み合わせて、ユーザーにアイデアを表現します。
- ユーザーを安心させ、フィードバックを提供します。