Habit Creation Form
The interface excels in clarity and ease of use with well-organized sections and visually distinct selectable options for icons, colors, and frequency. Common areas for improvement include adding more guidance for custom frequency selection and enhancing the visibility of interactive states for toggles and buttons to improve accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
15Moderate
4Minor
Confusing primary CTAs with overlapping meanings
Major
Conversion & Actions
The Problem
This screen contains two similarly weighted CTAs: a 'Save' button at the top right and a 'Start this Habit' button at the bottom. Both are green and visually prominent but their distinct functions are unclear, potentially confusing users about which action will finalize habit creation.
Why it Matters
Users may hesitate or be unsure which button to press to complete their task, reducing conversion and increasing frustration.
How to Fix
Consolidate actions by removing redundancy or clarify the purpose of each button visually and with text. For example, use 'Save' only if the habit can be saved as draft and 'Start this Habit' for finalization, differentiating style and placement accordingly.
Issue Highlights
Unclear difference between 'Save' and 'Start this Habit' buttons
Major
Flow & States Completeness
The Problem
The screen contains two primary actions: a 'Save' button in the header and a 'Start this Habit' button at the bottom. It is unclear if both need to be used, if they perform different actions, or which should be used to actually activate the habit.
Why it Matters
Users may be confused about which button to press to complete the habit creation process, potentially causing hesitation or abandonment.
How to Fix
Clarify the purpose of each button or consolidate actions into a single prominent call to action. Consider tooltips or labels that explain each button's function.
Issue Highlights
Conflicting primary action buttons 'Save' and 'Start this Habit'
Major
Strategic Design
The Problem
This screen shows two prominent call-to-action buttons: a 'Save' button in the header and a 'Start this Habit' button at the bottom. Both appear to finalize the habit creation, which may confuse users about which to use.
Why it Matters
Conflicting primary actions can confuse users and lead to hesitation or errors when attempting to complete the habit creation task.
How to Fix
Use a single clear primary action button that reflects the final step (either save or start) and consider relocating or de-emphasizing the alternative button to avoid confusion.
Issue Highlights
Low contrast in secondary instruction text
Moderate
Color & Contrast
The Problem
The text 'Takes less than 10 seconds' below the main title appears light gray on a white/light background, likely with insufficient contrast ratio below WCAG AA standards for normal text.
Why it Matters
Users with visual impairments or in bright environments may have difficulty reading this secondary instruction, reducing comprehension.
How to Fix
Increase contrast by using a darker gray or black color for this text to meet at least WCAG AA contrast ratio of 4.5:1 for normal text.
Issue Highlights
Lack of strong hierarchy between section labels and content
Moderate
Content Readability & Clarity
The Problem
Section labels like 'HABIT NAME', 'ICON', 'COLOR', 'FREQUENCY', 'DAYS', and 'REMINDER' use the same or similar font weight and size as the content below, resulting in weak visual distinction between headers and content.
Why it Matters
Users may find it harder to quickly scan and distinguish key sections, reducing ease of use and comprehension.
How to Fix
Increase the font weight, size, or add more spacing for section labels to create clearer visual hierarchy relative to their content.
Issue Highlights
Inconsistent Icon Selection Styles
Moderate
Visual Consistency, Imagery & Media
The Problem
The selected icon in the ICON row has a green border and background highlight, whereas the other icons only have a light background without a border, making the selection style visually inconsistent.
Why it Matters
Inconsistent selection styling can confuse users about which icon is selected and reduce the perceived polish of the UI.
How to Fix
Use a consistent style for selected icons, such as a uniform border or background highlight across all icons.
Issue Highlights
Misaligned 'Start this Habit' Button Horizontal Padding
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Start this Habit' button is slightly wider and extends beyond the typical left and right padding margins used by other components in the form, creating a visual misalignment along the edges.
Why it Matters
Edge misalignment reduces visual harmony and can make the interface feel less refined and professional.
How to Fix
Adjust the button's horizontal padding or container margins so that it aligns consistently with the other form elements horizontally.
Issue Highlights
Missing clear location or role indicator in header
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The header shows 'Create New Habit' but does not clearly indicate the current app section or user role context beyond that. No breadcrumb or persistent navigation label assists users in understanding their place in the app's structure.
Why it Matters
Users may become disoriented or unsure about the current task or location within the app, increasing cognitive load and reducing confidence in navigation.
How to Fix
Add a persistent top-level section label, breadcrumbs, or role indication explaining where the user is within the app or what context they are operating in.
Issue Highlights
Lack of Confirmation or Undo Option on Habit Creation
Moderate
Tone, Friendliness & Delight
The Problem
The screen allows users to 'Save' or 'Start this Habit' without any visible confirmation or undo option in case of mistakes.
Why it Matters
Users may feel uncertain whether their habit was saved successfully or worry about making mistakes without an easy way to recover, which can reduce trust in the app.
How to Fix
Add confirmation feedback after saving, and consider an option to undo or edit newly created habits shortly after saving.
Issue Highlights
Habit icon buttons too small for easy tap
Moderate
Accessibility & Input Ergonomics
The Problem
The habit icon buttons in the ICON section appear to be smaller than recommended touch target size (typically 44x44px or larger) and may require precise tapping.
Why it Matters
Small tap targets can lead to user frustration and errors, especially for users with limited dexterity or on smaller devices.
How to Fix
Increase the size of each icon button to at least 44x44 pixels or add padding to expand the tappable area without changing visual size.
Issue Highlights
Color selection circles are closely spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The color circles in the COLOR section appear to be small and closely packed horizontally with minimal gap, increasing risk of accidental selection.
Why it Matters
Insufficient spacing between selectable colors can cause mistaps and user frustration.
How to Fix
Increase horizontal spacing between color selection circles or increase their tap target size by adding padding.
Issue Highlights
Separate Frequency and Days Selection Adds Unnecessary Steps
Moderate
Efficiency & Cognitive Load
The Problem
Users must select both a frequency option (Every day, Weekdays, Custom) and then separately select individual days of the week. This duplicates effort and requires extra taps to configure the habit schedule.
Why it Matters
Making users perform multiple selections for what is essentially one decision (when the habit should occur) increases cognitive effort and interaction time.
How to Fix
Combine frequency selection and day choice into a single control where users can directly pick days or options like 'Every day' and 'Weekdays' that auto-select appropriate days to minimize steps.
Issue Highlights
Weekday day buttons closely spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The individual day selector buttons (M, T, W, etc.) under DAYS are small and appear tightly spaced without sufficient padding.
Why it Matters
Low spacing between day buttons can cause input errors when users try to select a specific day.
How to Fix
Add padding or increase spacing between day buttons to ensure they meet minimum touch target size requirements.
Issue Highlights
Lower contrast on disabled 'Weekdays' and 'Custom' frequency buttons
Moderate
Color & Contrast
The Problem
The text on the 'Weekdays' and 'Custom' buttons appears medium gray on a light background, likely lower than WCAG AA 4.5:1 contrast ratio for normal text.
Why it Matters
This lower contrast can make it hard to distinguish these options as selectable alternatives, reducing usability especially for low vision users.
How to Fix
Increase text contrast on these buttons by using a darker text color or a darker background fill to meet WCAG AA standards.
Issue Highlights
Low contrast in '7:00 AM' text inside reminder toggle
Moderate
Color & Contrast
The Problem
The time text '7:00 AM' inside the reminder toggle uses a muted color on a light background, likely failing WCAG AA contrast ratio for normal text.
Why it Matters
This reduces readability of the reminder time for users with low vision or in bright lighting, impacting clarity of important settings.
How to Fix
Use a darker text color for the reminder time to achieve WCAG AA contrast of at least 4.5:1 against the background.
Issue Highlights
Dense icon and color picker without visual separation
Moderate
Navigation & Structure
The Problem
The icon and color selection areas display many small interactive targets close together with minimal spacing or grouping, which may make precise selection difficult, especially on small screens.
Why it Matters
Users may accidentally select the wrong icon or color, leading to errors and frustration with the setup process.
How to Fix
Increase spacing or group related selectors more clearly to reduce visual clutter and aid touch precision.
Issue Highlights
Icons spaced too closely causing input overlap risk
Moderate
Accessibility & Input Ergonomics
The Problem
The individual icon buttons in the ICON section have minimal spacing between them, possibly less than the recommended 8px minimum gap.
Why it Matters
Closely spaced icons increase the chance of accidental taps on adjacent icons, reducing the ease of use.
How to Fix
Increase horizontal and vertical spacing between icon buttons to ensure distinct touch targets.
Issue Highlights
Unclear toggle state and layout in Reminder section
Moderate
Strategic Design
The Problem
The reminder toggle and time input are placed side by side in a single container with a light background, but the toggle on/off state and its relationship to the time are not visually very distinct or immediately clear.
Why it Matters
Users may be unsure if the reminder is active or how to change the reminder time effectively, which could lead to missed notifications or confusion.
How to Fix
Increase contrast and spacing between the toggle and time, add clearer labels or visual states indicating the toggle status and its effect on the time input.
Issue Highlights
Small font size on reminder time label and toggle
Minor
Content Readability & Clarity
The Problem
The reminder time '7:00 AM' and the toggle control appear to use a small font size that may cause difficulty for users with visual impairments or in certain lighting conditions.
Why it Matters
Smaller text can reduce readability and increase user errors when setting reminders.
How to Fix
Increase the font size of the reminder time and toggle label to at least 14px or equivalent for body text readability.
Issue Highlights
Days of Week Buttons Misaligned Vertically
Minor
Visual Consistency, Imagery & Media
The Problem
The 'Days' buttons (M, T, W, T, F, S, S) appear slightly off vertical alignment with the 'Frequency' buttons above, as the horizontal spacing and vertical alignment are inconsistent compared to other grouped elements.
Why it Matters
Small misalignments between related controls can subtly detract from usability and aesthetic cohesiveness.
How to Fix
Adjust vertical spacing and ensure consistent baseline alignment between the frequency toggle and days buttons.
Issue Highlights
Reminder Section Icon Tone is Too Casual
Minor
Tone, Friendliness & Delight
The Problem
The bell emoji used next to 'Remind me' appears casual and playful compared to the otherwise clean and professional UI aesthetic.
Why it Matters
Slight tone inconsistency might distract or reduce perceived professionalism in a habit-building app setting.
How to Fix
Replace the bell emoji with a simple, consistent icon style that matches the app's clean design.
Issue Highlights
Redundant Reminder Toggle and Time Selection
Minor
Efficiency & Cognitive Load
The Problem
The reminder time and toggle switch are presented together, forcing an explicit on/off decision plus separate time selection. This creates an extra decision point that could be simplified.
Why it Matters
Users must decide whether to enable the reminder and then set the time, adding cognitive load for a simple reminder feature.
How to Fix
Default the reminder toggle to off with time selector disabled or use a combined picker that only appears when the toggle is switched on to reduce upfront choices.
Issue Highlights