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