2

I have a mobile form, on which the CTA is lower on the page, so a sticky CTA indicates the action for the form upon first glance for users. But, how do I deal with content that is hidden because of the sticky footer, below the fold?

I want to tease the user by cutting off content, to indicate that there is more content below the fold, but how can you assure this happens on every mobile device height?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question
5
  • What other operational-context can you provide about the CTA? Is it a submit button for the form?
    – Alan
    Jan 24, 2018 at 15:27
  • This seems like a question about Implementation, which is off topic. You seem to have a clear vision of the design/interaction you want, so there isn't really a UX question here. You could try asking on a developer-focused site.
    – dennislees
    Jan 24, 2018 at 15:41
  • @dennislees I disagree. It's a specific design requirement that spurs the question of "How do I ensure my user knows there's more data below this floating element?"
    – maxathousand
    Jan 24, 2018 at 19:54
  • Then perhaps the question should be edited to reflect this?
    – dennislees
    Jan 24, 2018 at 20:20
  • What's the goal of the CTA? If it's not required until the form is complete put it at the bottom of the form rather than have it floating, consuming screen space.
    – Wes Toleman
    Jan 27, 2018 at 9:31

4 Answers 4

Reset to default
3

It seems like trying to detect device height to ensure that your elements sit halfway under a floating element would be getting into a whole can of worms, so I'll offer a couple solutions that would remove the need for that:

Stick the CTA to the left or right of the screen

If it's positioned without the standard content margin, then it won't appear to be a part of the typical scroll region. This could help to indicate that it's not a part of the screen beneath it.

Obviously, ensure the content will scroll high enough so that all of the content can move comfortably higher than the floating CTA.

CTA to one side

download bmml source – Wireframes created with Balsamiq Mockups

Show the CTA after a short delay

Alternatively, you could load the page, then fade or slide in your CTA so that users see that the page extends beneath it (hard to show in a mockup, but hopefully you get the idea).

Improve this answer
3

I would consider using a slightly transparent and blurred background, similar to what Apple does with the "background-blur" property for their tab bar element in native apps, to hint to the user that additional fields lie just underneath the main CTA callout.

Leveraging another native app approach, use angled or caret up and down elements in the overlay for the CTA to shift focus from one field to another; "angle or caret up" navigating browser focus to the field above and "angle or caret down" navigating browser focus to the field below.

enter image description here

Improve this answer
2

Perhaps you could disable the Submit button until all required fields are filled out, and test for false floors on different viewport heights.

Improve this answer
1
  • Hm, I'm not too sure about disabling the button, because if the content below the floating CTA is hidden, then the user is confused why it is disabled. But then again, this may be a trigger for the user to scroll. Thanks for answering!
    – Rick P
    Jan 24, 2018 at 21:40
1

Put the CTA slightly above the bottom, make it slightly narrower than the screen, and give it 3D shading. This will emphasize that it's sticky, and not actually the end of content, and if there's content below it, it should stick out from the sides and bottom.

Improve this answer

Your Answer

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

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