Improve sync UI/UX: status of file

[tobiasKaminsky]

From: #2886 (comment)

But it would be great if the meaning of the red cross is in some way explained to the user. Is it "broken file", "not accessible", "no download possible / server broken"... or "not up to date"?! I bet most users might assume one of the first explanations. Maybe you add a toast informing the user that there are outdated files that need to be synced manually while in a mobile network. And maybe a red/white clock would resemble "outdated" much better than a red cross. :-)

Currently, the whole sync/offline/download feature is everything else than easy to understand for users.

This is how it currently looks like when a file is locally outdated / newer than server file.

So we need a symbol for out of sync (local file is newer / older than server file).
Those are from https://material.io/tools/icons/

Aditionally, do yo have an idea how to explain this a bit more to the user?

@nextcloud/designers
@AndyScherzinger
@sehucke

[AndyScherzinger]

Since we won't have "downloaded" anymore in the near future, couldn't we use a yellow circle with the up-/download icon dependening on if (local file is newer (upload icon) and server file is newer (download icon) ? Not perfect but it would show the missing/open action?

[tobiasKaminsky]

Why don't we have downloaded? Above screenshot is the new situation, and a correct downloaded and up to date file, is marked with the green check mark.

[AndyScherzinger]

Yes, while before we had that for "make available offline" and for download(ed) we hat the yellow donload icon. So I guess we don't need the downloaded icon anymore if we have the sync status icon, right?

[tobiasKaminsky]

I think you remember our old icons:

android/src/main/java/com/owncloud/android/ui/adapter/OCFileListAdapter.java

Lines 309 to 332 in 59cf6b9

	if (operationsServiceBinder != null && operationsServiceBinder.isSynchronizing(mAccount, file)) {
	//synchronizing
	gridViewHolder.localFileIndicator.setImageResource(R.drawable.ic_synchronizing);
	gridViewHolder.localFileIndicator.setVisibility(View.VISIBLE);
	} else if (downloaderBinder != null && downloaderBinder.isDownloading(mAccount, file)) {
	// downloading
	gridViewHolder.localFileIndicator.setImageResource(R.drawable.ic_synchronizing);
	gridViewHolder.localFileIndicator.setVisibility(View.VISIBLE);
	} else if (uploaderBinder != null && uploaderBinder.isUploading(mAccount, file)) {
	//uploading
	gridViewHolder.localFileIndicator.setImageResource(R.drawable.ic_synchronizing);
	gridViewHolder.localFileIndicator.setVisibility(View.VISIBLE);
	} else if (file.getEtagInConflict() != null) {
	// conflict
	gridViewHolder.localFileIndicator.setImageResource(R.drawable.ic_synchronizing_error);
	gridViewHolder.localFileIndicator.setVisibility(View.VISIBLE);
	} else if (file.isDown()) {
	gridViewHolder.localFileIndicator.setImageResource(R.drawable.ic_synced);
	gridViewHolder.localFileIndicator.setVisibility(View.VISIBLE);
	}

New ones are:

So we have

• synchronizing
• conflict
• downloaded (this was the yellow arrow down icon, if I remember correctly)

[AndyScherzinger]

Yes I remembered the old icon :) While I think the up/download icons within a yellow circle could be used for that (or red, also fine with that).

Waiting to hear the @nextcloud/designers feedback ❤️

[sehucke]

IMHO, it would be over-simplified if you try to compress all the information in a few simple icons.

The cases that need to be visible and understandable for the user (currently and for future 2-way sync - just to think this through):

1. File exists on the server only
2. File exists on both client and server
   1. Local version and server version match
   2. Local version is newer than the server version
   3. Local version is older than the server version
   4. Local version and server version both changed (conflict!)
3. File exists on the client only
   1. New file was added on the client
   2. Server version was deleted

I would suggest to boil the annotated icons down to their central function: quick status overview for the user, i.e. draw the user's attention to things he must handle. And then provide means to make the user capable of resolving the situation.

What about four icons, for...

• ... local version and server version match (e.g. a green check mark),
• ... syncing in progress (e.g. rotating arrows on blue ground),
• ... outstanding background actions like sync up/down, delete etc. (e.g. a yellow exclamation mark),
• ... a sync conflict, when it comes to 2-way sync (e.g. a red cross).

In this case the user could easily distinguish by color:

1. Green or no icon: Nothing to do
2. Blue: Lean back and wait
3. Yellow: Do not care unless you need the file right now.
4. Red: Oh, I got a problem to solve (right now)

The last two cases may need further action by the user: What do you think about an "info" icon just left of the "share" icon (maybe colored like the annotated icon)? By clicking it the user would get detailed information about why there is a yellow or red annotation.

1. Newer version available on the server. Will be synced on WiFi.
2. Outstanding upload. Will be synced on WiFi.
3. Server version got deleted. Will be synced on WiFi.
4. File version conflict.

That message could then be extended with actions to resolve the situation

1. Sync now (even over mobile networks)
2. Conflict resolution
   1. Keep local version
   2. Keep server version
   3. keep both and auto-rename the oldest

And to make this more complete:
If the server is currently unreachable you could show a warning message on top of the folder list as this would be a general "problem". Or/And you could display the last time the server's folder was checked for changes beneath the current folder name at the top.

[jancborchardt]

This is how it currently looks like when a file is locally outdated / newer than server file.

Why does this happen at all? It’s an unexpected state – we are a file sync platform after all and it should just automatically sync.

Any additional icons will just create confusion as we can’t properly explain them.

Or does this only happen in specific cases like file conflicts?

[sehucke]

Why does this happen at all? It’s an unexpected state – we are a file sync platform after all and it should just automatically sync.

In short: limited mobile data.

For many users it is a crucial requirement that they can sync on WiFi only. IMHO, if a state is expected or not is just a matter of expectations management. The user must understand what his actions, like downloading a file, really do. IMHO, this is a NFR of general importance. This app is great, but sadly not very self-explanatory. Thus, i wrote my suggestion above.

Any additional icons will just create confusion as we can’t properly explain them.

Please see my comment above for a suggestion. Would be great to hear your thoughts about it. :-)

[jancborchardt]

For many users it is a crucial requirement that they can sync on WiFi only.

If we sync on wifi only, then how do we know about the possible conflict? Getting the meta update from the server also incurs a data load, or do we see that as negligible?

Regarding your proposal:

... outstanding background actions like sync up/down, delete etc. (e.g. a yellow exclamation mark),

This should also be the blue circular arrows. Don’t see the need for the yellow exclamation mark there.

... a sync conflict, when it comes to 2-way sync (e.g. a red cross).

Right, when an actual conflict happened with different changes on mobile and server, we can show the red x. But not when the local file is older than the one on the server, as was shown in the screenshot.

What do you think about an "info" icon just left of the "share" icon (maybe colored like the annotated icon)?

This is too much in general cases. If there is a sync conflict then yes we can go for this, that’s a good idea! :)

But for the normal case of just files having changed on the server, stuff should just work. If you downloaded a file previously, it is apparent that it’s of some importance to you.