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?

Improve this question
6
  • You could also test with two radio buttons, with one big button "Start" below it.
    – Stephan Bijzitter
    Jul 18, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 14:16

2 Answers 2

Reset to default
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

Improve this answer
12
  • 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, 2017 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, 2017 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, 2017 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, 2017 at 13:49
  • 1
    Thanks. Much appreciated. Your answers always giving me confident too keep forward!
    – Roi Mulia
    Jul 18, 2017 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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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