I am currently developing a device using LVGL to search for electronic components and manage their stock. As I am new to UI/UX design (I’m only 15 y/o), I would greatly appreciate your feedback and tips on improving the UI, specifically for the product cards and detail pages.
For the product cards, I’m uncertain about the optimal placement of the items, and the Details button doesn’t seem quite right, though I can’t seem to find the issue. On the detail page, the layout also seems off, especially for the description area, which can be quite long and appears awkward.
I am using Squareline Studio for my UI design. Any advice on enhancing these aspects and the overall design would be highly valuable.
Thanks!
Here are screenshots of my current product card and detail page:
These are just personal opinions, so take them for what you will.
First of all, pretty solid start. It looks decent and could be accepted as a production release, but could definitely use some polishing.
The blue bar bothers me. It should either
be connected to the card below
have a rounded bottom corners - OR - the top of the card below should not have rounded corners.
Overall, it needs a bit of breathing space. More padding
Some top/bottom padding on the top bar.
Some left/right padding inside the large card.
all sides In the white cards inside the large card.
Watch your color contrast levels. The text in the blue bar, and in the buttons are not far enough away from the background colors and could cause problems with people with vision issues…
Careful with the color choices for in-stock and details. People with Red/Green color blindness will have problems with those choices.
The text of the details card looks to be skewed left of the image, though I’m betting that’s an image/text width difference. Just looks odd.
What’s the difference between the $0.15 and the $15.00 on the details card?
The blue bar is not part of the design. It is added by SquareLine Studio to differenciate the different screens.
Can you explain what you mean?
About the detail button, do you know what makes it look strange/inconsistent and how could I fix it?
The $0.15 will be removed as I want to make an horizontal scrollable area to show the details for different provider with 3 of the current cards (the one with the $15.00 inside)
I didn’t say strange/inconsistent. I did say you need to increase the color contrast on the text of both of the buttons but they were otherwise fine as designed.
I DID say to be careful using red/green as the color choices because someone with Red/Green color blindness will see both of those as black (I think…I don’t recall exactly). You can get around this by adding some sort of iconography to both so they’re not solely dependent on color choice.
Remove the background and just display it in a color, And while I hate to repeat myself, add an icon to signify for those who are color blind. Don’t rely on color alone.
Quick search of out of stock and in-stock icons bring up these. Make sure whatever you use has licensing for use.
Low stock seems arbitrary so I personally wouldn’t worry about it, unless you want to include that in the text - something like “in-stock (only 10 left!)”
Thanks For the icon. For the stock, it is only for user to know how much they have left of this component in their personnal stock (not like an online store). So wouldn’t it be better to simply say “low stock” and on the detail page say “low stock - consider buying other part soon” ?
I made it clear that the “In Stock” was not a button and I added an icon and bolder font for the details button. I did not put an icon for the “In Stock” since the resolution is so low that it looked very bad and it was like if the icon should not be there.
