このページでは、低速のネットワークやオフラインでも優れたユーザー エクスペリエンスを実現するための設計ガイドラインについて説明します。
ネットワーク接続の品質は、次のようなさまざまな要因の影響を受ける可能性があります。
- ネットワーク プロバイダの通信範囲が狭い。
- 悪天候の場合。
- 停電。
- ネットワーク接続をブロックする壁がある建物など、恒久的に「デッドゾーン」に入る。
- 電車で移動中やトンネルを通るときなど、一時的に「行き止まり」のエリアに入る。
- 空港やホテルなどでのタイムボックス化されたインターネット接続。
- 特定の時間や特定の日にインターネット アクセスを制限するか、まったくアクセスできない文化的慣行。
デベロッパーの目標は、接続の変更による影響を軽減する優れたエクスペリエンスを提供することです。
ネットワーク接続が不安定なときにユーザーに表示する内容を指定できます
最初に確認すべき質問は、アプリのネットワーク接続の成功と失敗がどのようなものかです。正常な接続とは、アプリの通常のオンライン エクスペリエンスです。接続障害には、オフラインでのアプリの動作と、遅延のあるネットワークでのアプリの動作の両方が含まれます。
接続エラーの処理方法を決定するには、UX に関する次の重要な質問について自問してください。
- 接続が成功したか失敗したかを判断するまでにどのくらい時間がかかりますか？
- 成功か失敗かを判断している間に何ができるか？
- 接続に失敗した場合、どうすればよいですか？
- ユーザーに状況をどのように伝えますか？
現在の状態と状態の変化をユーザーに伝える
アプリの状態と、ネットワーク障害が発生した場合に実施できるアクションの両方をユーザーに伝えます。たとえば、通知は次のようになります。
ネットワーク接続が不安定なようです。ご心配は無用です。ネットワークが復元されると、メッセージが送信されます。
ネットワーク接続が改善または回復したときにユーザーに通知する
ネットワーク接続が改善されたことをユーザーに伝える方法は、アプリによって異なります。天気情報や株式市場トラッカーなど、現在の情報を優先するアプリは、できるだけ早く自動更新してユーザーに知らせる必要があります。
マテリアル デザイン トースト要素などの視覚的な手がかりを使用して、ウェブアプリが「バックグラウンドで」更新されたことをユーザーに知らせることをおすすめします。これには、Service Worker の存在とそのマネージド コンテンツの更新の両方の検出が含まれます。この関数のコード例はこちらで確認できます。
一例として、Chrome プラットフォームのステータスがあります。これは、アプリが更新されるとユーザーにメモを投稿します。
一部のアプリでは、最終更新日時が常に表示される場合があります。たとえば、これは通貨換算アプリで特に役立ちます。
ニュースアプリでは、新しいコンテンツをユーザーに知らせるシンプルな「タップして更新」通知を表示できます。記事を自動更新すると、ユーザーが離れていく原因になる。
現在のコンテキスト状態を反映するように UI を更新する
各 UI 要素には独自のコンテキストと動作を設定できます。これは、正常な接続が必要かどうかに応じて変わります。例として、オフラインで閲覧できる e コマースサイトがありますが、接続が再確立されるまで価格と購入ボタンは無効になっています。
他の形式のコンテキスト状態にはデータを含めることができます。たとえば、金融アプリの Robinhood は色とグラフィックを使用して、株式市場が開いていることをユーザーに伝えます。インターフェース全体が白色に変わり、市場が終了するとグレー表示されます。株価が増減すると、個々の株価ウィジェットが状態に応じて緑色または赤色に変わります。
オフライン モデルについてお客様に説明する
ほとんどのユーザーは、常にネットワークに接続することに慣れています。ユーザーがインターネットに接続していない場合に、アプリの変更点について説明する必要があります。大きなデータの保存場所を伝え、デフォルトの動作を変更するための設定を行います。アイコンのみなど、単一のデザインの選択肢に頼って全体像を伝えるのではなく、複数の UI デザイン コンポーネント（有益な言語、アイコン、通知、色、画像など）を使用してこれらのアイデアを伝えます。
デフォルトでオフライン機能を提供する
アプリで大量のデータが必要ない場合は、そのデータをデフォルトでキャッシュに保存します。ネットワーク接続でのみデータにアクセスできる場合、ユーザーの不満はますます高まります。
エクスペリエンスをできるだけ安定させるようにしましょう。接続が不安定な場合 アプリに信頼できない印象を与えますネットワーク障害の影響を軽減するアプリは、ユーザーに喜びをもたらします。
ニュースサイトでは、最新ニュースの自動ダウンロードと自動保存を利用できます。たとえば、テキストのみをダウンロードしてデータを保存し、ユーザーが接続しなくても今日のニュースを読むことができます。この動作をユーザーの行動に合わせるには、ユーザーがよく閲覧するニュース カテゴリのダウンロードを優先します。
アプリがオフラインで使用できる状態になったときにユーザーに通知する
ウェブアプリを初めて読み込むときに、オフラインで使用できる状態かどうかをユーザーに示す必要があります。これを行うには、操作に関する簡単なフィードバックを提供するウィジェットを使用します。たとえば、セクションが同期されたときやファイルがダウンロードされたときなど、画面下部のメッセージを通じて通知されます。
使用する言語が対象者に適していることを確認し、適用されるすべてのケースで同じ言い回しを使用します。技術に詳しくない相手は「オフライン」という言葉を誤解することが多いため、代わりに、対象者が共感できる行動ベースの言葉を使用してください。
[オフライン用に保存] がインターフェースで明示
アプリで大量のデータを使用する場合は、オフラインで使用するアイテムを追加するためのスイッチまたはピンを用意してください。ユーザーが設定メニューでこの動作を具体的に求めている場合にのみ、ファイルを自動ダウンロードします。ピンまたはダウンロード UI がユーザーにとって明確であり、他の UI 要素に隠れていないことを確認します。
その一例が、大きなファイルを必要とする音楽プレーヤーです。関連するデータ費用がユーザーに表示されますが、プレーヤーをオフラインで使用することもできます。後で使用するために音楽をダウンロードする場合、ユーザーは事前に計画を立てる必要があるため、オンボーディング時にユーザーに説明することをおすすめします。
オフラインで何を利用できるかを明確にする
どのような選択肢を提供するのかを明確にします。場合によっては、「オフライン ライブラリ」やコンテンツ インデックスのタブや設定を表示して、ユーザーがデバイスに保存されているデータと保存する必要があるデータを確認できるようにする必要があります。設定を簡潔にし、データの保存場所と、データにアクセスできるユーザーを明確にします。
アクションの実際の費用を示す
多くのユーザーは、オフライン機能を「ダウンロード」とみなしています。ネットワーク接続が定期的に失敗する国や利用できない国のユーザーは、他のユーザーとコンテンツを共有したり、接続中にオフラインで使用できるようにコンテンツを保存したりすることがあります。
データプランのユーザーは、コストを懸念して大きなファイルのダウンロードを避けることがあるため、関連する費用を表示して、ユーザーが特定のファイルやタスクを効果的に比較できるようにすることをおすすめします。たとえば、前述の音楽アプリでは、ユーザーがデータプランを利用しているかどうかを検出し、ユーザーがファイルの料金を確認できるようにファイルサイズを表示できます。
ハッキングの防止を支援
ユーザーは、体験したことに気付かないうちに手口をハッキングしがちです。たとえば、クラウドベースのファイル共有ウェブアプリが登場する前は、サイズの大きいファイルを保存してメールに添付して、別のデバイスから引き続き編集できるようにすることが一般的でした。優れた UI は、ハッキングされたエクスペリエンスに引き込まれることなく、ユーザーが解決しようとしている問題を解決します。たとえば、サイズの大きなファイルをメールに添付するほうがユーザー フレンドリーなものにするのではなく、デバイス間で大きなファイルを共有する方法を提供します。
デバイス間でエクスペリエンスを移行できるようにする
不安定なネットワーク向けに構築する場合は、接続が改善したらすぐに同期して、エクスペリエンスを移行できるようにしてください。たとえば、旅行アプリが予約の途中でネットワーク接続を失ったとします。接続が再確立されると、アプリはユーザーのアカウントと同期し、ユーザーはデスクトップ デバイスで予約を続行でき、エクスペリエンスをシームレスに行うことができます。
データの状態をユーザーに伝えます。たとえば、アプリが同期されているかどうかを表示できます。可能な限りユーザーに説明しますが、メッセージを多用しすぎないようにしてください。
インクルーシブなデザイン エクスペリエンスの創出
UX を設計する際は、ユーザーが邪魔にならないように操作やタスクを完了できるよう、意味のあるデザイン デバイス、シンプルな言語、標準的なアイコン、意味のある画像を用意して、インクルーシブなものにしましょう。
シンプルでわかりやすい表現を使用する
優れた UX とは、インターフェースを設計することだけではありません。これには、ユーザーがアプリ内を移動した経路と、その過程でユーザーがたどるすべてのものが含まれます。その中には、アプリがそのジャーニーを説明するために使用する言語も含まれます。UI コンポーネントやアプリの状態を説明する際は、専門用語を使用しないでください。「オフライン」という言葉では、アプリが何をしているかをユーザーに明確に伝えるには不十分です。
さまざまなデザイン デバイスを使用して、使いやすいユーザー エクスペリエンスを実現する
言語、色、視覚的なコンポーネントを使用して、ステータスまたは状態の変化を表示します。色のみを使用して状態を表示すると、ユーザーが気づきにくいこともあれば、視覚障がいのあるユーザーが完全に利用できないことさえあります。また、ウェブデザインでは無効になっている要素にグレーを使用する傾向があるため、グレーの UI を使用してアプリがオフラインであることを示すと、特に状態の表示に色のみを使用する場合に、アプリがオフライン中に行えることについて混乱が生じる可能性があります。
誤解を防ぐために、アプリの状態を色、ラベル、UI コンポーネントなど、複数の方法でユーザーに示します。
意味を伝えるアイコンを使用する
アイコンとともに、わかりやすいテキストラベルを使用するようにしてください。ウェブ版の「オフライン」という概念は比較的新しいため、アイコンだけでも混乱する可能性があります。その他に、フロッピー ディスクで「保存」を表すアイコンが紛らわしい場合があります。「保存」を表すアイコンは、フロッピー ディスクを見たことがない若いユーザーにとっては意味をなさない可能性があるほか、「ハンバーガー」メニュー アイコンも使用されることがあります。
オフライン アイコンを導入する場合は、業界標準のビジュアルが存在する場合はそれに合わせ、テキストラベルと説明を提供します。たとえば、オフライン用の保存を示すダウンロード アイコンや、同期を伴う操作の同期アイコンなどです。保存やダウンロードと解釈される可能性のあるステータスを示すためにアイコンを使用する場合は注意が必要です。
さらにアイデアを得るには、マテリアル デザインのアイコンセットをご覧ください。
スケルトン レイアウトとその他のフィードバック メカニズムを使用する
アプリがコンテンツを読み込んでいる間は、コンテンツが壊れているとユーザーが思わないように、コンテンツを読み込んでいます。そのための 1 つの方法は、スケルトン レイアウトを使用することです。スケルトン レイアウトとは、コンテンツの読み込み中に表示されるアプリのワイヤーフレーム バージョンです。また、アプリの読み込み中であることを示すテキストラベルとともにプリローダー UI を使用するか、ワイヤフレームを穏やかに点滅させるアニメーションを使用して、動作していると見せかけることも検討してください。これにより、ユーザーは何が起こっているかを再認識でき、再送信や不要な更新を防ぐことができます。
フィードバックを送信して、操作の状態を示します。たとえば、ユーザーがオフラインでドキュメントを編集している場合、フィードバック デザインを変更して、オンライン時とは明らかに異なるものにします。ただし、ファイルは「保存済み」であり、ネットワーク接続があると同期されるようになります。これにより、ユーザーはアプリの動作を理解し、タスクやアクションが保存されているという安心感を得ることができるため、ユーザーは安心してアプリを使用できます。
コンテンツをブロックしない
一部のアプリでは、ユーザーが新しいドキュメントを作成するなどの操作をトリガーすることがあります。アプリによっては、サーバーに接続して新しいドキュメントを同期しようとします。このことを示すために、画面全体を覆う煩わしい読み込みモーダル ダイアログが表示されます。ユーザーのネットワーク接続が安定している場合はこの方法が有効ですが、ネットワークが不安定な場合、ユーザーはこのアクションを回避できないため、UI によって他の操作がブロックされます。
コンテンツをブロックするネットワーク リクエストは避けてください。ユーザーがアプリのブラウジングを続けられるようにして、接続が改善したときに実行および同期されるタスクをキューに入れます。
新興市場向けの設計
多くの地域では、ローエンド デバイスが一般的で、接続の信頼性が低く、多くのユーザーにとってはデータが非常に高価です。透明性を確保してデータを節約し ユーザーの信頼を得ましょう接続が不安定なユーザーを支援し、インターフェースを簡素化してタスクを高速化する方法を検討します。データ量の多いコンテンツをダウンロードする前に、必ずユーザーに確認するようにしてください。
接続が遅いユーザー向けに低帯域幅のオプションを提供する。低速のネットワーク接続では小規模なアセットを提供するか、高品質または低品質のアセットを選択できるようにします。
おわりに
ユーザーはオフライン UX に慣れていないため、教育はオフライン UX の鍵となります。生徒が学習できるように、後で使用するためにダウンロードすることはオフライン データと同じであることを説明するなど、なじみのあるコンセプトと関連付けるようにしてください。
不安定なネットワーク接続を考慮して設計する場合は、次のガイドラインに留意してください。
- ネットワーク接続の成功、失敗、不安定性を考慮した設計。
- データ通信料が高額になる場合があるため、ユーザーに配慮する。
- 世界のほとんどのユーザーにとって、テクノロジー環境はほぼモバイルに限定されています。
- ローエンド デバイスは一般的で、ストレージ、メモリ、処理能力が限られており、ディスプレイが小さく、タッチスクリーンは低品質です。設計プロセスにパフォーマンスを 含めるようにしてください
- オフラインのときでもアプリをブラウジングできるようにします。
- 現在の状態と状態の変化をユーザーに伝えます。
- アプリで大量のデータが必要ない場合は、デフォルトでオフラインを提供してみます。
- アプリのデータ量が多い場合は、オフラインで使用するためにダウンロードする方法をユーザーに説明してください。
- デバイス間でエクスペリエンスを移行できるようにする。
- 言語、アイコン、画像、タイポグラフィ、色を組み合わせて、ユーザーにアイデアを表現します。
- 安心感を与え、フィードバックを提供してお客様をサポートする。