Recipe Ingredient Management
The interface effectively organizes complex recipe data into clear, distinct sections with consistent use of color to differentiate categories, enhancing quick comprehension. However, the dense information and small input fields could be challenging for users, and further improvements in spacing and interactive affordances would enhance usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load3
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
1Critical
7Major
17Moderate
6Minor
Recipe delete action lacks confirmation or undo option
Critical
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The 'Rezeptur löschen' (Delete Recipe) button is prominently visible in red but no confirmation dialog or undo option is apparent in the UI to prevent accidental deletion.
Why it Matters
Users could accidentally delete valuable recipe data without an opportunity to confirm or undo, leading to data loss and frustration.
How to Fix
Implement a confirmation dialog before deletion and/or provide an undo option immediately after deleting the recipe.
Issue Highlights
Placeholder text in input boxes has insufficient contrast
Major
Color & Contrast
The Problem
The placeholder texts in the input fields such as 'Zutat suchen …' appear in a light gray color on a white background, likely with contrast below WCAG AA thresholds.
Why it Matters
Low contrast placeholder text can be hard for users with visual impairments or in bright lighting conditions to read, diminishing usability.
How to Fix
Increase the contrast of placeholder text by using a darker shade of gray or a more distinct color that meets at least 4.5:1 contrast ratio against white.
Issue Highlights
Unlabeled icons in Specs and Prozessablauf sections
Major
Visual Consistency, Imagery & Media
The Problem
Icons such as the circular 'Ø' button near 'Specs wählen...' and the list/grid icon next to it, as well as the 'x' close/delete icons in Prozessablauf, lack accessible labels or tooltips explaining their function.
Why it Matters
Users may not understand the purpose of these icons, causing confusion or preventing effective use of these features.
How to Fix
Add visible labels, tooltips, or accessible aria-labels for all icons to clarify their purpose.
Issue Highlights
No clear primary save or submit button visible
Major
Conversion & Actions
The Problem
No clearly labeled primary button for saving or submitting the recipe or ingredient changes is visible in the screenshot. The interface includes controls for editing but lacks a distinct call to action to confirm or save edits.
Why it Matters
Users may be uncertain how to save their changes, leading to confusion or data not being saved and increased drop-off.
How to Fix
Add a visually distinct primary CTA button labeled clearly with actions like 'Speichern' (Save) or 'Bestätigen' (Confirm) near the main editing areas.
Issue Highlights
No confirmation or warning for deleting recipe
Major
Tone, Friendliness & Delight
The Problem
The 'Rezeptur löschen' (Delete Recipe) button is prominently visible in red, but there is no visible confirmation prompt or reassurance to prevent accidental deletion.
Why it Matters
Users may accidentally delete an important recipe without any chance to undo or confirm, causing frustration and potential data loss.
How to Fix
Add a confirmation dialog or undo option when users click the delete button, and provide reassuring language about the action's consequences.
Issue Highlights
Close buttons in ingredient list are too small
Major
Accessibility & Input Ergonomics
The Problem
The red close buttons (x) on the right side of each ingredient row appear to be very small, likely below recommended minimum touch target sizes (~44x44 pixels).
Why it Matters
Small tap targets make it difficult for users to accurately tap, increasing error rates and frustration, especially on touch devices.
How to Fix
Increase the size of the close buttons to at least 44x44 pixels with adequate padding around them.
Issue Highlights
No clear breadcrumb or environment indicator for current page
Major
Orientation Missing (Environment/Role/Location)
The Problem
While the page header shows 'Trockenmasse einstellen' with some tags, there is no explicit breadcrumb or hierarchical path indicator showing how the user arrived here or the larger location context within the app.
Why it Matters
Users might struggle to understand the relationship of this page to other parts of the application or to confirm their navigation path.
How to Fix
Add a breadcrumb trail or a more explicit location indicator above or near the page title to provide clear orientation context.
Issue Highlights
No visible confirmation or success state for recipe changes
Major
Flow & States Completeness
The Problem
There is no visible confirmation message or feedback indicating that recipe edits, additions, or deletions have been saved successfully or if a next step is required.
Why it Matters
Without success or confirmation states, users are left unsure whether their changes were applied, causing frustration or repeated action.
How to Fix
Implement feedback such as a success banner, toast notification, or dialog to confirm recipe changes when they are saved or applied.
Issue Highlights
Specs metric tiles missing legend or explanation for colors
Moderate
Visual Consistency, Imagery & Media
The Problem
Specs cards have distinct background colors (blue, green, yellow, pink, gray) with no legend or explanation for color meaning or grouping.
Why it Matters
Without explanation, users may be uncertain if colors carry significance or are purely decorative, affecting interpretation trust.
How to Fix
Add a small legend or descriptive text explaining the meaning of color coding if relevant, or unify colors if decorative only.
Issue Highlights
Unclear date format for '6.6.2026'
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date '6.6.2026' uses a numeric format without explicit indication of the date order (e.g., DD.MM.YYYY or MM.DD.YYYY). This can cause confusion for users from regions with different date conventions.
Why it Matters
Users may misinterpret the date, leading to misunderstanding about deadlines or schedule-related information.
How to Fix
Use a clear, unambiguous date format such as '6 June 2026' or add labels to clarify the date order.
Issue Highlights
Inconsistent tag styles for badges and buttons
Moderate
Visual Consistency, Imagery & Media
The Problem
Badges like 'Rohstoffpreise' with orange background and 'A' with blue background differ stylistically from tags labeled 'Milch' or buttons like 'Rezeptur löschen' which is in red. Some buttons have rounded borders and different color brightness, causing inconsistency.
Why it Matters
Inconsistent badge and button styling can confuse users about the meaning or importance of each item and detracts from a professional, cohesive look.
How to Fix
Standardize tag and badge colors, shapes, and border styles to create a clear hierarchy and consistency across all similar UI elements.
Issue Highlights
Limited visual clarity of primary navigation active state
Moderate
Navigation & Structure
The Problem
The main navigation bar includes multiple links with only one (Rezepturen) shown as active using a subtle blue background. The active state is not highly distinguishable, especially compared to other inactive items that have a plain text style, reducing clarity on current location.
Why it Matters
Users might have difficulty understanding their current location within the app, leading to confusion and reduced navigation efficiency.
How to Fix
Enhance the active state styling with stronger contrast, bolder text, or a more prominent highlight to improve visibility of current section.
Issue Highlights
Top right toggle buttons lack sufficient spacing
Moderate
Accessibility & Input Ergonomics
The Problem
Buttons such as "Audit-Trail," "Etikett," "Neue Variante," "Rezeptur löschen," and "PDF Export" in the top right corner are close together with minimal horizontal spacing.
Why it Matters
Close positioning of these buttons can cause tap errors on touch devices and increase cognitive load when trying to distinguish actions.
How to Fix
Add more horizontal spacing or padding between these adjacent buttons for easier selection.
Issue Highlights
Multiple individual delete buttons for each ingredient
Moderate
Efficiency & Cognitive Load
The Problem
Each ingredient line in the Zutaten section has an individual small red 'x' button for deletion, which can add unnecessary micro-steps when users need to manage multiple ingredients.
Why it Matters
Users managing many ingredients may find it tedious and error-prone to delete each item individually, increasing task time and cognitive load.
How to Fix
Allow multi-select with bulk delete options or enable simple inline editing with context menus to reduce repetitive clicks.
Issue Highlights
Unclear next step after editing ingredients
Moderate
Flow & States Completeness
The Problem
The interface shows editable ingredient quantities and components with buttons to add or remove items, but there is no clear visual cue or action button that indicates how to save or proceed after making changes.
Why it Matters
Users may be uncertain how to save or finalize their changes, potentially leading to lost work or confusion about the workflow.
How to Fix
Add a clear call-to-action button such as 'Save Changes', 'Next', or 'Update Recipe' that is visually distinct and placed near the ingredient list or in a fixed position.
Issue Highlights
Action Buttons Lack Visual Priority and Clear Grouping
Moderate
Strategic Design
The Problem
Primary actions such as 'Rezeptur löschen' (Delete Recipe) and options like 'PDF Export' and 'Neue Variante' are visually similar in size and spacing, with limited color contrast except for the delete button, reducing clarity in call-to-action priority.
Why it Matters
Users may misclick or hesitate when identifying critical actions versus secondary options, risking errors or slower task completion.
How to Fix
Visually differentiate primary destructive or major actions with strong colors, placement, or button styles, and group related actions clearly.
Issue Highlights
Light gray attribution text has low contrast
Moderate
Color & Contrast
The Problem
Secondary text such as 'Formulierung Σ: 100% · Referenz-Charge: 886 g · ≈ 886 g absolut' uses a light gray that likely fails to meet WCAG AA contrast on the white background.
Why it Matters
Users with low vision or certain color deficiencies may have difficulty reading this text, reducing overall readability.
How to Fix
Use a darker gray or near-black color for this secondary text to increase contrast to WCAG AA minimum of 4.5:1.
Issue Highlights
Very subtle gray labels in Specs panel have low contrast
Moderate
Color & Contrast
The Problem
Labels such as 'HERSTELLER', 'WASSER', and 'ALLERGENE' in the specs section use a pale gray color that likely has insufficient contrast on light background.
Why it Matters
Low contrast labels can be difficult to identify quickly, impacting readability and user comprehension.
How to Fix
Use a darker text color to meet contrast ratio of at least 4.5:1 against the background for these label texts.
Issue Highlights
Insufficient hierarchy in 'Versuchsnotizen' input labels
Moderate
Content Readability & Clarity
The Problem
The labels 'VERSUCHSREIHE' and 'VARIANTE A' use the same small font styling as the input placeholders, causing weak differentiation between label and input field.
Why it Matters
Users may struggle to quickly identify which input area corresponds to which label, leading to slower form completion or errors.
How to Fix
Increase font weight or size for labels and/or add more spacing to visually separate labels from inputs.
Issue Highlights
Top label 'MAT. NR.' misaligned with other table headers
Moderate
Visual Consistency, Imagery & Media
The Problem
In the Zutaten table, the 'MAT. NR.' header is shifted slightly upward compared to other headers in the same row, disrupting vertical alignment.
Why it Matters
Misalignment in headers increases cognitive load and reduces the visual neatness of data tables, making it harder for users to quickly scan and interpret information.
How to Fix
Adjust vertical padding or margin of the 'MAT. NR.' header to align it evenly with other column headers.
Issue Highlights
Buttons in process workflow have insufficient spacing
Moderate
Accessibility & Input Ergonomics
The Problem
The small red close buttons at the end of each item in the process workflow at the bottom right of the screen are positioned closely to adjacent labels and each other, potentially making precise selection difficult.
Why it Matters
Tightly spaced interactive elements can cause users to accidentally tap the wrong button, leading to errors and frustration.
How to Fix
Increase horizontal spacing between the close buttons and neighboring text or controls to reduce mis-taps.
Issue Highlights
Multiple small buttons for similar actions near Prozessablauf and Specs
Moderate
Efficiency & Cognitive Load
The Problem
The Prozessablauf and Specs sections each have several small buttons (e.g., Vollbild, Bibliothek, + Manuell, Specs wählen, Ø toggle) that clutter the interface and may cause users to hesitate over which to choose.
Why it Matters
The abundance of similar-function buttons increases cognitive load and decision-making time, possibly leading to mistakes or hesitation.
How to Fix
Group related functions into a simple menu or toolbar, clarify grouping or icons, and reduce visible buttons to only the most essential primary actions.
Issue Highlights
Dense layout with closely packed buttons and controls
Moderate
Navigation & Structure
The Problem
The right content area, including 'Audit-Trail', 'Etikett', 'Neue Variante', 'Rezeptur löschen', and 'PDF Export' buttons, are placed closely together with minimal spacing. Similarly, the ingredient list and specs section have many controls packed tightly.
Why it Matters
Close proximity of multiple clickable elements increases the risk of misclicks, causing user frustration and errors.
How to Fix
Increase spacing between buttons and controls. Group related actions clearly to reduce clutter and visually separate distinct interaction areas.
Issue Highlights
Lack of visible explanations for codes and abbreviations
Moderate
Efficiency & Cognitive Load
The Problem
Some terms and abbreviations like 'Phase', 'Charge 886', and 'BLS Server-Liste' appear in the UI without visible explanations or tooltips explaining their meaning.
Why it Matters
Users unfamiliar with these terms must rely on memory or external knowledge, increasing cognitive effort and risk of errors.
How to Fix
Add brief inline explanations, tooltips, or help icons near jargon or codes to support user understanding.
Issue Highlights
Lack of Clear Visual Hierarchy in Ingredient List
Moderate
Strategic Design
The Problem
The ingredient list section uses uniform font sizes, colors, and spacing without distinct visual cues to prioritize key data such as ingredient names, quantities, or the active selection state. This leads to a visually flat presentation.
Why it Matters
Users may have difficulty quickly scanning or focusing on critical information like amounts or ingredients to edit, potentially slowing down workflows.
How to Fix
Introduce clearer emphasis by using stronger contrasts, font weight differences, or color highlights on the most important content such as ingredient names and quantities. Use spacing or grouping to separate controls from data.
Issue Highlights
Unclear Purpose of 'Ø' Button in Specs Section
Minor
Strategic Design
The Problem
The 'Ø' button in the Specs panel at top right is presumably a 'reset' or 'clear' function but lacks a tooltip or explicit label, making its function ambiguous.
Why it Matters
Users might hesitate or incorrectly guess the button's purpose, risking accidental actions or ignoring a useful feature.
How to Fix
Add a tooltip or label describing the action, or replace the symbol with a more recognizable icon for clarity.
Issue Highlights
Right-aligned quantity input fields misaligned vertically
Minor
Visual Consistency, Imagery & Media
The Problem
Quantity input fields and percentage inputs in the Zutaten table are not perfectly vertically aligned row by row.
Why it Matters
This minor misalignment reduces the polished feel of the UI and can momentarily slow user input or review of figures.
How to Fix
Ensure consistent vertical spacing and baseline alignment for input fields across all rows.
Issue Highlights
Sidebar panel roles and context not explicitly labeled
Minor
Orientation Missing (Environment/Role/Location)
The Problem
The side panels like 'Zutaten', 'Specs', and 'Versuchsnotizen' are visually distinct but lack clear role or environment labels beyond the section headers, which can make orientation within these data-dense panels less clear.
Why it Matters
Users might find it harder to quickly understand the purpose and distinct context of each sidebar panel, causing cognitive load while switching focus.
How to Fix
Add contextual labels or icons that describe each panel’s role and how it relates to the overall process or workflow.
Issue Highlights
Bright red delete button may cause unnecessary anxiety
Minor
Tone, Friendliness & Delight
The Problem
The 'Rezeptur löschen' button uses a bright red background which signals danger. In the context of this application, the color might cause undue stress without accompanying supportive messaging.
Why it Matters
Excessive emphasis on destructive action can intimidate users and negatively impact their overall experience.
How to Fix
Consider using a less aggressive color or pairing the red button with reassuring copy or icons to soften the tone.
Issue Highlights
Colored badges and tags create visual noise
Minor
Efficiency & Cognitive Load
The Problem
Colored badges showing specs (calories, protein, fat, allergen, temperature with time) and labels such as 'Rohstoffpreise' at the top add visual clutter without immediate actionable value.
Why it Matters
Excessive color-coded tags and badges can distract users from primary input areas and make the UI busier, reducing focus and increasing cognitive effort.
How to Fix
Limit use of colored tags to most critical information or make them collapsible/optional to reduce distraction.
Issue Highlights
No guidance visible when notes fields are empty
Minor
Flow & States Completeness
The Problem
The 'Versuchsnotizen' (Experiment Notes) section shows empty text areas with placeholder text but no additional guidance or prompt on what to enter or how these notes impact the recipe or process.
Why it Matters
Users new to this section may not understand what kind of information is needed or its importance, reducing engagement with the notes feature.
How to Fix
Provide contextual help, tooltips, or examples illustrating what type of notes to enter and how they support the recipe process.
Issue Highlights