4

I'm designing a flow for businesses to add new credit card users. Since we want to make the flow as short as possible, we came up with the idea to show smart defaults for the embossing name (the name that is used on the physical card). This default would be a combination of the initials and the surname that was filled in previously.

However, since it's not mandatory to have your legal name on your card you can in essence write down whatever you want as embossing name. We want to prevent locking people in to using what we tell them, yet we also want to help save time by providing smart defaults.

My question is; how do you show that a field is 'prefilled' or contains a suggestion, but can still be changed to whatever you like?

Currently I have a regular filled field with a caption underneath that reads 'We've already made a suggestion for you based on the provided initials and surname.'

Edit: added a mock-up Input field with suggestion caption

2
  • do you have a mock with the surrounding fields and context? It's an interesting question...
    – Mike M
    Jul 30, 2019 at 15:15
  • I've added a mock-up of what we have so far. We don't have exact fields yet to place nearby, but they will pertain to card settings and restrictions (like what you can use the cc for (travel, hotel etc)). Jul 30, 2019 at 15:18

5 Answers 5

8

Essentially, your users can either select one of your suggestions, or input their own custom name, so I'd present all of these in a single radio button list. This would present your automatic suggestions, but also communicate the option of customizing the embossing name, all while still limiting them to a single selection.

Radio button list with custom input field

3
  • 1
    Although this design is very functional (effective), I am not sure it speeds up the task (efficient), as most users would read all suggestions and think about each one of them and then maybe accept one or create a custom name. It is the natural behavior of users when they see multiple selection (i.e. multiple choice question in an exam). The OP aims to speed up the task and save time by providing a smart default.
    – Mo'ath
    Jul 31, 2019 at 14:04
  • @Mo'ath The options will all be very quick for the user to process, as they are different forms of their own name, so they will be immediately recognizable. I'd also suggest that having multiple explicit options might be beneficial as it would allow the user to see how each representation looks when it's actually written out. For example, the user may prefer the form "J. F. Kennedy" the best, even though they might not have thought of that on their own. I'd imagine an "embossing name" is a significant detail to settle, so some slight additional overhead might even be beneficial. Jul 31, 2019 at 15:32
  • Great points when the goal is to help users to create custom embossing names. Yes you are making it easier by providing several combinations of their own name (quick scan true). One could add a credit card image and display each selected combination on it to show the user how it would look like on the credit card itself. I agree it is beneficial. I just keep revisiting the OP goal, which is speeding up the task and think that limiting the options to two, and make one by default selected works faster. Maybe provide embossing suggestions under "Create your own" option?
    – Mo'ath
    Jul 31, 2019 at 17:47
1

The suggested text can be light gray, so that it's very clear that it's a suggestion.

If there's already a help text at the bottom to clarify the added text is a suggestion, add a line to tell the user they can modify it.

enter image description here

1
  • I think this design somehow encourages customizing the name more than accepting the suggestion (smart default is designed to speed up the task by accepting the default). Here it does not read as take/accept this suggestion or enter your own. Instead, it reads as: we suggested this, click to edit it and use your own.
    – Mo'ath
    Jul 31, 2019 at 13:46
0

So far these are the two options that I could think of, which seem to offer a good fuctionality at a click/tap distance and with no apparent harm:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

Allow two options only, and make the Smart Default by default selected

The goal is to speed up the process by using smart defaults, then make the smart default option by default chosen. Allow two options only: First is your Smart Default. Second is creating their own.

Remember to make sure that the smart default you are using is as good of an option as possible. This way you are encouraging the user to select your Smart Default, also you are minimizing the overhead to two options only, which as a result help shorten the time and speed up the task.

let's suppose that initials plus surname is best as a Smart Default, then the design could look like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

OR -----

mockup

download bmml source

EDIT

I added info/help icon next to Create Your Own option. When hovered it provides name suggestions. It can be utilized to provide other types of info too.

0

How about showing the suggestion as a clickable button/tag? This would invite the prefill while keeping the user in control (should they wish to enter something else). https://www.instagram.com/p/B1FbvXAg1Jp/enter image description here

Your Answer

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

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