web-dev-qa-db-ja.com

オフラインかオンラインかをユーザーに知らせる方法は?

アプリはブラウザーベースで、ローカルストレージを使用してオフライン作業(制限された機能のためのインターネット依存性なし)および高速応答(データはローカルで利用できるので、ネットワーク呼び出しが少ないため)を促進します。

一部のトランザクションはインターネットなしで実行できますが、他のトランザクションは常にインターネットを必要とします。ユーザーはsynch-out(ローカルで作成されたレコードをフラッシュする)とsynch-in(更新のダウンロード)を随時行う必要があります。

ユーザーに連絡する必要があります(邪魔にならない方法で、詳細を認識しながら作業を続けることができます)。

  • 彼/彼女が現在オフラインであるかどうかにかかわらず、
  • 彼/彼女がオフラインになっている期間
  • 彼/彼女のブラウザストレージが最後に更新されたのはいつですか、
  • そして、いくつのレコードがインターネットなしでローカルに作成されました、そしてそれらはまだ同期アウトを保留していますか?

どうすればこれを達成できますか?この問題に対するUXの調査とベストプラクティスはありますか?

6
gurvinder372

オンラインモードではアプリは意図したとおりに機能するため、通常モードを強調表示する必要はありません。

オフラインモードでは、次の2つのケースを検討してください。
1。操作はネットワーク接続に依存しません。
アプリは小さな邪魔にならない通知を表示するので、ユーザーフローは中断しません。
オフライン時間、保留中のレコード数などのすべての技術詳細は、詳細に表示されるダイアログで確認できます。
enter image description here

2。アクションはネットワーク接続に依存します。
アプリは説明付きのダイアログを表示するため、ユーザーは制限を明確に理解します。

Gmailは、オフラインモードを扱う良い例を提供します。
1。メールを閲覧したり、新しいメールを作成したりできます。そのとき、Gmailは邪魔にならない通知を表示します。
enter image description here


2。しかし、ネットワーク接続が重要な場合、Gmailはそれを明確に述べています:

enter image description here

8

オフラインUXの調査については知りませんが、理想的な状況では、ユーザーがオフラインであることに気付かないはずです。すべてが通常どおり動作し、オフラインストレージに保存され、オンラインになると自動的に同期されます。

モバイルアプリケーションは同期が非常に優れており、オンラインかオフラインかを気にしません。私の主な例はEvernoteです。携帯電話で最もオフラインで使用しているからです。

  1. 現在オフラインかどうか

はじめに- オフライン状態のニースの大きなリストはここにあります 。しかし、他の人はここでその質問に十分に答えています。

  1. 彼/彼女がオフラインになっている期間

これは、「最後に保存されたX秒/分前」と言うだけでかなり簡単に実行できます。Googleのドキュメントではこれを実行していますが、ツールチップの下に隠しています。

enter image description here

  1. ブラウザのストレージが最後に更新されたのはいつですか

それは2で答えられるべきだと思います。

  1. そして、いくつのレコードがインターネットなしでローカルに作成されました、そしてそれらはまだ同期アウトを保留していますか?

Evernoteはこれに素晴らしいタッチを持っています。まるで「同期されるのを待っている」かのように扱います。私はこれのためにモバイルUIを探していましたが、見つかりませんでした。これは次のようになります。これがドキュメント/ノートの概要です。

enter image description here

編集:オフラインまたはオンライン(UX) に関するこの非常に便利で詳細な記事を見つけました:

私が表示していたドキュメント更新アイコンを参照すると、これは実際には「ダーティ」ドキュメントと呼ばれ、フォームのフィールドに同様に適用できます。

汚い記録

レコードが編集されたが、まだサーバーデータベースに同期されていない場合、「ダーティ」と見なされます。継承されたダーティは、子レコードが保存されたがまだ同期されていない場合に発生します。

編集または新しいレコードが保存された後、マーカーを使用して次のことを示します。

  • 「ダーティ」レコード(デフォルトは明るいオレンジ色の三角形)。
  • レコードは保存されましたが、まだ同期されていません。
  • 新しいレコード(デフォルトは青い三角形)。
  • 追加および保存されたが、同期されていないレコード。
  • 「継承されたダーティ」レコード(デフォルトは薄いオレンジ色の三角形)。
  • 「汚い」子の親。

enter image description here

データが同期されるとマーカーが削除されます

5
icc97

この問題に対するUXの調査とベストプラクティスはありますか?

たぶんProgressive Disclosureは、あなたが探しているUX用語です。なぜなら、すべての接続の詳細を常にユーザーにわずらわせる必要があるからですか?デバイス間でデータを同期する必要がある場合、データが「クラウド内」にあり、他のデバイスで使用できるかどうかをユーザーが直接確認すると便利であることを理解できます。ただし、詳細はデフォルトで非表示にして、必要な場合にのみ公開できます。これがどのように最適に設計されているかは、コンテキストなどの詳細がないとわかりにくいですが、これを実装する方法を理解するには、

同期していることを示す小さなアイコン:
enter image description here

そして、いくつかの変更が行われたがまだアップロードされていない場合:
enter image description here

詳細は、吹き出しバルーンまたはドロップダウンなど、ニーズに合ったもので表示できます。 enter image description here

4
jazZRo

オフライン/オンラインのステータスはユーザーまたはアプリにリンクされていますか?アプリ関連よりもユーザー関連のように感じます。

この場合、オンライン/オフラインの部分では、インスタントメッセージングアプリと同じようなことができます。たとえば、facebookには、ユーザーがオンラインのときは緑色のドットがあり、ユーザーがオフラインのときにオンラインであったときからの時間があります。

ブラウザーのストレージとレコード数については、アプリに関連しているように見えるので、ロゴの隣、または常に表示されるステータスバーとして追加します。

2
Liviu A

これは達成しようとしているものの素晴らしい実装です

enter image description here

offline.js

そして、左下隅に静的な通知がある同じライブラリがあります。

静的通知

0
dimshik