Icons - clear way of presenting export and import action [closed]

Question

I'm looking for a clear way of presenting "import jpg", "import svg", "export jpg" and "export svg" actions.

I want to make it clear by icon look, what is export, what is import (most of the icons which I found online are used interchangeably). Without seeing a tooltip, there is no chance that the user can guess which icon refers to the import action, which to export.

Also, when icons are presented together in a row, it takes a lot of time to understand that one icon refers to the jpg, another to the svg extension.

Any ideas or examples how to handle this?

Answer 1

Firstly, try to reduce the load for your user as much as possible. You can make the import function accept both JPG and SVG and based on the uploaded file format figure out how to handle it.

Secondly, icons are very difficult to guess. Try to combine icons with labels for clarity. This reduces errors and lowers the learning curve.

With regards to the question which icon to use. Have a look at fontawesome.com or icofont.com. These are commonly used icon sets, if you search for upload you'll see that the arrow is usually up or to the right. Download is the other direction. These websites can also give you some inspiration on how to offer different formats to download an asset.

Answer 2

Think about visual language revealing the action with a few strokes (less data-inc) as clear symbology.

Now the question is how to represent the action/verb and the representation/object.

Import and Export (action)

• file or data "trans-port" as upload or download can be compared to former time save file (disc) and open file (folder opening). In web-based context the visual symbology is rather depicting this as arrows reaching in and out to and from server depicted as box
• "Im" vs "Ex" suggests using arrows in opposing directions, e.g. into the box from upside downwards, out of the box from downside upwards

File formats (representation)

Could vary most and evolve over time. Thus I would exclude representation or objects (here: JPEG, SVG) from generic action-icon itself (here: import/export).

Inline

Could add this as separate label near the action-icon. Thus a button would contain at least 2 elements, optionally a textual description:

[action icon] [object/mode] [textual]

Overlay

If you use this under tight space restrictions, and only want to show an equally shaped/sized icon, then overlay the icon with a visual label depicting the representation/mode (here: file-format abbreviated as file-extension). A colored "badge" (as used in Bootstrap CSS) could highlight the different input/output formats by different colors. The color also increases contrast to your underlying monochrome icon. Thus it visually shifts focus to the format while the action remains in background.

See also

Similar question Multiple download buttons for a file type with answers suggests commonly used upload and download icons and their combination with file-formats.