12

In one of my iOS mobile apps I’m showing a screen with 2 options:

  • The first option, on the left side, is an outlined button that performs a free action.

  • The second option, on the right, is a solid butto) that performs an action for which payment is required.

I would like the user to choose the paid option.

Here’s a screenshot of the setup:

enter image description here

I've seen in many places that a CTA button should start with a verb but as you can see, adding Export to the beginning of each button, is not an option, due to lack of space.

However, I don't think placing them one-above-the-other is a good idea, because it will reduce the compression between than, and I need the users to eventually tap the 'Full HD' button.

How can I do this correctly?

  • You could also test with two radio buttons, with one big button "Start" below it. – Stephan Bijzitter Jul 18 '17 at 16:13
  • 1
    Is the left option truly Low Quality, or Standard? If Standard, you could use "Get SD" and "Get HD". "Low Quality" and "Full" are pretty wordy descriptors that could probably be eliminated or reduced. – Leatherwing Jul 18 '17 at 17:09
  • 1
    @Leatherwing It's standard basically. The real challenge is the microcopy. As for not many know what SD is, and it will create frustration. IMO. I wish it was easier to come up with those short titles – Roi Mulia Jul 18 '17 at 17:25
  • @StephanBijzitter Thank you for your suggestion :) I'm going to both-at-same-line UI for now (works good) – Roi Mulia Jul 18 '17 at 17:26
  • Note that the text should say "In what quality would you like to export" (or "...*do you want* to export"). The text currently in the screenshot is not good English. – psmears Jul 19 '17 at 14:16
31

Starting CTA with a verb is a recommended way to go but in no way set in stone. Otherwise you would have strange situations like the one you're dealing with now, just because of some 'rule'.

Something else you could try is to put the verb in the label text above (picture one) or change the text to the user's perspective (picture two).

enter image description here

  • 1
    Awesome!! I'm amazed I haven't thought about this my self. Btw,Is it a must to align-left the label above or can I keep it centered same as my picture? (In sake of symmetric) – Roi Mulia Jul 18 '17 at 13:21
  • 1
    There's a lot of talk about label placement. Personally, I think left top aligned works best. Here's a link with research: uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php – Nick Groeneveld Jul 18 '17 at 13:25
  • 1
    To make it easier for less technical users. The term 'export' is something we all know, but maybe your users don't. In the second picture I tried to label it like a user's thought. "I want my video in Full HD". The same theory can be applied to "full hd" by the way. Maybe change it to low and high quality? – Nick Groeneveld Jul 18 '17 at 13:35
  • 1
    I thought about it for hours, "Full HD" vs "High Quality". I came to conclusion that even tho "Low Quality" vs "High Quality" is far making more sense. "Full HD" is a "stronger" word in terms of pure quality. And placing "High Quality" vs "Full HD", "Full HD" takes in terms of better connotation. Am I BS'ing here or am I making sense? – Roi Mulia Jul 18 '17 at 13:49
  • 1
    Thanks. Much appreciated. Your answers always giving me confident too keep forward! – Roi Mulia Jul 18 '17 at 13:53
1

I'm getting the feeling of an arrow facing right, with thick fill, like from the Arial Black font set, could suffice for a verb CTA

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.