TransWikia.com

How to place two icons for one input field on a mobile app?

User Experience Asked by cesca on October 31, 2021

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

2 Answers

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

enter image description here

Answered by Danielillo on October 31, 2021

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.

Answered by Mike M on October 31, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP