UWNetworksLab / uProxy-p2p

Internet without borders
https://www.uproxy.org/
Apache License 2.0
866 stars 180 forks source link

Need icons for button in Firefox browser toolbar #471

Closed dborkan closed 9 years ago

dborkan commented 9 years ago

The current giving/getting icons are from the old days of up and down arrows, and nobody can seem to remember whether which direction arrow meant giving and which meant getting.

Going forward we should use different icons when the user is getting or giving access. We have some icons from Creative Labs that could be good here (single down arrow means getting access, 3 arrows pointing in all directions mean giving), or we could come up with new icons.

iislucas commented 9 years ago

@zahoriea thoughts?

dborkan commented 9 years ago

Just to clarify I'm referring to the browser toolbar icons, which still use the old icons, before the last Creative Labs sprint in June. The newer Creative Labs icons which we use within the Polymer UX are good

zahoriea commented 9 years ago

We used Creative Lab's down arrow / 3 arrow icons in the user studies (attached), and no one had a problem with them. I feel good about moving forward with these. screen shot 2014-10-17 at 10 39 49 am screen shot 2014-10-17 at 10 39 41 am

salomegeo commented 9 years ago

Really?

On Fri, Oct 17, 2014 at 1:40 PM, Izzie Zahorian notifications@github.com wrote:

We used Creative Lab's down arrow / 3 arrow icons in the user studies (attached), and no one had a problem with them. I feel good about moving forward with these. [image: screen shot 2014-10-17 at 10 39 49 am] https://cloud.githubusercontent.com/assets/945845/4683209/9e2a703e-5624-11e4-8938-e5c3f61c33e7.png [image: screen shot 2014-10-17 at 10 39 41 am] https://cloud.githubusercontent.com/assets/945845/4683211/a14d5204-5624-11e4-9dd5-4771e838f5d2.png

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-59548494.

zahoriea commented 9 years ago

Yes, really.

The reality is that there is no universal symbol for "giving" and "getting," and this is the best that we have. It's better than the "upload"/"download" buttons and does a decent job of describing the inward / outward notion of giving / getting.

If you have alternative ideas for these, I'm happy to hear them.

salomegeo commented 9 years ago

Honestly I just don't like current UI. I play around with it a lot obviously, and i still get confused which button stands for what, I would associate getting access button with download and giving access button with connecting to the internet, and that's where I get confused mostly, because it's right next to connect button.

I don't mean to be difficult, just take this as a data point.

On Fri, Oct 17, 2014 at 2:06 PM, Izzie Zahorian notifications@github.com wrote:

Yes, really.

The reality is that there is no universal symbol for "giving" and "getting," and this is the best that we have. It's better than the "upload"/"download" buttons and does a decent job of describing the inward / outward notion of giving / getting.

If you have alternative ideas for these, I'm happy to hear them.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-59552178.

iislucas commented 9 years ago

Clarified with @salomegeo: @salomegeo dislikes the fact of having two buttons to click on and toggle a global give/get mode. The expressed preference is for the older pre-polymer UI where the give/get buttons are at a individual contact-level. (I agree here). No issue with the new proposed design style. Just global give/get toggle.

salomegeo commented 9 years ago

i was basically saying that I don't really like icons per se. It's better in the new design because it also has text displayed with, and it's way clearer.

On Fri, Oct 17, 2014 at 5:10 PM, Lucas Dixon notifications@github.com wrote:

Clarified with @salomegeo https://github.com/salomegeo: @salomegeo https://github.com/salomegeo dislikes the fact of having two buttons to click on and toggle a global give/get mode. The expressed preference is for the older pre-polymer UI where the give/get buttons are at a individual contact-level. (I agree here). No issue with the new proposed design style. Just global give/get toggle.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-59576955.

dborkan commented 9 years ago

We should also change the non-proxying browser icon, either to the smiley icon or something else. The icon currently used in the browser toolbar isn't used anywhere else in uProxy and doesn't really match the new uProxy styling.

dborkan commented 9 years ago

@zahoriea - I am thinking we should change the normal (non-getting or sharing) browser icon from the current U-like-thing to the smiley icon, as the current icon is no longer used anywhere in our UI.

If I do this, should we still use the above arrow icons for getting and sharing? It seems a little weird to me if the uProxy icon changes completely. Do you think there are other icons to be used for getting / sharing that more closely resemble our smiley?

zahoriea commented 9 years ago

Let me do some explorations on these today/tomorrow. Will get back to you!

On Mon, Nov 17, 2014 at 2:20 PM, dborkan notifications@github.com wrote:

@zahoriea https://github.com/zahoriea - I am thinking we should change the normal (non-getting or sharing) browser icon from the current U-like-thing to the smiley icon, as the current icon is no longer used anywhere in our UI.

If I do this, should we still use the above arrow icons for getting and sharing? It seems a little weird to me if the uProxy icon changes completely. Do you think there are other icons to be used for getting / sharing that more closely resemble our smiley?

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63387064.

zahoriea commented 9 years ago

Thoughts on these?

image

zahoriea commented 9 years ago

Get + share is pretty wacky. Let me know if you have any ideas on that!

Here these are at 2x size:

artboard 2

And here is another version where we swap out status with the smiley:

image

zahoriea commented 9 years ago

And a slightly less awkward version of the get + share state. artboard2_v2

willscott commented 9 years ago

1st impression: looks very good.

One nit: Really hard to see/distinguish the getting / sharing icons. Could they be either

  1. different colors?
  2. Larger, maybe filling up the whole smiley face?

On Mon Nov 17 2014 at 8:38:37 PM Izzie Zahorian notifications@github.com wrote:

And a slightly less awkward version of the get + share state. [image: artboard2_v2] https://cloud.githubusercontent.com/assets/945845/5081170/7f0ee576-6e80-11e4-9014-986c5f5a54db.png

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409103.

dborkan commented 9 years ago

I think these are good. Slightly larger get and/or share indicators probably wouldn't hurt, but I think we still need the smiley to remain visible so that it's obviously just a variation of the uProxy icon and doesn't look like some completely different extension.

On Mon Nov 17 2014 at 8:48:40 PM Will notifications@github.com wrote:

1st impression: looks very good.

One nit: Really hard to see/distinguish the getting / sharing icons. Could they be either

  1. different colors?
  2. Larger, maybe filling up the whole smiley face?

On Mon Nov 17 2014 at 8:38:37 PM Izzie Zahorian notifications@github.com

wrote:

And a slightly less awkward version of the get + share state. [image: artboard2_v2] < https://cloud.githubusercontent.com/assets/945845/5081170/7f0ee576-6e80-11e4-9014-986c5f5a54db.png>

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409103.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409994.

zahoriea commented 9 years ago

Sounds good. I'll take one more pass and then how would you like these exported?

On Tue, Nov 18, 2014 at 7:46 AM, dborkan notifications@github.com wrote:

I think these are good. Slightly larger get and/or share indicators probably wouldn't hurt, but I think we still need the smiley to remain visible so that it's obviously just a variation of the uProxy icon and doesn't look like some completely different extension.

On Mon Nov 17 2014 at 8:48:40 PM Will notifications@github.com wrote:

1st impression: looks very good.

One nit: Really hard to see/distinguish the getting / sharing icons. Could they be either

  1. different colors?
  2. Larger, maybe filling up the whole smiley face?

On Mon Nov 17 2014 at 8:38:37 PM Izzie Zahorian < notifications@github.com>

wrote:

And a slightly less awkward version of the get + share state. [image: artboard2_v2] <

https://cloud.githubusercontent.com/assets/945845/5081170/7f0ee576-6e80-11e4-9014-986c5f5a54db.png>

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409103.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409994.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63490943.

dborkan commented 9 years ago

I think having each icon as a 19x19 png file, with a transparent background, would be good. thanks

On Tue Nov 18 2014 at 11:35:15 AM Izzie Zahorian notifications@github.com wrote:

Sounds good. I'll take one more pass and then how would you like these exported?

On Tue, Nov 18, 2014 at 7:46 AM, dborkan notifications@github.com wrote:

I think these are good. Slightly larger get and/or share indicators probably wouldn't hurt, but I think we still need the smiley to remain visible so that it's obviously just a variation of the uProxy icon and doesn't look like some completely different extension.

On Mon Nov 17 2014 at 8:48:40 PM Will notifications@github.com wrote:

1st impression: looks very good.

One nit: Really hard to see/distinguish the getting / sharing icons. Could they be either

  1. different colors?
  2. Larger, maybe filling up the whole smiley face?

On Mon Nov 17 2014 at 8:38:37 PM Izzie Zahorian < notifications@github.com>

wrote:

And a slightly less awkward version of the get + share state. [image: artboard2_v2] <

https://cloud.githubusercontent.com/assets/945845/5081170/7f0ee576-6e80-11e4-9014-986c5f5a54db.png>

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409103.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63409994.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63490943.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63499991.

zahoriea commented 9 years ago

Attached. Sending you an email with these in a .zip file too icon__0000_06---error icon__0001_05---not-logged-in icon__0002_04---both icon__0003_03---sharing-access icon__0004_02---getting-access icon__0005_01---logged-in

iislucas commented 9 years ago

I love the unsmiling uProxy face for errors.

On Tue, Nov 18, 2014 at 12:33 PM, Izzie Zahorian notifications@github.com wrote:

Attached. Sending you an email with these in a .zip file too [image: icon0000_06---error] https://cloud.githubusercontent.com/assets/945845/5092697/ea0e32de-6f05-11e4-9a48-a2e6ae325c69.png [image: icon__0001_05---not-logged-in] https://cloud.githubusercontent.com/assets/945845/5092698/ea1c5a12-6f05-11e4-928b-8852763cf2f4.png [image: icon0002_04---both] https://cloud.githubusercontent.com/assets/945845/5092699/ea25db50-6f05-11e4-90df-b7bbc395be5b.png [image: icon0003_03---sharing-access] https://cloud.githubusercontent.com/assets/945845/5092701/ea28e890-6f05-11e4-9b96-58dbff4cae57.png [image: icon__0004_02---getting-access] https://cloud.githubusercontent.com/assets/945845/5092702/ea297986-6f05-11e4-8bdb-be09d9558aed.png [image: icon0005_01---logged-in] https://cloud.githubusercontent.com/assets/945845/5092700/ea2681ea-6f05-11e4-84f6-b7751c71d938.png

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63510989.

Lucas Dixon | Google Ideas

lucyhe commented 9 years ago

Looks amazing Izzie! When you have time, could we also please get the online/default logo icon in 16x16 and 128x128 pngs?

zahoriea commented 9 years ago

No problem. I will do that by the end of the day (PT.) Would it be worthwhile to export all of the logo icons in those sizes? Won't take much more work to do.

On Wed, Nov 19, 2014 at 10:49 AM, lucyhe notifications@github.com wrote:

Looks amazing Izzie! When you have time, could we also please get the online/default logo icon in 16x16 and 128x128 pngs?

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63691818.

lucyhe commented 9 years ago

I think we'll only need the default logo in 128x128 (it's used on the chrome://extension page). It might be handy to have the offline and error icons in 16x16 too though -- they're used for page favicon's so many if we have some kind of error page we can use the appropriate favicon. That would be great if you could do that!! Thank you!

lucyhe commented 9 years ago

Oh wait sorry! Also need the offline icon in 128x128.

iislucas commented 9 years ago

Yeah, doing them in all sizes if easy can be helpful. Firefox may need them in other sizes, having them a little large makes is easy to down-scale images later also.

On Wed, Nov 19, 2014 at 2:25 PM, lucyhe notifications@github.com wrote:

Oh wait sorry! Also need the offline icon in 128x128.

— Reply to this email directly or view it on GitHub https://github.com/uProxy/uproxy/issues/471#issuecomment-63697488.

Lucas Dixon | Google Ideas

zahoriea commented 9 years ago

Hi all, slightly changed the colors of active icons to be more legible and better match the UI icons_allup

Can download all of these in 16x16, 19x19, and 128x128 sizes here https://drive.google.com/a/google.com/file/d/0B4hBIX40_CeZejUyTHEyenN6MWs/view?usp=sharing And see icons placed in context of the UI here http://invis.io/ZR1QDL9CY

Let me know if you have any questions!

lucyhe commented 9 years ago

Done here: https://github.com/uProxy/uproxy/pull/610

dborkan commented 9 years ago

Firefox icons still need to be updated

lucyhe commented 9 years ago

Done here: https://github.com/uProxy/uproxy/pull/897