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