1

Background

I'm working on this iOS / web service, which sells analysis focused on petrol market, its companies, research and other stuff. The main screen of the app is basically a list of documents (analysis), displayed in chronological order.

enter image description here Screenshot with fake data

Problem

When we released the service it had only 5 different products, which should have been set in the stone for some time (but you know how it goes). It quickly escalated to 14 products and it keeps growing. At first, differentiating them with icons sounded like a great idea. And the products had names like "Morning Notes", so making a printed document icon with a coffee stain was a must. But there is only so many ways how you can design a document icon, and its even harder when the product names a get very specific like "Basin Quarterly Research".

So ...

Question(s)?

  • Are icons enough to distinguish different products? Even if the difference between them is getting smaller with every added product?
  • Is it even an issue?
  • I also have a case, where using different icons is not an option. So I partly agreed to use color (until I find a better solution) but there are too many issues with it. What do you use then?
3

As non-sexy as it is, you might also consider adding a column to your grid that explicitly differentiates between the products... I ran into exactly this issue with a product I support, going from 4 live "policy types" to 11 and growing. This made creating unique and meaningful icons (especially in the tiny space we have in table rows) a real challenge.

We settled on adding a "Type" column that makes it clear to the user what type of policy they have created... again, not sexy, but it works in our format AND it allows the policy types to be sortable and filterable:

enter image description here

Just one perspective. Grouping and color options are also a good idea to explore, for sure!

  • 2
    +1 for sorting and filtering. Shouldn't preclude a good default presentation, but pretty much essential for navigating any big data set. – calum_b Sep 13 '16 at 15:41
  • Yup, this one seems like the way to go. Best future proof solution :] – rojcyk Sep 17 '16 at 13:43
1

If the set is getting large you need to group similar products. You can visually distance them from each other for better clarity.

You can use icons for the different groups rather than 1 icon for every product. The same way you can divide them on colors. For Example, Group A is blue, Group B is red, etc.

However, it highly depends on your domain and type of products. It's your job to consider which particular colors and icons you should use because you know the specifics of your products.

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.