Task Filter Modal

The 'Clear Filter' button is present but visually low emphasis compared to 'Save Preferences' and is positioned in a way that may cause users to overlook it or misinterpret it as secondary.

Users may struggle to quickly reset filters if needed, leading to confusion or frustration when trying to remove applied filters.

The placeholder text 'MM/DD/YYYY' in the date filter inputs uses a light gray color on a white background, making its contrast appear low and likely below WCAG AA standards for normal text.

Low contrast placeholder text can be difficult to read, especially for users with visual impairments or in low light conditions, leading to confusion about what input is expected.

Increase the darkness of the placeholder text color to meet at least a 4.5:1 contrast ratio against the white background, or consider a subtle background fill behind the input.

The date inputs show a placeholder format of 'MM/DD/YYYY' without any clarification whether this is month/day or day/month format, and no timezone context is provided.

Users may misunderstand the date format, leading to incorrect filtering and missed or incorrect task results.

Specify the date format explicitly or localize based on user region. Add a timezone indication or tooltip explaining the date/time context.

'Save Preferences' is not clearly actionable or specific about the outcome once clicked. It is unclear if preferences only save filters, selections, or other data.

Users may hesitate or feel uncertain about what exactly will happen when they click this button, potentially reducing conversions or causing hesitation.

Use a more descriptive CTA label such as 'Apply Filters' or 'Save Filter Settings' to clarify what the button does.

Checkboxes in the 'Created By' and 'Assigned To' columns appear smaller than the recommended minimum touch target size of 44x44 pixels, which may cause difficulty for users tapping on them accurately.

Small checkboxes can cause users to mis-tap or struggle to select options, leading to increased user frustration and interaction errors.

Increase the size of the checkboxes to at least 44x44 pixels with adequate spacing around them to ensure easy touch interaction.

Misalignment reduces visual harmony and can distract users, making the filter form appear less polished and potentially harder to scan.

Adjust vertical positioning of the date input fields so their top edges align precisely on the same horizontal plane.

Multiple filters (date, status, tasks, category, created by, assigned to) are presented in a compact area without distinct groupings or clear visual separation beyond text headings.

This makes it harder for users to scan and understand filter options, increasing cognitive load and reducing usability and quick decision-making.

Group related filters visually with borders, background shading, or whitespace to create clear sections (e.g., date filters, status filters, assignment filters).

Checkboxes and corresponding user name labels in the 'Created By' and 'Assigned To' columns are placed very close horizontally, making it difficult to tap the checkbox without hitting the adjacent text or other elements.

Closely spaced targets increase the risk of users accidentally tapping the wrong element, leading to user frustration and increased error rates.

Increase horizontal spacing between checkboxes and their labels to provide clear separation and larger tap targets.

'Created By' and 'Assigned To' lists both include the same users and require separate checkbox selections, which may be redundant when filtering tasks and add unnecessary decision steps.

Having two separate but similar user pickers forces users to mentally distinguish between nearly identical lists and make extra decisions, slowing down the filtering process.

Evaluate if both filters are essential to show simultaneously or if these criteria can be merged or toggled to reduce repeated user selection effort.

The modal includes multiple filter options and 'Save Preferences' and 'Clear Filter' buttons, but there is no clear indication what happens after saving preferences, nor is there a confirmation or feedback message visible.

Users may be uncertain if their filter selections were successfully saved and applied, causing confusion and possible repeated actions.

Add a clear visual confirmation or success message after saving preferences, and/or provide an indication inside the main UI that filters are applied.

Users may take longer to effectively apply filters or may overlook important filter options, reducing efficiency and user satisfaction.

Introduce stronger visual hierarchy using font weight, color accent, or grouping borders to differentiate filter categories and controls. Consider clearer headings or subheadings for each filter group.

Vertical misalignment in tabular data reduces readability and makes the UI feel less structured and professional.

The filter panel shows multiple clickable options tightly grouped including statuses, task types, category filters, user selectors, and date fields with small checkboxes and searches all clustered. The close spacing and complexity could overwhelm and cause mis-clicks.

Users may feel overwhelmed by many small targets and complex options visible at once, leading to slower interaction and potential errors.

Increase spacing between clickable filter options, consider grouping filters into collapsible sections, and simplify the interface by prioritizing the most commonly used filters.

The filter modal requires users to set multiple filter criteria across different dimensions such as create date, due date, status, tasks type, category, created by, and assigned to, resulting in many micro-decisions on one screen.

Users have to process and decide on multiple overlapping filters simultaneously, increasing cognitive load and the time it takes to effectively filter tasks.

Consider grouping related filter options, using progressive disclosure, or enabling users to apply common presets to reduce the number of simultaneous decisions.

The filter modal presents many selectable filtering criteria, but it is not clearly indicated if filters take effect automatically or only after pressing 'Save Preferences'.

Users might be unsure if they need to manually apply filters, risking confusion or mistaken assumptions that filters are in effect immediately.

Make the filtering application process explicit by clarifying whether filters apply dynamically or require saving, with appropriate UI cues.

Inconsistent button styles confuse users about the current selection or interactive behavior, undermining UI clarity.

Use a consistent button style for all toggle options with a clear visual differentiation for the selected state only.

Column labels like 'Tasks', 'Category' use a light gray color that appears low contrast against the white background, likely below WCAG AA for normal text.

Labels with low contrast can be difficult to read, impacting users with reduced vision and overall readability.

Use a darker shade of the text color to achieve sufficient contrast according to WCAG AA standards.

The status tabs 'Pending' and 'Completed' appear with medium gray text on a white background, which may have insufficient contrast for some users.

Text with low contrast is harder to read for users with visual impairments, reducing usability and accessibility.

Darken the tab text colors to meet at least WCAG AA contrast ratios relative to the background.

The 'and' text between the 'Filter By Create Date' and 'By Due Date' inputs might be unclear to some users whether it means date range start and end or separate filters.

Users might be confused about how the date filters interact, possibly filtering incorrectly.

Use clearer labeling such as 'From' and 'To' or visually group the filters with a clear range indication.

'Clear Filter' button label is somewhat vague; users might not be sure if it only clears date filters or also status and user selections.

Uncertainty about what gets cleared may lessen users' willingness to use this action quickly.

Change label to more descriptive text like 'Clear All Filters' for clarity on the scope of this action.

The filter modal lacks a clear, persistent summary or preview of currently active filter criteria which may make it hard for users to recall which options are selected before applying or saving filters.

Users might forget or overlook what filters they have chosen, increasing likelihood of errors, repeated work, or frustration.

Add a visible summary or tag-style overview of active filters within the modal, allowing users to review selections at a glance.