How to handle a user text input which accepts tabs as a valid character?

Question

Working on an automated data handling system. It attempts to work out the format of the uploaded data itself but, if it fails, it asks the user to put in things like field delimiters so it can process the file properly.

Problem is that "tab" is a common field delimiter, so the text box for this needs to accept tab characters. This creates three problems.

1) The standard behaviour for a tab is to move on to the next form control. This is not a large form, so disabling doesn't create a large usability problem, but it will be very confusing for a minority of folk who are used to tabbing through a form by default.

2) Because of the above, users who don't tab through may still be unsure what to put in the box if the file is tab delimited. They may not think to try a tab character, even if we accept one.

3) If someone gets this far and puts a tab in the box, it will be very far from obvious that they have done so. The box will not display a visible character and will appear empty unless the user thinks to look for the position of the cursor.

Is there a better UX approach for this?

Answer 1

For the first two problems, you could explicitly write a note next to the input like “accepts Tab” or “Tab accepted”. I would style that note in lighter and smaller text.

For the third problem, you could make the tab character visible in the input by replacing it with a specially-styled ‘⇥’, perhaps in a box with the word ‘Tab’ after it. This takes inspiration from both the tags input on Stack Exchange sites and the way code editors display invisible characters.

Combining these solutions, you would have an interface that looks like this when empty:

Upload data text file: (Choose a file)

Delimiter: [] (accepts Tab)

And looks like this with various contents of the delimiter input:

Delimiter: [⇥ Tab] (accepts Tab)

Delimiter: [,] (accepts Tab)

Delimiter: [␣ Space] (accepts Tab)

For other possible characters to represent Tab and Space, see Wikipedia: Tab key – Unicode and How can I best display a blank space character?.