オフラインの UX に関する考慮事項

この記事では、低速ネットワークとオフラインの両方で優れたエクスペリエンスを作り出すのに必要な設計上の考慮事項をいくつか説明します。

ネットワーク接続の品質は、以下のような複数の要因の影響を受ける可能性があります。

  • プロバイダの対応エリアが狭い。
  • 極端な天候の状態。
  • 停電。
  • ネットワーク接続をブロックする建物など、「電波を受信できないエリア」をユーザーが移動している。

  • 電車での移動中やトンネルを通過中。

  • 空港やホテルなどでインターネット接続がアクティブや非アクティブになる場合に、インターネット接続がサードパーティによって管理されたり、タイムボックス化されたりする。

  • 特定の時間や特定日にインターネットへのアクセスを制限したり、アクセスできないようにしたりする必要がある文化的慣習。

目標とするのは、接続の変化の影響を最低限にとどめる優れたエクスペリエンスを提供することです。

ネットワークの接続状況が悪いときにユーザーに何を表示するか

最初に検討すべきことは、ネットワーク接続の正常時とエラー時に何が表示されるかということです。 接続が正常な場合は、アプリの通常のオンラインのエクスペリエンスです。 一方、接続がエラーであるとは、アプリがオフラインの場合の他に、ネットワークにラグが多い場合も該当します。ラグが多いネットワークの場合にアプリがどのように動作するかも問題です。

ネットワーク接続の正常またはエラーについて考える際は、以下の UX の重要な問題を検討する必要があります。

  • 接続が正常またはエラーであることを判断するのに必要な時間
  • 正常またはエラーを判断している間に実行できること
  • エラー時にすべきこと
  • 上記のユーザーに通知する方法

ユーザーに現在の状態や状態の変化を通知する

ネットワークのエラー時にユーザーが実行できる操作と、現在のアプリの状態をユーザーに通知します。 たとえば、通知内容は次のようにすることができます。

“You seem to have a bad network connection. [Not to worry!] Messages will be “sent when the network is restored.”

Emojoy。状態の変化が起こったときにユーザーに通知する絵文字メッセージ アプリ。
状態の変化が起こったときはできるだけ早くユーザーに明確に通知します。
状態の変化が起こったときにユーザーに通知する I/O 2016 アプリ。
Google I/O アプリは、マテリアル デザイン「トースト」を使用して、ユーザーにオフラインであることを知らせました。

ネットワーク接続の改善または回復

天気情報アプリの例。
この天気情報アプリのように、古いデータがユーザーの役に立たないアプリでは自動アップデートが必要です。

ネットワーク接続が改善した後のユーザーへの通知をどのように処理するかは、アプリによって大きく異なります。 株式市況アプリなどアップデートされた情報を優先的に表示する必要があるアプリでは、できるだけ早く自動アップデートすることや、ユーザーに通知することが重要です。

また、アプリの最終アップデート日時を目立つ場所に常に表示することもできます。 これは通貨換算アプリなどでも役立ちます。

最新ではない Material Money アプリ アップデートされた Material Money
Material Money は可能な場合は最新の通貨を表示し、アプリがアップデートされていない場合はユーザーに通知します。

ニュースアプリなどのその他のアプリは、タップするとアップデートされる機能を表示して、最新のコンテンツがあることをユーザーに知らせる簡単な通知を表示することがあります。 このようにするのは、ユーザーが現在記事を読んでいる場合に自動アップデートによってページが更新されると、読んでいたコンテンツがなくなってしまうからです。

ニュースアプリの例。通常の状態の Tailpiece ニュースアプリの例。アップデートできる状態の Tailpiece
オンライン新聞の Tailpiece は最新のニュースを自動ダウンロードしますが、ユーザーが記事をどこまで読んだかわからなくならないように、ユーザーが手動で更新できます。

コンテキスト状態とブラウジング モード

すべての UI にはその独自のコンテキストと機能があり、正常な接続が必要かどうかによって異なります。 例として、e コマースサイトで接続が再確立されるまでは購入ボタンや価格は無効ですが、オフラインでもブラウジングできることなどが挙げられます。

その他に、データを含めることがあるコンテキスト状態もあります。たとえば、金融アプリの Robinhood では、株式を購入でき、また色やグラフィックを使用してマーケットが開いたときに通知することができます。

マーケットが終了すると、インターフェース全体が白になってからグレー表示されます。 株価が上下すると、個々の株式ウィジェットがその状態に応じて緑になったり、赤になったりします。

オフライン モデルを理解できるようユーザーに情報提供する

オフラインは、すべての人にとって新しいメンタルモデルです。接続されていないときにどのような変化が起こるのかをユーザーに伝える必要があります。 大きいデータが保存される場所を通知し、デフォルトの動作を変更するための設定を行えるようにします。 内容全体を伝えるには、その独自のアイコンなど、1 つのデザイン端末を使用するのではなく、複数の UI デザイン コンポーネント(通知言語、アイコン、通知、色、画像など)を使用して、これらのアイデアをひとまとめにして伝えるようにしてください。

デフォルトでのオフライン エクスペリエンスの提供

アプリに大量のデータが必要ない場合は、そのデータをデフォルトでキャッシュします。ネットワークに接続しないとデータにアクセスできない場合、ユーザーはストレスを感じるようになる可能性があります。

できるだけエクスペリエンスが変わらないようにしてください。不安定な接続はアプリを信頼できないと感じさせてしまいます。ネットワーク エラーの影響が少ないアプリをユーザーは魅力的に感じます。

ニュースサイトはその日の最新のニュース コンテンツを自動ダウンロードして保存することが有効です。こうすることで、ユーザーは接続しなくてもその日のニュースを読むことができます(おそらく記事の画像がないテキストをダウンロードします)。

また、ユーザーの動作に合わせるようにします。つまり、いつも表示するのがスポーツ セクションの場合は、このデータを優先してダウンロードするようにします。

Tailpiece は、さまざまなデザイン ウィジェットでオフラインであることをユーザーに通知します Tailpiece には、オフラインで使用できるセクションを示すナビゲーション図があります。
端末がオフラインの場合、Tailpiece は引き続きアプリを使用できることを知らせるステータス メッセージでユーザーに通知します。

アプリがオフラインで使用できる場合にユーザーに通知する

ウェブアプリがオフラインで使用できる場合は、最初の読み込み時にユーザーに通知する必要があります。 これを行うには、操作に関する簡単なフィードバックを提供するウィジェットを使用して画面の下部にメッセージを表示します。たとえば、セクションが同期された場合や、データファイルがダウンロードされた場合などです。

使用している言語を再考して、ユーザーに適していることを確認します。 メッセージが使用されるすべてのインスタンスでメッセージが同じであることを確認します。 テクノロジーに詳しくない人はほとんどの場合オフラインという用語を誤解しているため、ユーザーに関係する言語に基づいて操作を使用します。

I/O アプリのオフライン Chrome Status サイトはオフラインです
Google I/O 2016 アプリと Chrome Status サイトでは、オフラインでアプリを使用できる場合はユーザーに通知します。

データの重いアプリでは「オフライン用に保存する」をインターフェースで目立つようにする

アプリで大量のデータを使用する場合は、ユーザーが設定メニューから自動ダウンロード動作を明確に要求しない限り、自動的にダウンロードするのではなく、オフラインで使用するためのアイテムを追加するスイッチやピンを必ず含めてください。

ピンまたはダウンロード UI が他の UI 要素によってわかりづらくならないようにし、この機能がユーザーに明確に伝わるようにしてください。

例として、大きなデータファイルが必要な音楽プレーヤーが挙げられます。ユーザーは関連する通信費用について理解していますが、オフライン時にプレーヤーを使用する場合があることも理解しています。

後で使用する音楽をダウンロードするには、前もって計画することが必要なため、これについての情報提供はオンボーディング中に行う必要があります。

オフラインでアクセスできるものを明確にする

提供しているオプションについて明確にしてください。ユーザーがスマートフォンに保存しているものや保存する必要があるものを簡単に確認できるように、「オフライン ライブラリ」を表示するタブや設定を表示する必要がある場合があります。

設定は簡潔にし、データの保存場所やデータにアクセスできるユーザーを明確にします。

操作の実際の費用を表示する

多くのユーザーは、オフライン機能と「ダウンロード」を同等と見なします。ネットワーク接続が定期的にエラーになったり、使用できなかったりする国のユーザーは、他のユーザーとコンテンツを共有したり、接続中にオフラインで使用するためにコンテンツを保存したりすることがよくあります。

データプランを利用しているユーザーは、費用を心配して大きいファイルのダウンロードを避けることがあります。そのため、ユーザーが特定のファイルやタスクについてアクティブに比較できるように関連費用を表示する必要があることもあります。

たとえば、上記の音楽アプリで、ユーザーがファイルの実費を確認できるように、ユーザーがデータプランを利用しているかどうかを検出してファイルサイズを表示するような場合です。

エクスペリエンスを台無しにすることを防ぐ

ユーザーは自分がエクスペリエンスを台無しにしていると気付かずに台無しにすることがよくあります。たとえば、Google Drive のようなクラウド共有アプリが出現するまでは、大きいファイルを別の端末から編集するためには、保存してメール添付するのが一般的でした。

台無しになったエクスペリエンスに引き込まれるのではなく、ユーザーが何を実現しようとしていたかに目を向けることが重要です。 つまり、大きいファイルの添付をどうしたらわかりやすくできるかを検討するのではなく、複数の端末で大きいファイルを共有するうえでの問題を解決します。

端末間での転送可能なエクスペリエンス

不安定なネットワーク接続でエクスペリエンスを実現する場合は、エクスペリエンスは転送可能なため、接続が改善されたら適切に同期されるようにします。たとえば、旅行アプリで予約している途中にネットワーク接続が失われるとします。

接続が再確立されると、アプリはユーザーのアカウントと同期するため、PC で予約を続行できます。 エクスペリエンスを転送できないと、ユーザーはとても不快に感じます。

たとえば、アプリが同期した場合やしていない場合は、ユーザーに現在のデータの状態を通知します。 可能な限りユーザーに情報提供しますが、メッセージがユーザーの負担にならないようにしてください。

包括的なデザイン エクスペリエンスを作成する

設計時には、ユーザーが操作やタスクを完了できるように誘導する、ユーザーの操作の邪魔にならない意味のあるデザイン端末、シンプルな言語、標準アイコン、意味のある画像を使用して、包括的になるように設計します。

シンプルで簡潔なガイド

優れた UX とは、デザインの優れたインターフェースというわけではありません。これには、ユーザーが利用するフローとアプリで使用される言語が含まれます。 アプリの状態や個々の UI コンポーネントを説明する場合は、専門用語を使用しないでください。 「アプリのオフライン」というフレーズでは、ユーザーにアプリの現在の状態が伝わらない可能性があることに留意してください

ダウンロード アイコンの例は良い例です
推奨:操作を説明する言語と画像を使用します。
Service Worker アイコンの例は悪い例です
非推奨:わかりづらい抽象的な用語は避けてください。

複数のデザイン端末を使用してわかりやすいユーザー エクスペリエンスを作成する

言語、色、視覚的なコンポーネントを使用して現在のステータスの状態の変化を説明します。 状態の説明に色のみを使用した場合、ユーザーは気付きにくく、視覚障害者にはわからない可能性があります。また、設計者は、オフラインを表すのに当たり前のようにグレー表示の UI を使用しますが、これはウェブでは読み込み済という意味になる場合があります。

グレー表示された UI は、要素が無効である(フォームでの入力要素など)ことを示すために使用されることもあります。 そのため、状態の説明に色のみを使用すると、混乱を招く可能性があります。

誤解を避けるために、複数の方法(色、ラベル、UI コンポーネントを使用するなど)で異なる状態を表します。

エラーの表示に色とテキストを使用する良い例。
推奨:デザイン要素を組み合わせて使用し、意味を伝えます。
色のみを使用した悪い例。
非推奨:起こっていることを説明するのに色のみを使用します。

意味を伝えるアイコンを使用する

情報は、意味のあるテキスト ラベルとアイコンを使用して正確に伝わるようにしてください。 ウェブでのオフラインの概念は比較的新しいため、アイコンのみでは問題が生じる可能性があります。 ユーザーは使用されているアイコンを勘違いしてしまうことがあります。たとえば、シルバー世代の人は保存にフロッピー ディスクを使用することを理解できますが、フロッピー ディスクを見たこともない若いユーザーはメタファーによって混乱する可能性があります。同様に、「ハンバーガー」メニュー アイコンをラベルなしで表示するとユーザーは混乱してしまいます。

オフライン アイコンを導入する場合は、業界標準の画像(存在する場合)に従うようにして、テキスト ラベルと説明も提供します。

たとえば、オフライン用の保存には、一般的にダウンロード アイコンを使用します。操作に同期が含まれる場合は、同期アイコンを使用します。 一部の操作は、ネットワークのステータスを説明するのではなくオフライン用の保存として解釈されます。

ユーザーに抽象概念を示すのではなく、伝えようとしている操作について考えてください。 たとえば、データの保存やダウンロードは基本的な操作です。

オフラインを伝えるさまざまなアイコンの例

オフラインは、コンテキストに応じてダウンロード、エクスポート、ピンなどさまざまな操作になります。 ヒントが必要な場合は、material design icon set をご覧ください。

他のフィードバック メカニズムを含むスケルトン レイアウトを使用する

スケルトン レイアウトは基本的にコンテンツが読み込まれているときに表示されるアプリのワイヤーフレーム バージョンです。 これにより、コンテンツが読み込まれている最中であることをユーザーに示すことができます。 ユーザーにアプリが読み込んでいることを通知するテキスト ラベルが表示されるプリローダー UI を使用することも検討してください。 たとえば、ワイヤーフレーム コンテンツを振動させて、アプリが動作していて読み込み中であることを示します。

これにより、ユーザーは進行中であることを再確認でき、アプリの再起動や更新を防ぐことができます。

スケルトン レイアウトの例 読み込まれた記事の例
スケルトン レイアウトの前後。

コンテンツをブロックしない

一部のアプリケーションでは、新しいドキュメントを作成するなどユーザーが操作をトリガーすることがあります。 新しいドキュメントを同期するためにサーバーに接続し、これを説明するために画面全体に読み込みモーダル ダイアログを目立つように表示するアプリもあります。

これは、ユーザーのネットワーク接続が安定している場合は適切に動作しますが、ネットワーク接続が不安定な場合はこの操作からエスケープできなくなり、UI により他の操作を実行できなくなります。コンテンツをブロックするネットワーク リクエストは避ける必要があります。

ユーザーがアプリのブラウジングを続行できるようにし、接続が改善したら実行および同期するタスクをキューに入れられるようにします。

ユーザーにフィードバックを提供して操作の状態を示します。たとえば、ユーザーがドキュメントを編集している場合は、オンラインのときとは異なる表示にしますが、ファイルが「保存された」ことと、ネットワークに接続されたら同期されることを表示するようにフィードバック デザインを変更することを検討してください。

これにより、ユーザーに利用可能な異なる状態について情報提供でき、ユーザーはタスクまたは操作が保存されたことを確認できます。

こうすることで、ユーザーはアプリを信頼して使用できるようになります。

次の 10 億人向けの設計

多くの地域では、ローエンド端末が一般的で、ネットワーク接続が不安定なため、多くのユーザーにとってデータの入手は困難です。 データの透明性を高め、データを節約してユーザーの信頼を得る必要があります。 接続環境の悪いユーザーを支援し、インターフェースを簡略化してタスクの高速化を実現する方法を検討します。 データが重いコンテンツをダウンロードする前に常にユーザーに尋ねるようにします。

ラグの多い接続を使用しているユーザーには低帯域幅オプションを提供します。たとえば、ネットワーク接続が遅い場合は、小さいアセットを提供します。 高品質または低品質のアセットを選択するオプションを提供します。

まとめ

ユーザーはこれらの概念に詳しくないため、情報提供することが重要です。たとえば、後で使用するためにダウンロードすることはオフライン対応データと同じであるなど、理解していることと関連付けるようにします。

不安定なネットワーク接続向けに設計する場合は、以下に留意してください。

  • ネットワーク接続が正常、エラー、不安定の場合にどのように設計するかを検討します。

  • データは高額になる可能性があるため、ユーザーに配慮します。

  • 全世界のほとんどのユーザーにとっての技術環境とは、ほぼ例外なくモバイルです。
  • ローエンド端末が一般的です。ストレージ、メモリ、処理能力に制約があり、画面は小さく、タッチスクリーンは低品質です。 パフォーマンスはデザイン プロセスの一部であることを理解しておく必要があります。

  • オフライン時でもユーザーがアプリをブラウジングできるようにします。

  • ユーザーに現在の状態と状態の変化を通知します。
  • アプリに大量のデータが必要ない場合は、デフォルトでオフラインを提供するようにします。
  • アプリのデータが重い場合は、オフラインで使用するためにダウンロードする方法をユーザーに伝えます。

  • 端末間で転送可能なエクスペリエンスを実現します。

  • 言語、アイコン、画像、タイポグラフィー、色を活用してユーザーに総合的にアイデアを表現します。

  • ユーザーに役立つような再確認やフィードバックを提供します。