7

The user has to input a 'serial' that can be verified in a database. The user can enter 1 to n 'serials'. Serials can be good or bad.

For those following case, I do:

  • Case 1: Do the process on good serial, let only the bad serials.
  • Case 2: Input invalid no process.
  • Case 3: Clear the textbox, all process done.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

User can observe immediately the rest of the process so they know if it works or not. But finding the serial that failed in a list even a short one can be hard. As they can look like the same. The user enters 1 to 10 serial in a row. The average number is 4.

Color can not be use in the text box as textbox is rendered as HTML <input> element on the page.

Input can be validated on key strokes, but it will be time-consuming as checking for a like on 3 million row will take more time than an equal test.

The input takes 20% of the display. So 80% of it is free for any error message.

  • Is it possible to validate user's input on key stroke when delimiter is detected? Can you render error message next to the input field? – Jurijs Kovzels Jun 16 '17 at 12:34
  • Added those information in the question, it's Yes but I don't want to, and Yes at least 1200px free on the right. – Drag and Drop Jun 16 '17 at 12:44
  • If you have constraints of using only input tag, I'd suggest making your error message say which serial number is incorrect. Or explicitly mention the erroneous serial number in the error message. – Harshal Jun 16 '17 at 12:56
  • I have no real constraint for now it a text box because they copy past text from mail. Missing first or last letter – Drag and Drop Jun 16 '17 at 13:07
16

I'm not sure what your tech stack is, but you could use an input that the Return key quickly turns it into a taglike pill.

Here's a bootstrap example showing this with accompanying code (It's a tiny bit buggy as you'll notice the input shifts to the left a very small amount, but it's a starting point):

enter image description here

Pro

  • Users can make hard to read numeric strings into visually discrete units

  • Ability to delete individual items

  • Users can input w/o leaving the keyboard to press a button

Con

  • Users may mistakenly think the system is entering them as 'tags' for categories vs individual items

re: users getting immediate feedback
If you have some area (not visible in your mock) that shows immediate feedback as you mentioned, perhaps you can position it just to the right so users can see quick visual indication that the serial # is incorrect, so they can quickly make adjustments. I don't see that in your mock, so I don't have a clear picture of your constraints for the UI.

  • 3
    Great! I used to call this the 'tokenized autocomplete textbox'. And I had totaly forgot about it. It's look like a perfect fit. I can add auto complete, check the token on enter, change color of token based on Something. I usualy let 1 day before using the green tick. – Drag and Drop Jun 16 '17 at 13:04
  • 1
    @DragandDrop Note that the existence of these colored fancy tags contradicts your sentence "Color can not be use in the text box...". Consider using a less tag-like-looking text; I guess a red/green box border makes it clear enough. – maaartinus Jun 20 '17 at 0:37
8

Taking limitation into account: plain html input (no colors, no tokens) I would suggest to:

  1. Increase field size from 20% to bigger value because user will not be able to see entire value of the input in edge cases;
  2. If "on type" validation is acceptable when delimiter is detected then do a validation and show error message: "'incorrect_value' is invalid". Make sure to remove message if value is corrected.
  3. If you can do some more javascript magic utilize setSelectionRange to highlight incorrect value.

In any case, do not remove incorrect parts of user input automatically because user will not notice it. User input is sacred even if it is incorrect from system point of view.

If plain html input can be overcame, then:

  1. Consider replacing input field with multiline textarea for that 10 value in the row edge case;
  2. Use more complex control which can tokenize the input. In this case the task is quite simple. In this case the task is much easier (assuming you can find correct implementation). Head to your email client and see how incorrect addresses are handled. enter image description here

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.