0

I believe this question is quite similar to What are the best practices for tooltips on mobile websites?, but this question is more specific (only focus on form fields) and to go deeper in how to show the same information in desktop and mobile version.

I'm thinking of a solution similar to this jQuery example: enter image description here

But this solution doesn't fit into mobile devices. And probably this is not a good solution for desktop version.

So my first question is: Is this a good way to show extra information on form fields?

If so, what is the best way to make it compatible with mobile devices?

Thanks a lot!

  • Use tool tips instead. whenever user focuses on any input show tool tip. position tool tip be below form input avoid the current position hence it will look ok in mobile also. – prazor9 Feb 13 '17 at 10:37
  • Thank you @prazor9 for your response. Do yo think the best position is below inputs? Thinking in mobile devices, I do not know if this position on this devices could hide and could be a little annoying. – Miguel Ángel García Gómez Feb 14 '17 at 11:36
1

I believe a good answer to this is on this article https://www.nngroup.com/articles/form-design-placeholders/ and using this solution:

enter image description here

Basically you add an hint directly below the label, where clear indication is given to the user and no additional scripting is added.

| improve this answer | |
  • Thank you very much @joao-carvalho for your response. I think is the best cross-compatible solution and probably the cleanest. – Miguel Ángel García Gómez Feb 14 '17 at 11:28
  • However, imagines you need to put a tooltip, because is a must of the application, do you think is a good solution to put next to the field and to open this tooltip you press it (with the mouse pointer or touching it in a mobile device) and press it once again to close? – Miguel Ángel García Gómez Feb 14 '17 at 11:32
  • @MiguelÁngelGarcíaGómez when is a tooltip a "must of the application"? Can you share an example? – Joao Carvalho Feb 14 '17 at 12:00
  • Oh sorry, I'll try to explain myself. What I'm saying with "must of the application" is a requirement from the customer. In the question there is an edit showing this new situation. – Miguel Ángel García Gómez Feb 14 '17 at 12:31
  • As my reputation is not enough to put more links on the original question, I put here: Another approach is using a tooltip nex to header of form, something similar to this: i68.tinypic.com/o6i650.jpg – Miguel Ángel García Gómez Feb 14 '17 at 12:43

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.