1

I'm working on a promo code entry field and want to give feedback to the user for both a valid and invalid entry. I want to show feedback near the input but does having the icons inside of the field present an issue?

enter image description here

-Promo codes are fixed length (5-9 characters)

  • 1
    I don't see anything wrong with your design. – Alan Dec 19 '17 at 21:41
3

I'd be careful, specifically with the "×" in the input field. Some users may be familiar with input fields that contain a "×" to clear the input.

For example, some browsers interpret a standard <input type="search"/> as a field with a "×" to clear the input.

Seen here in Chrome:

search input field

I agree that the aesthetics are nice, but I think it could look just as nice outside, perhaps before your error message?

ⓧ The promo code you entered is invalid. Please try again.

Alternatively, you could actually wire up the "ⓧ" to clear the input, and viola, solved that problem.

  • Just realized I typed "viola" instead of "voilà". I think I'm going to leave it though. – maxathousand Dec 21 '17 at 21:03
0

I've seen it done both ways before but it usually depends if its on mobile or desktop (you are not specifying which one it is)

Here you can find a topic debating something similar: Inline validation icon usability

Here you can find a research regarding the same topic: http://alistapart.com/article/inline-validation-in-web-forms

I do see some minor changes you might want to consider (though they are not on the scope of your question)

  1. Make sure the field text is of similar width to the expected input. (I think you've done this to certain degree, just making sure it was not just because of a quick mockup)
  2. Denote the cupon is an optional field in case it is
  3. The placeholder text could show an example cupon instead of "Optional promo code"
  4. Give users the option to remove the cupon once they added it. Sometimes you just don't see the point of using it after seeing the discount!
  • 1
    2. The label reads "Optional offer code". I think that's sufficient. 3. If I saw an example coupon as placeholder text, I might think there was a coupon already applied, or somehow maybe I automatically got a free coupon, or I just have to type that example one and apply it, or it's already there and I just have to apply it, or.... – maxathousand Dec 19 '17 at 20:40

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.