2

I'm designing a web site and i have two buttons one below the other on the landing page. One is a primary button and the other is a secondary button.

The structure of the page includes an image which will occupy say 40% of the screen, below which the title and a short description will follow, below which the above two buttons will follow as you can see here CTA above the fold

The problem i face is that for the smallest possible screen size (iphone 5) where there is not enough height the second button will only be visible on scroll, as can be seen here second button gone below the fold

I'm wondering if this could be problematic for users because this structure would confuse them by splitting a sort of section in between?

I do understand that users scroll and I'm just wondering about the coherency of the structure rather than fearing that they won't see the button. One possible work around would be to reduce the description text or make its size smaller but I would like to avoid it if possible.

Wondering if any one has faced this problem and has tackled this before. I do not have data though to confirm my thinking

Improve this question
1
  • Hi Saurav, please post images inline for your question to prevent link decay...
    – Mike M
    Apr 22, 2019 at 15:37

5 Answers 5

Reset to default
5

The general shape (horizontal square) and position of the primary button (right above the fold) creates a false bottom.

So the problem here is that the user is not aware that there is another button below the primary one and will have to discover it.

Once the secondary button gets discovered by scrolling down, users should understand the CTA belongs to the landing page because they have now have some context.

But scrolling and clicking is work. If you can deliver an experience that minimizes the amount of gestures required from the user then you might have a better conversion rate.

I would place the two buttons side by side on the smaller screens or make it clear that there is more content below the fold.

Improve this answer
1
  • can you recommend an approach i could take? I'm probably thinking of removing the image on smaller devices and simply keep the header, text, and buttons and add some background image or color. It will be hard to add indicators for only a few screens and plus would look odd because the buttons would still not be present.
    – Saurav Seth
    May 3, 2019 at 4:10
4

Alternatively, the height of the image at the top could be sacrificed to make space for the content below. A smaller image would serve the same purpose.

Below 300px, the elements may be scaled down slightly to render in normally, as you have mentioned already.

Or, use the image as background and overlay the text and buttons.

There are multiple ways to handle this problem.

Improve this answer
4

I think the best solution for you is as the following:

1- Try to Shorten the long title for every button but taking out the redundant words.

2- The buttons must have the same place even on a small screen, for a better experience, changing the location of buttons is a big enemy for usability. and this will reduce the visits to your app.

3- What you need to do is to let the two buttons beside each other. Always stick to the bottom of the app even you have small content or more. so if you have scroll keep the bottons appear always. as shown in the attached screen.

enter image description here

Improve this answer
2

I faced similar problem, reduced the height of the image for low resolution devices - It helps users to make decisions (obvious always wins - then hidden - I understand it is not hidden purposefully), The word "Browse" appears twice/back to back in CTAs which can be avoided, then you can have the CTAs side by side Keep CTAs beside

Improve this answer
2
  • You are right redundant words is part of the problem. Because in my point of view, the main problem in all platforms even desktop is the width size!! If you managed your content horizontally you can manage in your design solution.
    – Khalil Hanna
    May 16, 2019 at 9:52
  • The redundant word got me to rethink the secondary button text and it should be place order. Regarding the primary button, this change in text will take out the A in CTA: the button does not have an action anymore. Apart from the button text, this does seem like the correct approach to the problem.
    – Saurav Seth
    May 17, 2019 at 2:34
1

Concerns about Above the fold vs Below the fold originated decades ago. The internet is now common enough that it's likely a non-issue. Users know that the entirety of webpages don't fit on a single screen and that they need to scroll. The most popular sites today are essentially infinite scrolling experiences.

Users won't scroll when your content isn't compelling enough to keep them on the page, not because that they are "confused".

If you really want to know what users are doing on your site, you can use javascript to monitor scrolling behavior and click rates on different screen sizes.

Options to consider:

  • Reduce white space, especially around the "Account" link and the buttons.
  • Create app-like navigation bars. (Essentially what Khalil Hanna recommends.)
  • Remove one of the buttons. What's the difference between browsing "meal plans" and "menus"? One could easily be considered a subset of the other.
  • Shorten button text and place them side-by-side, as Jairaj Ramendran suggests.

  • Overlay the title onto the image.

    mockup

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.