Mobile app version of vmapp.org
Login or Join
Alves566

: Critique: how to visually differentiate similar looking icons of "Test", "Save", "Load" & "Download" I'm Currently working on a mail template builder project. We're using a lot of icons and now

@Alves566

Posted in: #Critique #Icon #InterfaceDesign #UserExperience #WebsiteDesign

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



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.

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @Alves566

6 Comments

Sorted by latest first Latest Oldest Best

 

@Ogunnowo857

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.

10% popularity Vote Up Vote Down


 

@Moriarity648

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.



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

10% popularity Vote Up Vote Down


 

@Murray976

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:


As mentioned earlier I agree with the test tube/lab icon.
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:


A folder with a down arrow.
A harddrive with a down arrow.
No icon at all + other placement in the UI.
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:


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


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

Suggestion:


This function may require the user to choose a format to download the template in? In this case I would rename it 'Download as'.

10% popularity Vote Up Vote Down


 

@Caterina889

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.

10% popularity Vote Up Vote Down


 

@Murphy569

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: .

10% popularity Vote Up Vote Down


 

@Hamaas979

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme