2

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 Jun 5 '14 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 Jun 5 '14 at 15:58
3

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 Jun 6 '14 at 10:22
0

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:

mockup

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 Jun 12 '14 at 8:04

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.