Navigation between steps on mobile form wizard, automatically or scrolling to "next" button?

Question

I have a form wizard, which looks like this:

On this particular step, you are supposed to pick only one of the three items. On the desktop version buttons "Next" and "Back" are fixed to the bottom of the page, so there are always visible. However on mobile, they are replaced by a button to show a summary of an order.

As you can see, when each card contains any text, they don't fit on a single screen, so user can't see the navigation buttons.

I see two solutions to this problem:

a) Automatically go to the next step, when user picks one of the items. I'm afraid that they might not be sure what did they pick or pick something by accident and then struggle to get back.

b) Upon selecting one of the items, if the buttons are not in viewport, smoothly scroll the screen to reveal the buttons. This way user has a chance to change his choice, without thinking how to get back and he is sure what he picked (the card changes its color), by confirming his choice explicitly clicking "next".

Which one of those two are more intuitive? Maybe there is a third one?

After a good night sleep I've found a third way. So I have moved the summary button to the top nav, which freed the space for the navigation buttons on the bottom. Let me know which feels better:

Answer 1

I prefer your third option, with the buttons always being visible. You can utilise the "Continue" button even more, by disabling it when the user has not yet met the criteria of selecting an option. In such a case be sure to supply feedback when they select the button, explaining why they are unable to continue.

I'd like to add that it might not be clear to the user that they should only select 1 option.

• Communicate this by adding instructions to the top of the screen. This way, the user will know exactly what they need to do by the time they reach the options.
• In addition to instructions, use components to your advantage - radio buttons would work wonders to reinforce the desired action required by the user.