1

I have a tree on my webpage that is used to display some folders and within these folders some items; These items can be copied from one node of the tree to another and also shared. When copied or shared the name remains the same, however I need to indicate visually that the item is a copy or a shared copy of an original item.

I use this icon image to display the original item enter image description here

What would be a good way to indicate that the item is a copy or a shared item? Any input will be much appreciated.

3
  • It sounds like you're asking how to implement changing an icon. We don't answer implementation questions here. We also don't answer questions about what icons to use (in case that's your intent). Could you edit your question to be more clear about what you're looking for? Dec 14, 2018 at 17:51
  • @KenMohnkern i am not asking how to implement changing an icon or what icons to use, i was asking for ideas on how to indicate to the user the item is a shared or copied. Dec 16, 2018 at 9:38
  • Also, can a copy be shared? If so, then you'll need two indicators, one for copy and one for shared. Dec 17, 2018 at 13:47

3 Answers 3

1

To indicate the file is shared, you could add a small person icon in the bottom right corder, such as in Google Drive enter image description here, or dropbox enter image description here.

Unless you have a particular need to show copies of files, I would recommend against doing so. Mostly due to convention, all systems from windows to mac to google drive, dropbox etc don't have this feature. Rather, they treat the copy of a file as a new file. You could append the label "copy" onto the file name, but it is still a new file with no relationship to the original one.

Since this is what users are used to, they will expect the same behavior in your system. Any new behavior will confuse them and will need a dedicated area with an explanation of how the feature works.

2
  • Thank you, this makes sense, i will redesign my icon to be similar to the one google uses for the google drive. Dec 16, 2018 at 9:40
  • NextCloud does similar, displaying a share-icon instead of a people-icon. In some cases it might be easier or semantically more correct to show an icon like this instead of abstract people.
    – BlueWizard
    Jan 30, 2019 at 19:56
1

In a lot of filesystem contexts, copying is used mainly because of the folder metaphor. That is, some information needs to appear in two "locations" because the folder metaphor implies each "file" exists in a finite number of physical locations. In a tag-based file system, a single file could be tagged with multiples tags to appear in multiple queries. So, e.g., this post appears in the lists of posts for both the tree tag and the icons tag, but there is no "copy" of the Question. It simply can be in both "places" at once without being duplicated.

If this is your situation, I'd recommend considering whether or not your tree could or should maybe include some leaves that have multiple parents rather than copying some leaves and ending up with unlinked copies of things. Or even if a tree is the best data structure or data structural presentation for your particular data and users.

If you do actually want copies of things that aren't relational, deep copies, if you will, consider what your users gain when you show them that some file was, in the past, copied from some other file.

As far as a "sharing" icon, I like @NicolasHung's answer.

0

The suggestion to modify objects' icons to reflect their status is a common and well-established approach. Adding a "person" symbol to an object's existing icon to indicated that it is being shared, is a great approach.

There are other options, too, of course, such as using a chain symbol as used by Sketch to identify layers that are linked into a design from an external shared library:

enter image description here

With regards to what you call "copied" objects, however, users do expect a "copy" to be its own, stand-alone file, as others have already explained. What you're describing sounds more like macOS's concept of an "Alias", which is an icon that simply points to an actual file.

Multiple aliases can point to the same original file. Clicking any of the aliases opens that original, but users can freely rename, move, copy, and delete aliases without affecting the original at all.

If this is what you need to use in your UI, you can take inspiration from Apple's implementation, which adds a little curved arrow icon to aliases:

enter image description here:

Whatever icons you choose, make sure you test them with your users to ensure they understand their respective meanings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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