3

I'm Currently working on a mail template builder project. We're using a lot of icons and now I need to make some for our menu bar. As you can see they must represent Test, Save, Load, & Download actions. I believe I failed with my first try. Icons looking too similar, too many arrows et cetera.

I'd really appreciate an advice on how I can improve this situation.Thanks

enter image description here

Update:

Test/Preview - Tube / Eye / Checkmark (Solved)

Save/Save Draft - Floppy Disc (Outdated) (?)

Load/Open Draft - Single Circular Arrow / Open Folder / (?)

Download - Same (?)

My main problem is an amount of icons with arrows here. 3 is too much. I want to reduce it to 2 icons.

  • Hi Ba5tarD, welcome to GDSE and thanks for your question. Please review our guidelines for critique questions, as those may be hotly debated. If you want to know more about the site, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Sep 17 '14 at 10:23
  • Hi, Vincent. I'm not looking for critique. I am interested in alternative ways to visually represent this 4 actions. If you are sure it's not a place to ask, I delete this question. – noirboi Sep 17 '14 at 10:30
  • Hi there! I believe this is a critique question because its main purpose is to receive feedback on that particular piece. Is there any icon in particular you are unsure about? I personally find Load and Download confusing, not necessarily because of the icons, but because I don't know / can't see the difference between the two concepts. – Yisela Sep 17 '14 at 10:54
  • I'll try to explain it better. 1. SEND test mail 2. SAVE draft 3. LOAD draft 4. DOWNLOAD template O, maybe you're right and it is a critique question. :S – noirboi Sep 17 '14 at 10:55
3

Just my take....

  • Test = Checkmark
  • Save = What you have already
  • Load = A single circular arrow (yes it may seem like a refresh icon, but it's also often used as a load or reload icon. Given the context of the other 3 icons, this would work well.) Another option may be the "loading" star so often seen.
  • Download = What you are currently using as the load icon.
  • Hi, and thanks for an answer. I'm not sure if "Check" is good enough for this. "Tube" or an "Eye" as in Preview works much better. About single circular arrow. I really wish it to work, but this icon not represent "Load" for me. Refresh - yes, maybe "Loading" as process, but not "Load" or "Open File", that's for sure. – noirboi Sep 18 '14 at 8:10
  • Fair enough. However, reading through comments, it would appear as though you have something specific in mind and are merely disagreeing with all other opinions. – Scott Sep 18 '14 at 8:18
  • I updated the question. My main problem here is 3 icons with arrows. Too visually similar. – noirboi Sep 18 '14 at 8:29
  • That is helpful information. – Scott Sep 18 '14 at 8:30
  • the "loading star" is usually called "spinner" or "throbber" BTW :-) – Hubert Grzeskowiak Mar 13 '16 at 23:14
1

You could use a lab icon for testing, keep the Save icon as it is

For the download icon use the Load one

and for load I would use this one

  • 1
    That's a good idea, but I'm not sure about Save one. It looks more like Refresh to me. – noirboi Sep 17 '14 at 10:37
  • sorry meant to say the load icon – ekclone Sep 17 '14 at 10:48
  • Ok, I got it, but it still looks like Refresh icon. Thanks anyway. – noirboi Sep 17 '14 at 10:50
1

Here are some suggestions - I hope you find 'em useful.

Test: I don't think the up arrow make sense tbh. I can see why you would use a mail icon, but again the user already knows that he/she is creating a mail template.

Suggestions:

  1. As mentioned earlier I agree with the test tube/lab icon.
  2. Without knowing the exact function you could maybe call it 'Preview' and use an eye for icon?

Save: I would never use an up arrow to symbolize saving. My experience tells me that most people understand it just like upload and download (the words kinda explain the direction of the arrows).

Suggestions:

  1. A folder with a down arrow.
  2. A harddrive with a down arrow.
  3. No icon at all + other placement in the UI.
  4. Remove it and make an auto-save function.

Load: As mentioned above I think the down arrow will be misunderstood. I would use an up arrow.

Suggestions:

  1. A folder with an up arrow.
  2. A harddrive with an up arrow.
  3. No icon at all + other placement in the UI.
  4. Use the word 'Open' instead.

Download: This one works fine in its current state imo.

Suggestion:

  1. This function may require the user to choose a format to download the template in? In this case I would rename it 'Download as'.
  • Thanks for a detailed answer. I like the idea of Preview with an "eye" contact. So, it this or tube/test version. Folder instead of cloud is a good idea, but we still remain with 3 visually similar icons with arrows. For me it's still a problem. – noirboi Sep 18 '14 at 8:10
1

Could you use a floppy disc icon (http://www.endlessicons.com/wp-content/uploads/2013/04/save-icon-614x460.png) for save?

As Mads Egmose pointed out, isn't it possible to use an open folder type of icon for the open/load function. More or less like this: Open icon.

  • Yes. This is first thing I thought about, but Floppy Disc icon is very outdated. Yes, We are very old. Kids don't know what Floppy Disc is. Thanks anyway. – noirboi Sep 17 '14 at 18:09
  • 1
    People don't use handsets for phones anymore, yet it's still the default 'call' icon. Point being that yes, some icons have outlived their literal representation, but still have a life as a metaphor. And sometimes that's valid. (Not saying that a floppy disk icon is still valid, but do consider the fact that it may be) – DA01 Sep 17 '14 at 20:42
  • "Open Folder" is a very good idea. Thanks @Raoulvk. – noirboi Sep 18 '14 at 9:29
0

How about getting rid of the arrows on the cloud icons, they don't add much to the metaphor anyway because the cloud is becoming ever more synonymous with file management and that's obviously why you've used it - so the arrows are unnecessary.

Instead, to differentiate them, use an obvious opposite... turn the cloud upside down for load. :)

Forgive my 2 minute cloud shape, but I didn't have time to locate that vector or build it with the golden ratio.

enter image description here

Just a suggestion, specifically to remove the arrows and keep most of your original design intact.

  • Very original idea, but it's too experimental for a regular user. Thanks. – noirboi Sep 18 '14 at 10:38
0

I really appreciate your help, guys. After reading your answers and comments I came up with 2 sets of icons. I'd really like to know what you think about this. Thanks.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.