Our healthy shopping row is never green, and its off switch is an empty array
Munchable's result screen, after you scan something, is a stack of rows. Some are about the conditions you told it you have . Some are about allergies. One is about a thing we call healthy shopping, which is the reader's own list of what they would rather not buy: preservatives, artificial colours, sweeteners, that shape of preference. All three look the same. A glyph, a title, one word on the…
The Munchable app displays a list of rows, each showing whether a product contains certain ingredients that a user wishes to avoid. These rows share a consistent visual design, with a glyph, title, status word, and detail that can be tapped for more information. The main difference between the rows is the content and purpose.
The "healthy shopping" row lists ingredients the user wants to avoid, such as preservatives, artificial colors, and sweeteners. This row does not include a cautionary statement like the "allergy" row, which is a deliberate design choice. The absence of a caution prevents the row from being mistaken for a safety claim, as an allergy row would imply a product is free from the listed ingredients.
In contrast, the "allergy" row includes a standing caution statement, emphasizing that the absence of mentioned allergens does not guarantee the product is safe for those with allergies. This caution is permanent and visible, providing an important safety message.
The app uses distinct visual cues to differentiate between the two row types. The healthy shopping row has a muted, grey tone with a minus circle icon, while the allergy row uses an amber color with a warning triangle icon. Both rows have the same accessibility features, such as a button role and an accessible label, ensuring the information is conveyed through multiple channels for users with different needs.
Overall, the design choices aim to make each row type visually distinct and accurately convey the specific information the user is seeking, without introducing unnecessary ambiguity or implying a stronger claim than is warranted.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
