1

I would like help with a naming convention for product images. The images are currently given names like 'widget - front left 2.jpg' and so on. These are not user friendly!

In this instance the UX is part admin - it is a product catalog - and it is also front end, with a sensible naming convention we can derive friendly names (and translate them) for the image labels.

I was working on the idea of 'SKU-CODE' followed by some signifier for the image type (e.g. in a box or not) and then a view angle code.

For instance, 'XYZ1234-FL.jpg' could mean the front-left view of the product XYZ1234 without the box.

'ABC5678+TR.jpg' could mean the top right view of product with sku ABC5678 with the box.

Ideally the scheme works and can be understood easily by those that need to know it. However there are a myriad of angles that could potentially be used - front, back, top, bottom, left, right and the combinations of those, e.g. the 'front-left' view could also be angled so it is looking down on the product, a 'front-topleft' view.

I guess that this problem has been solved before in some way, possibly in another discipline, e.g. architecture. If anyone knows of a scheme that works, please let me know!!!

  • An SKU code is often hard to relate to, from a user perspective, why not simply use the <"clean" product name>_<fully named type (e.g. front-left>_<if applicable: variant/color (e.g. black)>.<format e.g jpg>. This because a product name like iPod will connect on a more emotional level than 'EN124YUSD'. As a general rule, if you don't need to abbreviate...than don't. But anyhow, is picture downloading the main purpose of your eCommerce site? – Xabre Oct 1 '15 at 16:17
  • Hmm, after my comment, I'm not even sure if you maybe meant: uploading a picture... If so, I would only make it optional as there's a learning curve AND a lot of work involved, as visual beings, it might be more interesting to actually 'drag-and-drop' the pictures in the admin tool - or better yet - in the "view" to which they belong e.g. front-left. But than, my question remains, is it really that important in your catalog to "know" the point-of-view? (if not, I'd skip it, as the pain is probably higher than the gain) – Xabre Oct 1 '15 at 16:22
  • The Users are those that make the images, those that put them in the ecommerce catalog, those other companies that use our image and the end customers. Of course we will be giving them customer friendly names too - translated to their language. However 'users' isn't just the end users in UX (unless my understanding of the topic is wrong). – Henry's Cat Oct 1 '15 at 16:24
  • I'm still not quite sure, could you perhaps try to reframe the problem you're trying to solve, as that would make it easier to help out :-) (and would limit the possible answers) – Xabre Oct 1 '15 at 16:32
2

You have quite a few issues here:

  • Unique file names at shared folder level
  • Unique folder names (if you have a folder structure)
  • A user friendly file name that captures "X" characteristics of a product

If this is a part of a web application, I would recommend abstracting away most of this using a database and a handy GUI that allows you to search/filter through your product images. Heck, there may even be some desktop software that does this.

If this is a local file store that you're just trying to add some clarity to, I would recommend taking a multi-step approach to organizing your data. For example:

  1. Descriptive folder structure

This would allow you to declutter your images. Probably working best as folders with names that work as categories: "pink", "orange", "open-toed", "close-toed", "buckle", etc.

  1. Concrete naming pattern for images

SHOEBRAND_ANGLE_SHOESIZE_SHOESKU.jpg

  1. A concrete policy for how to handle changes to folder structure, naming convention, or newer images that replace older images with an identical name pattern.

As an alternative, if you're dealing with a high volume of images, I recommend a more elegant approach. Low cost ones being:

  • An Excel document that uses vLookup so you can lookup image filenames by properties/product name
  • A database solution (web/local)
  • Out of the box/hosted solution (probably a paid service)

Organizing your data in this way makes large changes easier down the road. Relying on folder/file structure alone can put you in a rough spot if you want to lookup a specific image, change ALL images name pattern (introducing a new property to the filename), and so many other management issues.

  • The products have unique product codes so folder structure does not really have any relevance. – Henry's Cat Oct 1 '15 at 16:39
  • Well, yes and no. If I have 100,000 images in one folder, it becomes very hard to find that one image. However, if I have 10,000 images in 10 folders separated by color, it becomes much easier to find my image. This is becomes even more beneficial if your folder structure is architected well. – Daniel Brown Oct 1 '15 at 16:49
  • It is the image names - they are atomic and not dependent on the folder they are in. Sure they will be in folders named after the SKU code, but I do not want 10000 images called 'front.jpg' and another 10000 called 'back.jpg', that would be silly!!! If the images go to a third party client we do not want them to be enforced to use our folder structure. Atomic names it has to be. – Henry's Cat Oct 1 '15 at 19:20
  • Ahh. I did not know there were two "users" in this scenario. I was thinking strictly from the point of the view of your co-workers, not about an additional third-party. – Daniel Brown Oct 1 '15 at 19:40
  • UX is about all users, all stake-holders. These can be internal, customers and third parties. Also the Googlebot is a customer of sort with UX considerations of its own... – Henry's Cat Oct 1 '15 at 19:52
0

You could take inspiration from the way we recognize cells in a table/ grid view. I am assuming a grid structure as you mentioned topleft etc., in your query. Say you have 9 images for a grid you can name them as 1.1 1.2 1.3 2.1 2.2 2.3 3.1 3.2 3.3 followed by a unique name for your series.so the center image would be 2.2SKU_CODE. So here the order of the images is made clear to anyone working with a set of images.

This should be easy even for non tech people too as you can visualize a sequence with the numbering. Giving a clarity on what follows what.

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.