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:
Should we assume you’re happy with the UX and are only asking about the UI?
Does the In Stock button link to something else, or is it simply a message saying the item is in stock? If it’s the latter. you probably shouldn’t make it look like a clickable button.
Why are the icons (I’m guessing they’re stand-ins for product images) centered on the layout instead of appearing flush left and stretching across the screen? Why is there more than one icon if the component search displays information about a specific item?
The last line of the description appears to wrap around the orange price. Why is the price listed twice—once as $0.15 and again as $15.00?
Why have you chosen to center the part number area instead of making it flush left? As a general rule, jumping back and forth between flush left, centered, and flush right creates a jumbled look that interferes with information hierarchy and clarity. If you choose to break from a consistent alignment, it should be for a good, identifiable reason.
I did not really think about UX so any advice about it would be appreciated for it.
No, I want to make it dynamically change color depending on the stock status (In Stock, Low Stock, Out Of Stock). How could I make it look less like a clickable button?
Are you talking about the product cards or the details screen? If you’re talking about the details screen, It is only one image but the way SquareLine Studio stretches it make it look that way.
I want to do an horizontal scrollable area because there will be 3 of these cards (one for each provider)
Also, for the description in the details page, what would be the best way to display/wrap it?
