2

I have an app in which users can track items. The app will flag when there are issues with items:

Warnings (orange UI colour)

  • Low stock
  • Expiring this month

Problems (red UI colour)

  • Out of stock
  • Expired

Items may have both a warning and a problem (e.g. an item with low stock that is expired).

There is a simple summary chart to summarise their inventory to the user.

Chart 1

This summarises 15 items; 1 has only a problem, 3 have only a warning, and 2 have both. The rest have no issues. Here the items with both are shown with overlapping orange and red lines. I am concerned that it looks confusing to have a separate number for the combined section, even though the numbers all add to the total.

Another option is to simplify it and show any items that have a problem as red (including those that also have a warning), and then show in orange those that only have warnings.

Chart 2

I think this is simpler and easier to see at a glance, but does not convey the full information. This might be acceptable as problems (red) are likely to be of more interest to the user than warnings (orange).

I would be grateful for advice on which provides the best user experience, or ways in which either could be improved.

Improve this question
4
  • 1
    I don't think overlapping would work for 'expired and stocked (i.e stock is still available)'. I would suggest to have two bars; 1) Inventory bar 2) Expiry bar. Expiry bar would show how many items are expiring in the next 3mths, 6mths, 12mths etc.
    – Ades
    Aug 13, 2021 at 7:40
  • 2
    It appears to me that there is only combination (overlap) that makes sense: "Low stock and expired" ("Low stock and out of stock" as well as "Expiring and Out of Stock" don't seem to make sense). In this case "Expired" seems stronger (unless experiation can be sort of extended), hence the state should probably be only red and not both? That being said, I also think that the 2nd option is easier to understand. Maybe different if the audience of this solution is experts who can and will learn the nuances and appreciate them?
    – greenforest
    Oct 4, 2021 at 8:52
  • 1
    @greenforest Thanks for the response. It's for medical users, so they would likely get the nuance. You're right that "expired" is stronger (as you cannot use an "out of stock" item, but might inadvertently use an "expired" item when you shouldn't. I agree that the second one is clearer.
    – Chris
    Oct 6, 2021 at 12:52
  • @Ades Thanks for you input. I like the idea of layered expiration based on how soon they expire - I will have to see if I can implement this. On a different screen, they can be listed based on which expires soonest.
    – Chris
    Oct 6, 2021 at 12:53

1 Answer 1

Reset to default
1

What kind of app is this? Generally if it is an online shopping related application you would track the entire lifecycle of the product, whereas if it is a delivery service then it will only start when the delivery process commences (which is generally when the consigned parcel or packaged has been received and is ready for delivery).

However, since the status that you have provided includes information about the stock availability I would have to assume that it is more online shopping related.

As was noted by one of the comments earlier, some of the status seem to be compatible with each other while some are not (e.g. low and out of stock are non-overlapping states, so it has to be either one or the other).

Another problem I can see is that there is not much detail provided in the grey section of the bar, and it can lead to user expectation that everything might be okay but there's little detail with the progression or change in status with the items since it is all encompassed in the grey status. I would assume that there is also a 'green' status for when the item has been successfully delivered or received?

So while the progress bar might be a good analogy for the lifecycle of the service that you are providing, some care needs to be taken when creating the visual representation of this information so that it reflects accurately what is happening behind the scenes to match with user expectations.

For reference you can check out things like the Amazon tracking status design, which shows the detailed view for individual products but you can apply similar categories because they are independent of each other:

enter image description here

Once you have the categories/statuses sorted in a single flow, one way to visualize the information might be to use a stepped progress bar (something that you see on a wizard) rather than a continuous progress bar.

enter image description here

Improve this answer
2
  • 1
    Thanks, this is very helpful! The app is primarily for tracking an inventory of medical devices and drugs, so not shopping as such, but with some transferable concepts. I am aiming to show the user an overview of their inventory and anything that might need addressed. I really like your design there.
    – Chris
    Oct 6, 2021 at 12:56
  • Okay, that helps provide a clearer context to work with. I think the other consideration is the usual/typical number of inventories that would be on order at any given time, since that obviously affects the amount of room you need to provide to display the information.
    – Michael Lai ♦
    Oct 7, 2021 at 23:13

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.