How to make it clear which button is the Primary (default)?

Question

I've been doing some UX testing and those users (3 out of 3*) didn't realize the blue button (below) is the default.

I'm trying to figure out how to make the primary button more obviously the primary. The goal is that if they don't know what to do, that Primary button is what they should do.

My top option is to make it glow (pulsating) like this. It would probably be very very slow pulse ( off for 2 or 3 seconds, glow on for 1 second), etc. The idea is they'd learn that that was the primary button.

Any thoughts on that or better option?

LESSON SCREEN

User watches video of the woman and then repeats back what she says. They should click the Next Step button and go as far as they can. Then go to the Next Word.

SCORE SCREEN

This is shown after lessons that measure their performance (so things like "click on the picture that matches the word). (We can't grade speech very well so we don't even try). We show them choices for what to do next. The primary button is our "recommendation"

Followup:

I realized that the ideal solution for the first screen is to make the First STEP not start automatically. So when they first get to the screen I'll make the button say "First Step". Then after they click it it'll change to "Next Step for this word" (may leave out "this".

That still leaves the issue of how to indicate the primary button.

Answer 1

Visual weight

In the example below the secondary option has draws much less attention than the primary option. How you do that is up to you. Different situation but same issue.

The other thing that doesn't help in your design is that it's very crowded. Try to use more whitespace.

Answer 2

You followed a rule to make the primary button more saturated (blue instead of white) but have fallen into a couple other pitfalls.

Don’t reverse text for emphasis

Reversed text is not necessarily bad, but different people react to it differently. Many people, myself included, almost instinctively ignore reversed-out text — because they find dark-on-light text easier to read. Since different people react differently to reversing text, it’s not a good choice for drawing the eye.

Make the default button “first among equals”

Your default button looks so much different than the others that folks might not realize it “the same sort of thing” as the other buttons.

Instead of changing the color scheme, use a raised button effect to make the button literally more prominent. That is, the button should appear to be closer to the user than the other page elements, almost as if it were a separate piece of paper on top of the rest of the page. If your page design is largely flat, the raised button will strongly draw the eye.

Increase contrast in your primary button

Default buttons should “pop” by having a little more contrast than the others, but it looks like your primary button actually has a little less contrast between your text and background than your other buttons (maybe just because of how the white text dithers in the provided image). The is definitely less contrast between the button’s icon and its background.

Go Old-School and make the text and outline bold

It looks a bit dated these days, but the old practices of giving a primary button bold text and background background are still effective.

Answer 3

Dark and cool colors recede; light and warm colors advance. So in your design, the dark blue primary button seems further in the background than the lighter secondary buttons. Just switching the styles for the two type of buttons is another option to test with your users.

Size is another consideration. Your primary buttons are the same size or smaller than the others.

Answer 4

I have some suggestions:

1.You could remove the background color of the others button make them a ghost button which is really good if you wanna put them aside with the primary CTA.

2 If you want the Primary CTA more obvious to the users you need to leave it alone, you can put it to the bottom center.

3.For your first picture, the next step button should in the right position replacing the "Next Word" it will give a consistency because your previous step already in the left side and the icon I think should be opposite of the "previous" one.

4.You can use a strong color/ conventional color like orange, red, and green which will catch the users attention more than blue color.

Answer 5

I'd suggest a tighter visual organisation and making the instructions non-verbal insofar as you can (I've not tried to address the 3 buttons at the bottom, but two of them seem redundant). I've no idea who's supposed to use the "feedback" buttons so I didn't touch them, but they should probably be moved to the bottom edge along with the other housekeeping stuff.

The biggest change I'd recommend would be to make the default visually obvious not by flashing lights or dancing text, but by showing the series of which it's a sequentially moving part.

I presume that "step", "word", and "task" relate hierarchically, but I don't know the relationship and so can't say much.