E-commerce Add to Cart

Inconsistent font styles within a compact area can distract users and decrease the perceived professionalism of the UI.

Use a consistent font family or style for text elements placed closely together, or differentiate them purposefully with consistent typographic hierarchy and spacing.

The 'In den Warenkorb' button uses white text on a red background which visually appears clear but the exact contrast ratio is not measurable. However, red backgrounds can cause issues if not properly contrasted, potentially impacting readability.

If the CTA text is not sufficiently contrasted against its background, users may struggle to quickly understand the main action to take, reducing conversions.

Verify and ensure the text color and background color have sufficient contrast ratio (at least 4.5:1). Consider testing with color contrast tools.

The price link text (€ 10,79*) appears to have a tap target smaller than recommended minimum of 44x44 pixels, making it harder for users to tap accurately.

Small touch targets increase user frustration and error rate, especially for users with motor impairments or those using mobile devices.

There are three separate price elements very close to each other: a current price, a strikethrough old price, and a per kilogram price. The varied font sizes, colors, and placement force the user to parse multiple price values quickly.

Users may experience cognitive overload trying to understand the real cost and discounts offered, which can slow the buying decision or discourage purchase.

The button 'In den Warenkorb' suggests adding the item to the cart, but there is no visible confirmation message or indication of the next step after clicking it.

Users may be uncertain if their action was successful or what to do next, potentially causing confusion or hesitation.

Add a confirmation message or transition to the cart or checkout page after the item is added, or provide a clear next action.

The current text shows the new price (€ 10,79*) slightly emphasized but the smaller supplementary text (0,8 KG/€ 13,49 je 1 KG) is very small and similar in color, causing weak visual differentiation between pricing details.

Users may miss the important pricing breakdown and weight-price relationship, possibly causing confusion or misinterpretation of the deal.

Increase font size or contrast for the supplementary price details and differentiate it more clearly from the main price and struck-through old price to create a distinct text hierarchy.

The clickable price text and the 'In den Warenkorb' button are positioned closely horizontally with less than recommended 8-10mm spacing, risking accidental taps on one or the other.

Insufficient spacing can cause users to accidentally activate the wrong element, increasing error rates.

Increase horizontal spacing between the price link and the 'In den Warenkorb' button to at least 8-10mm (approx. 44 pixels at typical screen resolutions).

The 'In den Warenkorb' (Add to Cart) button lacks any trust signals or reassurances such as secure transaction icons, guarantees, or indication of return policy near this purchasing action.

Users may hesitate to add items to their cart if they do not see any cues that the transaction is secure or that they can return products, potentially reducing conversions.

Add trust signals or brief reassuring phrases near the button, such as 'Sicher einkaufen' (Shop securely), 'Kostenlose Rückgabe' (Free returns), or display a small secure transaction icon.

The discounted price (€[REDACTED] and original price (€11.99) are displayed with minimal contrast and differentiation, making it harder for users to quickly recognize the discount value.

Users may overlook the price discount due to insufficient emphasis, reducing the perceived value and potential purchase motivation.

Increase the contrast and font size of the discounted price, use clear strikethrough styling on the original price, and incorporate color or iconography to highlight the discount.

Misaligned text reduces visual order and hierarchy, causing slight cognitive load increase when scanning product details.

Adjust horizontal positioning or vertical alignment of text elements to ensure consistent alignment.

Price and unit pricing details are displayed near but visually separated from the main CTA button. The relationship is not clearly reinforced, which may cause small confusion.

Clear price information in close association with the action button helps users confidently proceed with purchasing decisions.

Integrate or visually group price details more closely with the CTA button. Use spacing or design elements to clearly show the price relates to the purchase action.

Users might find it harder to distinguish between pricing information and the call-to-action, potentially slowing their decision process.

Add padding or a divider to improve visual hierarchy and separation between pricing details and the purchase button.

The small text about unit price and weight ratio appears as extra details next to the main price and add-to-cart button, increasing the number of data points users must parse before clicking.

Overloading the purchase action area with less critical info can distract users and add mental steps before action.

Hide detailed unit price info behind a tooltip or on a product details page to reduce on-screen clutter near the add-to-cart button.