Server: Missing icons from release review polishing

Created on 13 Aug 2016  ·  24Comments  ·  Source: nextcloud/server

There are currently icons missing for:

as requested in https://github.com/nextcloud/server/issues/735 .

2. developing design papercut

Most helpful comment

Ok, I found a clock already used in nextcloud. Would favor this one for consistency: clock-original 3x

All 24 comments

Here are the current drafts for federation, update notification, theming and survey client. They're not properly aligned to the pixel grid yet, or with line widths and positions perfected. They're intended here to get feedback on the general concept of each from @nextcloud/designers, first. They're also currently displayed here at double size, too, to compensate for not being pixel grid aligned yet.

Survey client:
I want to change the ? font, but I like the speech box, other than the line width:
nextcloud-survey-client-icon

Update notify:
It's hard to find a concept that is easily recognizable for this, that doesn't look like either the browser refresh icon, an upload icon, or a power on icon. Still, other than some needed tweaks, I'm faily happy with this:

nextcloud-update-notify-icon

Federation:
As noted previously by @jancborchardt , we could still just use the well known "share" icon for this, however it seems to me that we'd benefit from a new icon, as users have a pretty specific expectation of "share" which is different. This is similar, expressing the ability to share to other clouds, but (hopefully) different enough to be recognized as a different function:
nextcloud-federation-icon

Theming:
Surveying what's used elsewhere, there's a strong dominance of only two basic icons for theming. A thin and a fat paintbrush. I went with thin, as it looks more elegant imo. Line widths still need adjusting:
nextcloud-theming-icon

Great work @Bugsbane. Here is some feedback from my side on those icons.

Survey client: I like the idea, just the speech box looks a bit odd, maybe just turning it 180° might fix that already.

Update notify: I don't see the notify-part of it in the icon, but as you said, this is harder than the rest. Maybe we could go with some kind of bell icon, as the notifications app uses combined with some arrow. (Possibly something like this one: http://www.shutterstock.com/pic-224752771/stock-vector-update-time-icon-with-shadow-vector-illustration-eps.html)

Federation: I like it, you could try to add one more "node" to it and connect it to one or 2 of the others, so it will get more the look of a network graph, but I'm not sure, as that might already be to much

Theming: Great one. In my opinion it would make sense to draw the brush from the bottom left to the upper right, as it would be used. Apart from that :+1:

Hey Julius,
Thanks for the feedback. Here are my thoughts on what you added:

Survey client:
I mainly did it in that orientation, as my understanding of the app, is that it will appear as a pop over from the notification area, and thus will have the "spoke" at the top from the notification bell, with the survey below, as with the current user menu and this icon.

Update notify:
Yes, you're right, using the bell in some way would be consistent with the current notification icon. I'm thinking I might try the current bell icon with an arrow taken out of it as a negative space. I'll just have to see if it's still ready to read, visually, at small sizes.

I should also mention that the icon you linked to at shutterstock looks almost identical to the icon I just did that was added to the new "Recent files" feature by... Icewind from memory?

Federation:
Yeah, I was torn as to whether or not to show more nodes/connections. Doing it would more clearly denote a decentralized network, but at the expense of visual clarity. :/ What about if I just put a thinner line between the bottom two nodes?

Theming:
How would flipping this horizontally make it more like how a paintbrush is used in real life? Most people are right handed, and when you hold a brush in your right hand to paint, it orients the way it is in the draft above... Personally I'm not fussed either way, but I don't quite follow the logic. If there's a general consensus that flipped horizontally would look better though, I'm happy to oblige.

Update notify:
I should also mention that the icon you linked to at shutterstock looks almost identical to the icon I just did that was added to the new "Recent files" feature by... Icewind from memory?

I remember I saw an icon like that in the Nextcloud repo already, but i couldn't find it. Don't we just have your the clock icon there?
https://github.com/Bugsbane/server/blob/bc0323d4ad3d7f17250e5d811a26c2a475d39c28/apps/files/img/recent.svg

_Federation:_
Yeah, I was torn as to whether or not to show more nodes/connections.
Doing it would more clearly denote a decentralized network, but at the
expense of visual clarity. :/ What about if I just put a thinner line
between the bottom two nodes?

Right, that sounds reasonable to me.

_Theming:_
How would flipping this horizontally make it more like how a paintbrush
is used in real life? Most people are right handed, and when you hold a
brush in your right hand to paint, it orients the way it is in the draft
above... Personally I'm not fussed either way, but I don't quite follow
the logic. If there's a general consensus that flipped horizontally
would look better though, I'm happy to oblige.

I guess that's just my kind of feeling, let's wait what other @nextcloud/designers have to say. :)

Ok, here's the latest versions:

Survey client:
nextcloud-survey-client-icon

Update notifier:
nextcloud-update-notify-icon

Federation:
nextcloud-federation-icon

Theming:
nextcloud-theming-icon

I had trouble finding the original svg we're using for the notify bell, but when I do, I'll replace the bell I'm using here with it.

Thank you @Bugsbane ... I am not sure whether they would fit into our other icons 😕
Lets wait until we have a statement from other @nextcloud/designers and especially @jancborchardt ;)

An addition to federation: Maybe we should have one federation logo that is representing the "Federated Cloud Sharing" by the Open Mesh Initiative across the clouds (ownCloud, Nextcloud, pydio, ...) ... Just for the recognition value of Federation 😁 @schiessle

@jancborchardt can you have a look at it? We should sort this out in time if it should go in Nextcloud 10. Thanks!

@Bugsbane since these icons mainly show up in the Apps management I would like to not introduce too much complexity there. That’s why I think Federation should use the share icon (it is in the »Sharing« section of the admin settings too). And Update notifier should just use the notification app icon as well (the simple bell).

Survey client looks good, but a bit too complex in form. Try making the speech bubble filled and the question mark a negative (white) form inside it.

For theming a painter’s palette might look better as icon cause a brush is very small, thin and delicate.

That’s why I think Federation should use the share icon (it is in the »Sharing« section of the admin settings too). And Update notifier should just use the notification app icon as well (the simple bell).

I did the easy ones in the above linked PRs ;)

Hey, let's see if I can contribute something here:

Survey client:

I agree with @jancborchardt. Based on the existent comment icon it could look something like this:
comments-preview
Although compared to most other (newer?) icons this one has sharp edges, so maybe should be more rounded...
Actually I think question mark in speech bubble is not the best symbol to use, because – as I understand it – the survey client is more of a passive reporting tool. (Maybe it even has to renamed; the actually copy speaks of usage reports, not surveys.)
With this in mind some icon implying statistics, a report and/or uploading would be more fitting.

Theming

For theming I think a palette (without any brush) could look a bit to ambiguous.
I could create something with a paint roller or a wider paint brush, to not give the impressions of being to precise.
https://thenounproject.com/term/paint-roller/
https://thenounproject.com/term/paint-brush/
One could additionally embed one of these in a simplistic "browser Window" to make clear what can be "painted".
https://thenounproject.com/term/browser-window/

Password Policy
I propose a key: https://thenounproject.com/term/key/

Retention
Based on the delete icon (a simple trash with lit): Maybe adding a simplified clock on the trash can?

Let me know what you think, than I will gladly put some more effort in to it.

(Maybe it even has to renamed; the actually copy speaks of usage reports, not surveys.)
With this in mind some icon implying statistics, a report and/or uploading would be more fitting.

Yes. It is indeed only a background task that can be configured (what to send). So this makes sense.

For theming I think a palette (without any brush) could look a bit to ambiguous.
I could create something with a paint roller or a wider paint brush, to not give the impressions of being to precise.

I really like the paint roller! :)

I propose a key: https://thenounproject.com/term/key/

What about a lock? https://thenounproject.com/term/lock/

Based on the delete icon (a simple trash with lit): Maybe adding a simplified clock on the trash can?

Yes! Makes total sense to combine this.

@eppfel I really like your ideas :) @nextcloud/designers How about you?

What about a lock? https://thenounproject.com/term/lock/

A lock more generally describes security. A password is more of a key to me. But again this is a question of complexity, as a lock could be used for others apps as well.

I'll draft the other proposals.

@MorrisJobke I'll gladly join @nextcloud/designers

@MorrisJobke I'll gladly join @nextcloud/designers

I invited you 🙌

@eppfel Seeing that you're from Germany, you may be interested in our upcoming conference: https://conf.nextcloud.com :-)

@MorrisJobke 🙌 🎉
@LukasReschke Already crossed my mind.. Let's see if I find the time.

Password Policy
Used the Lock from Password action

Retention
Up for discussion:

  1. arrow 3x
  2. clock-arrows 3x
  3. clock 3x
  4. donut 3x
  5. clock-arrows 3x

My favorite is 3, although 5 might already be sufficient.

Theming

  1. background 3x
  2. theming 3x

Did not come up with something concrete for survey client / usage report, yet.

Ok, I found a clock already used in nextcloud. Would favor this one for consistency: clock-original 3x

Ok, I found a clock already used in nextcloud. Would favor this one for consistency:

Lets take this one 😉

Ok, I found a clock already used in nextcloud. Would favor this one for consistency:

Looks good 👍

Any thoughts on the Theming proposals?

  1. background 3x
  2. theming 3x

Paint roller it is?

I would go for 1.

Okay - only the survey client is missing and I moved this then to the repo: https://github.com/nextcloud/survey_client/issues/33

I will close this ticket here.

@eppfel @Bugsbane Thanks a lot for all you nice work :) We really appreciate this :)

@eppfel - The clock on the garbage can looks like it's placement a little high. Could we get it aligned so that the space above it is equal to the space below (and the spaces on the sides)?

I quite like the first theming icon (the paint roller) though.

@eppfel - The clock on the garbage can looks like it's placement a little high. Could we get it aligned so that the space above it is equal to the space below (and the spaces on the sides)?

@Bugsbane I opened this as separate issue in the retention bug tracker: https://github.com/nextcloud/files_retention/issues/11

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mfechner picture mfechner  ·  3Comments

ThomasLeister picture ThomasLeister  ·  3Comments

ChristophWurst picture ChristophWurst  ·  3Comments

ghost picture ghost  ·  3Comments

mama21mama picture mama21mama  ·  3Comments