1293594 - Make import icon less ambiguous

Status: RESOLVED WORKSFORME

(DevTools :: General, enhancement, P4)

Description

[magicp]

Attachment: fix-import-icon.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20160808030441

Steps to reproduce:

1. Start Nightly
2. Open DevTools > Performance (or Style editor, Canvas, Memory)
3. Check the Import button


Actual results:

Arrow is pointing to the outside.

Regression range:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=a097b61f58102776941bd3fa0023092ac3f27a3f&tochange=006a4f4e68522332a36fd7eccd9664b73efae975


Expected results:

I know your discussion. But, normally arrow is pointing to the inside as import icon. And also Firefox for iOS is using similar icon for different uses. Please find attached image.

Comment 1

[Brian Grinstead [:bgrins]]

Helen, what do you think?

Comment 2

[Tim Nguyen :ntim]

By making the arrow downwards, it looks more like the Firefox download icon, which may mislead users into thinking that a file will be saved if clicked.

To be fair, importing is hard to illustrate. Maybe we could try something similar to the Firefox Open file icon (http://firefoxux.github.io/firefox-svg-icons/viewer/#open ) ?

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

I agree with Tim on the point regarding the download icon. I don't think we can just invert the icon.

If someone else would like to take a stab at redesigning the icon, I'd be happy to review it.

Comment 4

[magicp]

Attachment: import-icon1.svg

Comment 5

[magicp]

Attachment: import-icon2.svg

Comment 6

[magicp]

Attachment: import-icon3.svg

Comment 7

[magicp]

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #3)
> I agree with Tim on the point regarding the download icon. I don't think we
> can just invert the icon.
> 
> If someone else would like to take a stab at redesigning the icon, I'd be
> happy to review it.

I uploaded alternative icons.

Comment 8

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to magicp from comment #7)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #3)
> > I agree with Tim on the point regarding the download icon. I don't think we
> > can just invert the icon.
> > 
> > If someone else would like to take a stab at redesigning the icon, I'd be
> > happy to review it.
> 
> I uploaded alternative icons.

Hey magicp,

Do you think you could walk me through your process? Do you have a favorite? Why?

Comment 9

[magicp]

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #8)
> (In reply to magicp from comment #7)
> > (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #3)
> > > I agree with Tim on the point regarding the download icon. I don't think we
> > > can just invert the icon.
> > > 
> > > If someone else would like to take a stab at redesigning the icon, I'd be
> > > happy to review it.
> > 
> > I uploaded alternative icons.
> 
> Hey magicp,
> 
> Do you think you could walk me through your process? Do you have a favorite?
> Why?

What you mean? Do you angry about bug report?

Comment 10

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to magicp from comment #9)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #8)
> > Hey magicp,
> > 
> > Do you think you could walk me through your process? Do you have a favorite?
> > Why?
> 
> What you mean? Do you angry about bug report?

Helen is trying to review the icons you've uploaded.  You have 3 different versions, each tries to convey the information in a different way.  It is important to understand the reasoning (process) behind the icons to actually review and refine them.  If we don't understand the reasoning behind the icon it is difficult to make suggestions.

Can you answer the questions?  And explain at least one in more detail.  Thanks!

Also, I want to set expectations here.  You've filed a really great bug report, but this has been marked a P4 which indicates this is a low priority item for us.  For you that means there will be more work required to get this fixed as people are busy in other areas.  Turn around time here will be slow and you'll need to be very thorough.  Without a champion (which is currently you) I would close this bug.  Thanks again.

Comment 11

[magicp]

(In reply to Bryan Clark (DevTools PM) [@clarkbw] from comment #10)
> (In reply to magicp from comment #9)
> > (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #8)
> > > Hey magicp,
> > > 
> > > Do you think you could walk me through your process? Do you have a favorite?
> > > Why?
> > 
> > What you mean? Do you angry about bug report?
> 
> Helen is trying to review the icons you've uploaded.  You have 3 different
> versions, each tries to convey the information in a different way.  It is
> important to understand the reasoning (process) behind the icons to actually
> review and refine them.  If we don't understand the reasoning behind the
> icon it is difficult to make suggestions.
> 
> Can you answer the questions?  And explain at least one in more detail. 
> Thanks!
> 
> Also, I want to set expectations here.  You've filed a really great bug
> report, but this has been marked a P4 which indicates this is a low priority
> item for us.  For you that means there will be more work required to get
> this fixed as people are busy in other areas.  Turn around time here will be
> slow and you'll need to be very thorough.  Without a champion (which is
> currently you) I would close this bug.  Thanks again.

I'm sorry for your P4 extra work. Please close this. Thanks.

Comment 12

[Tim Nguyen :ntim]

I believe this bug report is valid, so I don't think it should be closed.

About the icons, I think they look quite good visually and there are some good ideas in them. I like the first icon which illustrates a file drop as a water drop. I do think your icons need a bit more tweaking to convey their meaning better, but with a bit of collaborative effort, that will be easy. :)

Comment 13

[YF (Yang)]

My idea: it can be an open box (bundle/carton, left and right symmetrical), and can be which has some documentation. It is similar to the comment 6 and Windows's Recycle Bin. This inspiration is taken the document from a bundle/carton.

I don't know how to design an icon, so I can only provide this idea.

Comment 15

[Julian Descottes [:jdescottes]]

Adding proposal from ntim in Bug 1330229 comment 5 :

(In reply to Tim Nguyen :ntim from comment #5)
> I would say, we should perhaps put the box on top.
> _______
> | /|\ |
>    |
> 
> I think it'll make more sense, as the arrow is going *in* the box, and we
> would still preserve the up arrow.

Comment 16

[[:Towkir] Ahmed]

Opinion on Bug 1330229 comment 5 :
(In reply to Julian Descottes [:jdescottes] from comment #7)
> (In reply to Tim Nguyen :ntim from comment #6)
> > (In reply to Julian Descottes [:jdescottes] from comment #1)
> > > The initial icon was picked in Bug 1247331 (read exchange between ntim and
> > > helen there). I believe the choice was motivated by the fact that
> > > "uploading" icons use an up arrow.
> > > 
> > > But I also find it confusing so I did some google image searches  
> > > 
> > > Searching "import icon" returns icons with a box (4 sides) and a down arrow
> > > Searching "export icon" returns icons with a box (4 sides) and an up arrow
> > > Searching "download icon" returns icons with a bin (3 sides) or a line and a
> > > down arrow
> > > Searching "upload icon" returns icons with a bin (3 sides) or a line and an
> > > up arrow
> > > 
> > > => Based on this, our icon looks like an "export icon", not like a "download
> > > icon" or an "import icon".
> > > ntim: what do you think? Should we update the icon to either look more like
> > > a download icon or like an import icon?
Hi Tim, I am not questioning any decision of any of you here, just explaining what I understand as a user and what can create a confusion for an end user.
> > It depends which way we go, download means importing to the file system,
> > but also exporting from the website.
Does it not also depend on the other way (I mean which way we come from) ?
When we import a css file form file system, browser is the receiver, hard drive / file system is the sender. The icon resides in the browser and the browser is receiving. 
And when we export a stylesheet to our file system, browser is the sender and file system is the receiver.

Comment 17

[Florens Verschelde :fvsch]

Fixed a few months ago as we updated the "import" icon to use a Photon icon:
https://design.firefox.com/icons/viewer/#import