How best to visualize an either/or choice between different types of actions

Question

So I have a modal window with some tabs. On one of the tabs there is a single input field for an identification number. Now we are adding some new functionality which will let the user snap a photo of the id and input the number automatically instead of having to write it out.

I'm having some trouble figuring out how to position the input field and the button so that the user clearly understands it's an either/or choice.

Right now they are separated by a line with the input to the left and the button to the right and there is a short explanation of the functionality above each of them. It gets the message across but feels strange.

It's a sort of weird situation because the choice is between two very different actions - either input text or press a button to take a picture. Has anyone come across a more intuitive way of giving users a choice between two actions of a different type?

Answer 1

You provided not so much details. But consider following.

Split your single window or screen form into 2 steps.

Step 1 - select the mode. First, ask user to select, how he prefers to enter the data - via input field directly or via photo. Don't show just radio button. Instead, display two big icons, so that user understands quickly what is he expected to choose. Let say one icon with keyboard (to enter ID data directly in the text field) and another icon with a camera (to make a photo of ID).

Step 2 - display a screen depending on previous choice. After user selected one of two icons (one of two modes), display the next screen, that either contains text field in one case and screen with a button to make a photo in another case.

It might be a bit more work for you. But easy to understand for users.