On our desktop website we have a registration form. The registration for when entered provides the user with a field hint with further information on the field and any special requirements (password requirements etc).

Field Hint on Desktop

On the desktop site it works really well. The problem comes with mobile devices when our website adapts and our field layout changes from side by side to a stacked layout.

Field Hint on Mobile

As you can see this poses a problem for mobile users as when the field is in focus the hint covers the button.

A possible solution for this is below which when showing forces the button down when the hint shows. The problem with this is it causes the button to move when you're in a field.

Possible Solution

Has anyone come up against this problem or is there typical solution for this sort of thing?

  • 3
    Don't use popup tooltips? If it's useful info then have it on the page as content.
    – JonW
    Commented Jun 5, 2014 at 15:40
  • We're trying not to overwhelm the user with text as they fill in the form. On mobile having the fields always have content between them will separate the fields (when multiple exist).
    – slaterjohn
    Commented Jun 5, 2014 at 15:58

2 Answers 2


There is way too much text on the screen. I would get rid of the grey tooltip completely & replace the hint text with "E-mail (for new order notifications)"

Also, the call to action gets lost as you have 2 instances of pushing for action "start your free 14-day trial today" & "create your shop now"...

I would keep only the green button "Create your shop ->" Mention the 14-day free trial at a later stage OR you can include it in the C2A button "Create your shop (14-day free trial) -->"

  • Thanks for your feedback EllaK We will look at addressing the C2A confusion. Regarding the hint, we'll reduce the amount of text and either place within the field or beneath.
    – slaterjohn
    Commented Jun 6, 2014 at 10:22

For me there is to many layers for text. This screen probably will be hard to process for a user.

I suggest to merge CTA with first text from above:


download bmml source – Wireframes created with Balsamiq Mockups

Here's a gif which shows quite fun idea for hint2label transition

Nice hint2label transition

  • We've removed the upper text and integrated that text into our single call to action now. Our placeholder text does change to a label when the field is entered.
    – slaterjohn
    Commented Jun 12, 2014 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.