New sync state icons

[jancborchardt]

I worked on a new set of sync icons (also to fix #43). They are based on 16*16 grid, use our rounder style and don’t use the logo anymore (cause that’s very wide and caused the icon to be small).
These can be used for both the tray icon as well as the sync state over the files themselves.

Actual 16*16 size:

For the monochrome icons, the icon in the circle will be cut out of the circle, hence be transparent. For the colored one, the icon in the circle will be white to work on both light and dark backgrounds, as well as on mobile where it can overlap image previews even more.

What do you think @rullzer @pfiff45 @AndyScherzinger @tobiasKaminsky @mario @marinofaggiana will this work on desktop and mobile too? cc @nextcloud/designers

Just one question: Do we really need all the states?

• The one I never saw and would like to get rid of is the green »Download« icon. It should be the blue sync one if downloading, and the green checkmark if downloaded / synced. See also »state-download« icon #10
• Also, what’s the difference between the info-grey and warning-yellow icon? The info-state is really strange – either there is an issue you need to look at, or it’s not an issue.

[AndyScherzinger]

@jancborchardt Nice work! 👍 ...and yes this will work on Android while I need the source files though to create the overlay image work :)

[MorrisJobke]

The one I never saw and would like to get rid of is the green »Download« icon. It should be the blue sync one if downloading, and the green checkmark if downloaded / synced. See also #10

👍 get rid of the down arrow. The sync one should also be fine for the download state on mobile devices.

Also, what’s the difference between the info-grey and warning-yellow icon? The info-state is really strange – either there is an issue you need to look at, or it’s not an issue.

Yep - get rid if this "i".

[MorrisJobke]

And this would also allow to not need to brand those icons anymore. Just use the default and the branded clients looks fine as well. 😉

[enoch85]

"i" could be "Someone shared X with you" in activites, or no?

[AndyScherzinger]

get rid of the down arrow. The sync one should also be fine for the download state on mobile devices.

@MorrisJobke how do you distinguish between "downloaded" and "kept available offline" (as-in-constantly-kept-in-sync-with-the-server)?

[MorrisJobke]

@MorrisJobke how do you distinguish between "downloaded" and "kept available offline" (as-in-constantly-kept-in-sync-with-the-server)?

The little star icon?

[AndyScherzinger]

The little star icon?

Right! Whoops.... ;)

[jancborchardt]

And this would also allow to not need to brand those icons anymore. Just use the default and the branded clients looks fine as well.

Exactly. One point of course is how to distinguish between Nextcloud and other apps like Dropbox, Google Drive etc. But that’s easy, since ours is the only simple non-branded one. :) Actually quite nice.

[jancborchardt]

Here’s the updated states with download icon and info icon removed, and Pause icon made grey (makes more sense than yellow cause it’s a chosen state):

Anything else? What’s the exact difference between warning and error?

[MorrisJobke]

Anything else? What’s the exact difference between warning and error?

warning: a file has conflicts but both states are synced
error: internal server error for example

[jancborchardt]

Ok - last question:

The grey 3-dot icon, is that "connecting" or what? Cause when you are connecting, we could show the blue circular arrow. And when you are offline (but no local changes) show green checkmark - when offline with local changes show the yellow (!)

Or why do we need a separate icon for that?

[MorrisJobke]

The grey 3-dot icon, is that "connecting" or what? Cause when you are connecting, we could show the blue circular arrow. And when you are offline (but no local changes) show green checkmark - when offline with local changes show the yellow (!)

This is also the icon if you have no folders in your sync list or when you start the app the first time, then there is the setup screen and this tray icon.

[maverick74]

instead of using a regular circle - that IMHO does not bring into mind nextcloud at all - why not use the side circles instead?

This seems more "nextcloud characteristic" (it does, however, bring a lot of other issues, such as the size of the icons it will have to contain within, for example)

[jancborchardt]

@maverick74 yep, of course I tried this out too and as you said, the size of the icons within will be much too small. The icons are based on a 16*16px grid, and the thickness of lines is only 2px already. Reducing it would be too little.

[jancborchardt]

Since I wasn’t 100% happy with the »Connecting« icon (conflict with our 3-dots icon which stands for menu, and isn’t really identifiable as Nextcloud), I adjusted it to work better for a first-run experience:

I think this is the final version and I’ll prepare a pull request to replace the icons. Any last feedback @MorrisJobke @AndyScherzinger @rullzer @skjnldsv @juliushaertl @pixelipo anyone else? :)

[skjnldsv]

I'm ok with this! :)

[MariusBluem]

Well... with the Nextcloud Logo as connecting-icon you introduced the brand again. The advantage of the other icon was that it was unbranded and more easy to use for providers, ... :)

[skjnldsv]

Good point @MariusBluem

[jancborchardt]

Then let’s say for branded providers we can use the 3-dot-icon as the connecting one? @rullzer @jospoortvliet @MorrisJobke does that work? Maybe we can even adjust it according to the chosen icon, although that might be too much? cc @juliushaertl

If it’s too much of a hassle of course we can just go back to the 3-dot icon too. What do y’all think?

[AndyScherzinger]

👍 fine by me :)

[MorrisJobke]

Fine by both

[jancborchardt]

Pull request at #200, please review :)

[childnode]

(got pointed here from #201)
But I have to throw s.th. in (even the change is "done")
The change not also implies updated Icons (yes, with some unfitting properties/sizing, etc as discussed in #201), but also provide a clear change in recognizability - in a bad way... I'm not able to recognize it as the sync icon anymore neither to assiociate it with "nextcloud" or a "product" and perhaps others think/feel the same?

@jds2726 "minimalistic" doesn't mean to throw away any UX (not saying I'm a expert). Even a (sorry) loveless, boring cloud icon doesn't improve anything if you ask me.
If any cloud service provider will update their Icon to a cloud icon, we'll end up in a hell of coloured cloud icons (wink Microsoft)

I think the icons before were far way meaningful even they were not perfect and had their own problems - especially the branding

so: thank you @jancborchardt for the efford and the change and to throw in s.th. to think about ;)

But honestly, I really hope anyone has the time and the skills to improve this "icon set" one more time. Unfortunately: as a typical dev, I'm not in ;/ I was just able to express what I "feel"

[jancborchardt]

@childnode yes, I agree that in theory the icons before were better, that's why I made them. :) However in practice they lead the important part of the icon – the indicator itself – to be way too small, because of the logo being quite wide and this very small when put in a square.

I will experiment with the state icons overflowing the logo or being outside of it.

[maverick74]

I think @schokonsti 's second version is definitely worth a recheck and some extra work!!! It might actually be the best of all if he can make it work.

I would like to see a colored version of it (beside the mono). A few ideas:
I think that using the background circle with colors to indicate the state - in the colored version - is a great bet! (i would suggest using Green, Blue, (dark)Yellow, Gray, Orange and Red respectively).
Also, i think that (in the error icon, for example) if there was more space between the X and the other two circles it would work better...
Another idea is for disconnected icon to not have the centered circle

With that set of icons we can keep the logo and show the state.

[alexanderdd]

Hey, I kinda hope we come to a common decision soon. How do we make decisions around here, simple majority/consensus? I'm just gonna suggest a decision-making process, please don't be offended:

I feel like we need to make two decisions, for color and monochrome. In your next comment, please post the following "phrases" to show your preference:

COLOR

1. post "C1" if you prefer version 1 style
   

2. post "C2a" if you prefer version 2 style .

3. post "C2b" if you prefer my suggestion based on version 2 style:

4. post "C2c" if you prefer this other suggestion based on version 2 style:

MONOCHROME

1. post "M1" if you prefer this monochrome version
2. post "M2" if you prefer a monochrome version of the C2 icons

My opion
"C1" and "M1", mainly because I don't know how to make an M2 style work and I don't think its good to mix styles like to have C2c as color version but M1 as monochrome version.

My comments

• For "C1" @jancborchardt I played around with size a lot. From my judgement, the proportions can't get any better than this. I don't want to make the nextcloud icon bigger because I don't want it to touch any other icons in the statusbar, and for the status part of the symbol, I tried to make it overlap slightly in the monochrome version, but it is just not legible in a 16px version. Also, I want the nextcloud logo to stand out clearly, so in the color version the color circle should not cover the whole width of the nextcloud logo stroke. Also, can't we use the same icon for disconnected and paused, or disconnected and error? It is really hard to convey 6 different meanings in just 16 by 16 pixels, to be honest I don't know any other application that does that. But I could do an icon with the three dots if you want.
• For "C2" I like the design idea, but in this case all statuses need to be colored (a grey icon does not tell you anything), and color should clearly transport meaning (blue does not have a clear connotation. green=good, yellow=something going on, red=problem). Again, I suggest using the same icon for disconnected and paused or for disconnected and error. I also tweaked "error" a bit as suggested by @maverick74.
• For "M2" I really don't know how you would do that. Maybe we can have "C2 and M1" if people really wanna have the C2 and not the C1.

Is it realistic to aim for our new icons to be included in nextcloud 13 release? when is the release date? I think a lot of new people will install nextcloud 13. Would be great if we can also deliver a distinguishable icon for the sync client at the same time. Btw is there a design/UX person on the nextcloud payroll, and if yes, is this person aware of this thread? I feel like this is pretty important for shaping a nextcloud experience.

[MegaV0lt]

Sync should be blue in my opinion

[peteruithoven]

• C2b, but sync blue
• M2

[maverick74]

While C1 is nice, I agree with @peteruithoven :

C2b (sync blue) + M2
(lets see what M2 looks like, @alexanderdd ! =)
in my opinion either we leave the state lines in complete white or we set the background circle white and paint the state lines black)

Also, @jancborchardt said 6 states are needed: Synced, syncing, paused, disconnected, warning and error - We're missing the "Disconnected", for C2b

I would still like to suggest a different color between Warning and Paused. While i understand the idea behind it, i think having different colors for each state is needed because it will allow to identify the error more easily.

Anyway, i like a lot the direction!!! Great job @alexanderdd

[lachmanfrantisek]

• C2a --> The bigger sign is more readable. (Or another colouring of these shapes.)
• M2 --> Would be nice if it can be similar to the colour variant.

Nice job! Thank all of you!

[SonRiab]

• C2a with blue sync and yellow exclamation mark ;)
• M2

My main reason to choose C2a: I prefer icons without any color (black or white, depending on background) if nothing is going on. If the application is doing something its okay to use a color (blue sync for example). If something strange is happening use yellow (warning) or red (error). If the application is paused or inactive, I prefer an opacified icon.
M2 uses no colors at all but the opacified icons for pause and inactive state.

[MegaV0lt]

C1 (Pause in grey) and M1

[SonRiab]

As a compromise to the branding issue we could use the circle icons with two additional circles placed on top-right and bottom-left corner. Here is a possible version with additional icons to add an animation when synchronising:

Example:

Animation:

[childnode]

I'm grateful to the suggestion by @SonRiab regarding the branding issue, but I suppose the states are not "recognizable"... I think the idea of reducing the visual states but make user action aware things visual differently only might be a good one to proceed

so, in the meantime I tend to vote for C2b if we remove the nextCloud logo branding ;p

[alexanderdd]

Hey everyone, thanks for the responses! If I counted correctly, this is the number of votes per suggestion (including my own vote):
C1: 2
C2a: 2
C2b: 3 <- winner for now
C2c: 0
M1: 2
M2: 3 <- winner for now

Updated suggestion colored (C2bv2)

Suggestion for monochrome (M2)

Comments/Questions
I said I don't know how to make an M2 version work because I wasn't sure how to show state "ok" while also making the nextcloud icon recognizable. I decided to just show the plain nextcloud logo.

Is there a Nextcloud design team, and if yes, are they aware of this issue? I feel like the state icon is a major part of the brand experience.

Number of icons: I still think we should use the same icon for pause and disconnected, because for the user this is the same, and because it is very hard to convey 6 different meanings in 16 by 16 pixels. Should I open a separate issue regarding this suggestion?

Color shades: Is there an official Nextcloud color palette? I made the blue slightly darker so it works on both dark and light taskbars. I am against introducing yellow because it looks ugly on light taskbars, that's why I chose this shade of orange for both warning and pause (and disconnected, for that matter).

Greyed out icons: I am against using different shades of grey to convey meaning (for both colored and monochrome). We as designers can see the various icons side by side, but the user will only see one icon, so they will not know if an icon is greyed out or not, and therefore not know what state the icon is supposed to show. I think the icon itself should convey meaning without a relationship to other state icons.

Animations: Do people think animation is necessary/helpful for the state icons? If possible I'd do it without animations, or just animate the sync state.

@SonRiab Sorry, I don't like your suggestion because I cannot recognize a connection to Nextcloud (which is the whole point to replace the current icons). Also it looks too much like Skype icon to me. Another comment: In colored icons, I think we should use green to show that "everything is ok". If you prefer a non-colored icon for that, you can switch to monochrome. See also my comment about greyed out icons above.

I am new to nextcloud and I don't know how the process of decision making/implementation works. How do we go on from here? How long do we wait to make the final decision?

[childnode]

Just one note on the "Ok" Icon: You are aware of, that the "new Ok" alias "nextcloud icon" is the same that is currently used for "no connection" ... just wanted to drop this in that this might confuse "migrating users"
Another point that might be relevant: The icons should be consistent to the ones shown up in the opened settings dialog. Actually I saw some inconsistent states and I'm not sure if the same set is used accurately ... but perhaps this might be another issue

[maverick74]

@alexanderdd c2bv2 is better! But i would still use a different color for Pause and Warning. If yellow does not work, is there any other that might? Purple, pink, whatever... ?

M2 is great! I would not do any more changes!

@childnode I don't think there will be a problem with the new disconnected icon vs the actual. I don't think people will have problems with it. In fact, the nextcloud icon to mean "disconnected" does not actually makes much sense if we think about it...

[MegaV0lt]

Why not make it configurable? Include the suggestet icons and add an option in the client configuration would be good for everyone

[alexanderdd]

Hi people.
I tried making a purple version of the colored error state, but I don't like it too much:
If people really want a different color, I think it would have to be yellow, even though it looks really terrible on light background (nobody has a white task bar, so I chose a grey tone): . Honestly, I don't feel we have to use different colors for every state, it's not that the state will change all the time. For the user it is important to feel what the app is doing. Green feels good, blue is different from green but not disturbing, orange raises my awareness and red tells me there is something wrong.

This whole process is taking way longer than I thought. My suggestion is still the same as I have stated in my last post, using the same icon for "error" and "offline". I have attached the svg files in a zip. I added a suggestion for monochrome dark, using 323232ff as the color, not black, because I think a solid black icon looks awkward these days (as stated here). I could not find a reference for what shade of grey to use so I guessed (the color suggested in the post I linked to is clearly wrong).

Suggestion colored (C2bv2)


colored.zip

Suggestion monochrome light (M2)

monochrome-light.zip

Suggestion monochrome dark (M2)

monochrome-dark.zip

Comments
A comment about branding: A few comments up, @MariusBluem pointed out that once the nextcloud logo is back in the icon, it will be harder for resellers to sell nextcloud to their customers. The main reason why I am putting my time into this thread is because I want the icon to be recognizable, I want to see right away what kind of service I have sitting in my task bar. If resellers want to remove the branding for their customers, they can probably figure out a way to do that.

About making iconset configurable: I am not against it, and if someone wants to code it thats totally fine with me.

Call to action
I came here because this issue was bugging me, because I see it every day in my taskbar, and thousands of other people are seeing it too, thinking -- what application is that?! The commit to update icons was in August 2017, that's six months ago! I hope we get new icons in everyones task bar soon.
-> Any final comments?
-> Can somebody help with the pull request?

[jancborchardt]

@alexanderdd the icons need to be simple, and not only identifiable by color but also by form. The C2 and M2 have too many elements in them. For example:

• "Everything ok" icon is just green and a Nextcloud icon. If you have difficulty distinguishing red-green then it's not possible to know what this means.
• The error icon looks like "oXo", not really relatable to the Nextcloud logo and too many elements.
• Same for pause, looks like "ollo".
• The sync icon has too many elements, its circle is densely filled.
• Most importantly, all these icons look entirely different from what will be shown on the files in the file manager. That will cause confusion. And we won't show any Nextcloud logo combination on all files in the file manager, that's simply too much.

@alexanderdd your first proposal with simply the Nextcloud icon in monochrome and then the sync state icon on the bottom right is still best. It would be great if you want to continue there. I could help you with pull request preparations.

@SonRiab your proposal looks too different from the Nextcloud logo.

[alexanderdd]

How do we decide?
@jancborchardt as I said before, I am new to this and I don't know how decisions are made here: majority, consensus, do-ocracy, maintainer decides? I asked for feedback, 3 people liked the C2 style, and 2 people liked C1, now you chimed in for C1, so it's 3 vs. 3. My personal preference is also C1/M1, but I liked the innovative approach of C2 and people were demanding it, so I designed it.

Issues to resolve
Assuming we go on with C1 and M1

1. Animation: I think the "sync" state should be animated. Should I do an svg animation or a gif? I found this but could not get it to work with inkscape xml editor right away, maybe I'll try later again.
2. Number of different icons: As I said above, I still believe we should use the same icon for "error" and "offline". But if somebody has an idea for the offline icon, I'll try to design it.
3. Size/proportions: @jancborchardt in an earlier post you asked to make the state part of the icon bigger, and I responded. I assume this issue is resolved now.

[alexanderdd]

Since no-one is protesting, it looks like we have a decision C1 and M1 as shown in the post above.

regarding 1.: let's not do antimation. I wanna get this over with.

regarding 2.: Since no-one protested, I assume that we are doing it like I proposed, so same icon for "error" and "offline".

@jancborchardt Yes, please help me with the pull request, I've never done that before. What should I do? How should I prepare the files?

[juliushaertl]

@alexanderdd Do you still need some help with preparing a pull request? Having the icons would be great. They can go directly into the client repo: https://github.com/nextcloud/client

[alexanderdd]

@juliushaertl yes if you could help, that would be great! I never did a pull request and actually I would like someone else to take it from here.

And can someone add the "design" label to this issue please?

Here are the svg files:
sync state icons - colored - version C1.zip
sync state icons - monochrome - version M1.zip

Let me know if there is anything else I should do.

[juliushaertl]

@nextcloud/designers @jancborchardt Any other comments on the icons proposed by @alexanderdd ? Otherwise I'll prepare a PR with those. I guess for the black icons we just invert the monochrome icons, right?

and M1

[jancborchardt]

@alexanderdd yes, let’s please go with C1, and the same form of circular sync arrows also for M1. :)

@rullzer @camilasan which sizes and formats do we need, and should there be any margin? Just so that we don’t again have the same problem with icons which are too big.

[MorrisJobke]

This means that there will be the nextcloud icon again in the sync icon?

Just checking for the potential branding work we need to do ontop.

[juliushaertl]

I've created a pr in nextcloud/desktop#416

This means that there will be the nextcloud icon again in the sync icon?

Yes, but we could use the unbranded icons from the first post of the topic for that one if we just reduce the size of those a bit.

@alexanderdd yes, let’s please go with C1, and the same form of circular sync arrows also for M1. :)

Can you make that adjustment to the sync arrows?

which sizes and formats do we need, and should there be any margin? Just so that we don’t again have the same problem with icons which are too big.

To me they already look quite good on GNOME, but I'm not sure how other desktop envorionments/operating systems will handle that.

[alexanderdd]

Looks like discussion has continued over at nextcloud/desktop#416 so I will put my comment there.

And it looks like the circular sync arrows are not needed anymore for M1.