Call-to-Action Buttons - MindMiner UI Review

Primary CTA: "Solve A Problem"

Purple gradient button with star icon

#7 Critical Pending

Current State:

Height ~40px; padding unclear; high contrast with surrounding UI

The Issue:

Button height of 40px is below WCAG and Material Design touch target minimums (48px). This creates accessibility issues for mobile users and users with motor disabilities.

Recommendation:

Increase to minimum 48×48px
Adjust padding to 16px (total height 48px with text inside)
Maintain high contrast (white on purple)
Add visible hover state (elevation + color shift)

Priority: CRITICAL

Estimated Effort: 0.5 days

User Impact:

Users on mobile will have easier time clicking button; improved touch accessibility and reduced mis-clicks for users with shaky hands or fine motor control issues.

Your Feedback (Optional)

Secondary CTA: "Improve A Product"

Purple gradient button with star icon

#8 Critical Pending

Current State:

Same styling as #7; matching size issues

The Issue:

Same 40px sizing issue as #7. Additionally, there's no clear visual distinction between this "secondary" action and the primary "Solve A Problem" button.

Recommendation:

Match sizing to #7 (48×48px minimum)
Ensure visual distinction: lighter purple background OR different icon
Consider using secondary button styling (outlined or lighter)

Priority: CRITICAL

Estimated Effort: 0.5 days

User Impact:

Same accessibility improvement as #7; visual distinction helps users understand the two different actions available.

Your Feedback (Optional)

Button Hover States

Visual feedback when hovering over buttons

#9 High Pending

Current State:

Hover states not clearly visible in screenshots

The Issue:

Without hover feedback, users don't get clear visual confirmation that a button is interactive before clicking. This reduces perceived responsiveness and can feel sluggish.

Recommendation:

Implement: 4px elevation increase + 10% color lightening on hover
Use smooth 200ms CSS transition
Example CSS:


                    button:hover {

                      transform: translateY(-2px);

                      box-shadow: 0 4px 8px rgba(0,0,0,0.15);

                      transition: all 200ms ease;

                    }

Priority: HIGH

Estimated Effort: 1 day

User Impact:

Users get immediate visual feedback that button is interactive; improves perceived responsiveness and makes the interface feel more polished.

Your Feedback (Optional)

Button Focus States

Keyboard navigation focus indicator

#10 Critical Pending

Current State:

NOT VISIBLE - Critical accessibility issue

The Issue:

Without visible focus indicators, keyboard users and screen reader users cannot tell which element has focus. This is a WCAG 2.1 Level AA violation and makes the site unusable for many users.

Recommendation:

Add 3px blue (#4F46E5) focus ring with 2px offset
Ensure visible on ALL interactive elements
Use CSS outline: outline: 3px solid #4F46E5; outline-offset: 2px;

Priority: CRITICAL

Estimated Effort: 0.5 days

User Impact:

Essential for keyboard users and screen reader users; WCAG 2.1 AA requirement. Without this, site may be legally non-compliant.

Your Feedback (Optional)