1

I want to put both an info and a clear icon for each text field. How should I design it w/o it looking awkward? Or, is two even necessary?

awkward icons and text fields


EDIT: How do I style it for an "if applicable" text field? It's optional but not really -- only necessary when the user enters a product that comes in multiple shades.

"if applicable" text input

1
  • what is the 'i' giving you information on?
    – Mike M
    Jul 15 '20 at 2:36
8

Try putting it in proximity to the label, not the input.

enter image description here

This allows a user to read the label, and get more information right next to it. This separates it from the interactivity associated with entering the value in the input field. This also gives you a longer input field, and doesn't confuse an icon which represents an action (clear) with an tooltip.

It's only necessary to have more info when it's potentially unclear what the label (and its input) represents. So you can use as needed, as opposed to having it for every label.

3
  • I did what you suggested, but I'm not sure how to apply to an "if applicable" text input (see edit).
    – cesca
    Jul 15 '20 at 12:21
  • @Cesca, From your explanation it seems there are some products that comes with multiple colors. If this is the case, can u add corresponding colors in shade input as pre populated drop down? In case user selects a product which does not come in different shades, this drop down can be disabled. Jul 15 '20 at 17:17
  • @OmkarChogale A drop down won't work because it's for an app (called Think Dirty) that lets users scan/add their own products into the app's database. There's millions of products and even more shades of products they may add.
    – cesca
    Jul 15 '20 at 18:10
0

Perhaps the information button is unnecessary indicating each title as a link (underlined)

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.