AI / Design Communication & Image Prompting
Make "the button isn't obvious" testable
Break it into contrast, tap target, competing elements, and position
My primary button on [page] has been reported as not obvious enough. Break that into measurable items: 1) Contrast between the label and the button fill, and between the button and the page background — give the current and target values for each; 2) Tap target size, and whether it reaches 44×44; 3) How many elements on the same screen are brighter, larger, or more saturated than it — list them; 4) Where it falls in the user's scan path, which visual stop it is; 5) Whether the screen has exactly one primary action. Then give three change options, each naming the single variable it changes, the expected effect, and how to verify it, such as time to first click or task completion rate. Do not just say 'make it bigger and bolder'.
How to use
Change one variable at a time; otherwise a lift in click rate tells you nothing you can reuse.
Good for
- In a review someone says this button is not obvious enough and nobody can name the change — convert obvious into contrast and competing elements first.
- Primary-button click rate dropped after a redesign and the team wants a brighter colour — first check whether two buttons of equal weight appeared on the same screen.
Not for
- The button is disabled or needs a second confirmation — being inconspicuous is deliberate, and what needs changing is the explanation of the state.
- It is the only action on the page with empty space around it — it is already the most prominent thing; pushing further only makes it noisy.
Example
Input
Mobile checkout: the primary Place order button uses brand light blue #7FB3FF with a white label, 40px tall and 343px wide; the same screen has a Continue shopping text link and a red discount tag at the top
What you get
Label on fill is 2.2:1 and button against page background is 1.4:1, both under target, 4.5:1 for the label and 3:1 for the boundary; at 40px tall it misses the 44px tap target minimum; the red discount tag outcompetes the button and is the first visual stop. Option A changes only the fill to #0B5FFF, reaching 6.4:1 with no layout change. Option B demotes the discount tag to a light outline so the button is the only saturated element. Option C raises the height to 48px with 12px of padding. Verify with time to first click and submit completion over one week each.
Common mistakes
- Changing colour, size, position, and label at once — if it improves you cannot tell which change did it, and you cannot reuse the answer.
- Adding a shadow and a gradient to make it obvious — that adds decoration, not hierarchy, and it breaks in dark mode.
Try tweaking it like this
- Ask instead whether the button is inconspicuous because it looks like the secondary buttons — check the hierarchy system before the single button.
- Add a rollback condition to each of the three options — knowing how you would undo it persuades a review more than the option itself.