1

I am inserting about what is the best way to show help in form inputs. This is what I am doing in my site:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I have a question mark symbol, and when the mouse hover the popover may show.

But what should I do in mobile platforms? The popover may be outside of the phone viewport, or even over the input itself like:

mockup

download bmml source

So what is the best practice to show form input helpers in mobile platform?

  • 3
    Personally speaking, I only use such tooltips in forms to explain what the field label means. If I need to supply hints or information about what to put in that field I would print actual text on the page (below or alongside the field). – JonW Jun 7 '16 at 13:36
  • No, the tooltip/popover is only for explain what the field label means. But it can be long explanation or multi-lines – nrofis Jun 7 '16 at 13:43
  • I think there is no space in mobile UI for long explanations. Maybe the help could be at the bottom of the input form and it should be expandable, in order to read the whole thing. – Kristiyan Lukanov Jun 7 '16 at 14:06
  • Long I mean at most 3 lines, no more than that. But at the bottom of the input, the user may miss this and mabey not understand what it means – nrofis Jun 7 '16 at 14:09
1

It's always better if you keep the explanation right under the filed for both desktop and mobile. In case you need long explanation, you can always include a title for the helper line and link it to another page or a popup.

You'll get what I really mean by checking out this example from mailchimp. I use it and find it helpful.enter image description here

  • Can you please show me how should I do that on desktop version? If you said that its better then popover explanation, I would like to see an example. – nrofis Jun 7 '16 at 15:48
  • it looks exactly the same @nrofis - they are using the same layout for both screens. – Charbel Jamous Jun 8 '16 at 7:09
  • I saw in their desktop website (registration and login forms) that they did that the helpers shows only when the relevant input getting focus. Is a good UX or it should be displayed always? – nrofis Jun 8 '16 at 7:58
  • What about select element? I can't show help below the element on desktop or mobile, so what is the best way to do that for it? – nrofis Jun 8 '16 at 9:26
  • Guess I answered that right? – Charbel Jamous Jun 8 '16 at 9:36
0

enter image description here

I def. recommend this option for the desktop version but not for mobile. Look at the attached image, the window gets really tiny whenever you attempt to input text into the field.

  • So on mobile it's better to see the helpers constantly? and not triggers by focus? – nrofis Jun 8 '16 at 8:08
  • yes i would recommend you do this and test as you go :) – Charbel Jamous Jun 8 '16 at 8:08
  • Thanks! I also think that is a good idea. I hate moving form in mobile, especially if the keyboard is open... :) – nrofis Jun 8 '16 at 8:14
  • What about select element? I can't show help below the element on desktop or mobile, so what is the best way to do that for it? – nrofis Jun 8 '16 at 9:04
  • use the same technique but right under the lablel: - in case of one sentence, keep the helper between the label and the select element - in case of long helper, use a link do you think this could work for you? – Charbel Jamous Jun 8 '16 at 9:27

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.