Why google material design has Import icon which is used as export in other design system?

Question

When my teammate and myself were discussing the Import option for our application which adopts Material design Icons & Components.

We founded that there is a slight variant of the Import Icon is being used in Material Design System when compared to other design systems.

Material Import Option used in Google Contacts

IBM uses a similar icon for Export

Originally we started the discussion on the Import icon, but in the mid, we got confused with the Export option as well.

Which arrow do we need to use as a best practice for Import and Export?

Answer 1

Material approach is correct. Export has a semantic meaning, namely something that goes out.

I don't recall seeing an export symbol with the arrow pointing down (or pointing inwards, for that matter), so I have no reference as to what other systems do and why. I do, however, recall examples where the arrow is pointing down, but those are for download, not export.

The Material icon version also corresponds with Gestalt studies on vector direction and, more loosely, with a newly proposed principle called Connectedness (not accepted by everyone because it's basically a combination of the existing Proximity and Continuity laws).

Additionally (and this is pure speculation on my part, so take it with a grain of salt), I think it also relates to their business model: Google products are cloud products, so the export concept should be about adding content to the cloud, not your own device.

EDIT TO ADDRESS COMMENT

The comment from user Big_Chair accurately mentions that they're using this for Import (which I missed in my initial answer, my bad).

This, again, is probably related to Google's conception of content has to be in the cloud. If you check the Material Icons List, you'll see the icon they're using is the File Upload icon (see below)

So this may not be consistent with other systems, but it is consistent with Google's philosophy: to import data to Google, you have to upload it to the cloud (please note that Material has no special icons for either export or import)

Answer 2

There does not currently appear to be a universal arrow direction for Export.

Your users may be able to understand either arrow, or you may want to choose a right facing arrow to avoid ambiguity.

Like so many things in UX, the answer is: "It Depends." If you have reason to believe your users have a lot of exclusive exposure to Material or IBM design styles (especially in proximity to your app) you may want to use the icon they are most familiar with.

If your users and their experiences are much more varied, you can probably use any icon you like, as long as the label is clear. An image search for export icons shows arrows going every direction, though up and right do seem to be more common.

Over on the Graphic Design Stack Exchange, a similar question was asked, but more about why download and export were opposite directions. While the logic in the answer there makes sense (export goes from the local app to the report server), that mental model may not apply to your use case. On many websites exporting is often associated with downloading a file, and importing with uploading which may be why Material design chose those directions.

Lastly, the "up and out" arrow style that goes to the right is a fairly common icon pattern for sharing. If downloading data is not your users' goal, that style arrow might help convey that the data is being shared or moved to the next place.

Answer 3

I recently experienced a similar design challenge within feature to indicate the direction of travel of money.

It was similar because the main problem we encountered was the context in which the icon was shown. For example, the same payment would be out of one place and into another, depending on which context you're viewing the information, the visual representation could be different.

In your example, import and export fall into the same category, importing something into say a concept that is local to the user may have a different representation than importing into something which is remote to the user.

What becomes even more challenging is when you need to provide an import/export control out of, or in a different context where the meaning may be different.

It really depends on the context in which the control resides and the user's mental model of that context. I've found through testing there isn't a "right" answer to this question because people have their own mental models based on past experience with different tools which likely perform different tasks and may not map directly to your use cases, but the user will be influenced and have an expectation of how things should work.

This is a good example of why icons alone aren't the best option for these kinds of actions, so labelling becomes key and helps avoid ambiguity, they will also help the user learn the interface more quickly. With clear labelling, there may be a moment where the user thinks "that icon looks weird" but ultimately, if they have used the system, can read the label and have completed their task successfully, this isn't something to worry too much about.

Answer 4

The direction of the arrow depends on what the 'tray' (other part of the icon) represents. With up and downloading the tray represents the users machine / hard drive. With import / export the tray represents the system you are using, hence the direction will be reversed.

Maybe Google see their import contacts function as an upload function, who knows. I wouldn't get hung up with one outlier to a fairly universal pattern.