Is it ok for a landing page image to take up a full screen?

Question

My landing pages have large images, each of an individual building. I'm worried about information scent issues causing usability problems. The images have a parallax effect. Any suggestions on best usability practices in this case?

Site example here-

http://demo.thebambergergroup.com/b/1/110-east-36th-street/murray-hill/nyc

Answer 1

The full width image is totally fine, but it should complete the message. With a landing page everything should be clear at a glance and there should be a clear call to action for the user.

I think in this landing page there are some things that you should consider, so apologize if my answer will be a little bit out of topic, but I think those are the important things: What I see here is a welcoming message, not a call to action message, and it's not really clear that you can actually click in order to scroll, moreover, it's not clear what to expect next.

In my opinion the message should be clarified. Write a better copy which speaks to the user, put some information about what the user needs to know, but keep it simple. Is the page describing clearly and in an understandable way what you are offering to your target? Also, think about the first question that could came in your user's mind, is there the answer at first glance?

Last but not the least, the button on the right corner looks like a kind of call to action button, because, even if it's a ghost button, it is a primary button in your system, but it's just a 'getting touch', so it's not totally clear which is the primary call to action for the user. Regarding what I see here there is a 1:5 attention ratio, while ideally it should be 1:1 (based on the number of interacting fields), to optimize the landing page's conversion. Hope it will be helpful!

Answer 2

Yes, it's totally fine (and preferred) for images to be full-width. They aren't on your site now, and it's actually unsettling because of the huge contrast between the background and photos. That's the reason full-width (or full-bleed) photos are great for landing pages (and web pages in general), less contrast against the background provides better user response.

As for the parallax, it's a bit much but it's fine; I'd say that everything on the page loads a bit slow, and the parallax feels like it should be more in line with scrolling, but otherwise it looks good. And looks good on mobile too, which is refreshing!

Answer 3

My landing pages have large images, each of an individual building. I'm worried about information scent issues causing usability problems. The images have a parallax effect. Any suggestions on best usability practices in this case?

Its ok to have full page background image unless its causing any performance issues.

The image which you are using currently on example site has resolution 1600x2100 & looks like a high resolution image.

Right now image loading is slow & its affecting overall page load performance. Lets assume that your users viewport(screen.width x screen.height) is 1366x768. So instead of displaying 1600x2100 image on 1366x768 screen, if we display web optimized 1366x768 image as page background then it will always fill screen properly & will not hurt UX.

Same case applies to mobile as well. On mobile device you will have to make sure the you are not using users mobile data more than you actually need. Plus your page load should be decent enough & should not irritate mobile user. It doesnt make any sense to load 1600x2100 image on mobile device screen. For mobile sites you should use small resolution images which will fit in small mobile screens.

Also based on the example site that you have shared, I would like to recommend that you should try to put all your pages content such that user should be able to see all available options in single glance.

Example :
Lets take an example of page which has title 'AVAILABILITY'. This is a single page which contains 2 vertical sections. One on left side, contains a form & there is an image on right side. Both sections are only ~90% visible in a single glance. For rest 10%(which actually contains 'VIEW DETAILS' & 'GET IN TOUCH' buttons) user has to scroll down. This is not a good UX according to me. Instead of this if you can move these two sections little up then all information will be visible in a single page & give nice UX. Same thing with 'FEES & POLICIES' as well.

& finally, the Parallex effect,
Are you trying to add Parallex effect? if yes then you will have to work more to make it pleasant for UX. As of now its hurting eyes.

Answer 4

I'm worried about information scent issues causing usability problems

For a landing page that uses full width and full height, there is a risk that the users will not understand that there is more and miss on the important message the page conveys below the fold. Information scent is just one way to deal with the issue, there are two common techniques to tackle it:

1. Next screen signifier: provide a button with a down angle shape. Here is an example of a landing page with big pictures using this technique.
2. Design cut: make sure that some following elements appear and are cut by the fold. Personally when I come across this technique I find it a bit irratating, but it does work, you want to scroll and see the whole thing like in this example.

As for parallalax, you might hear that it gives a modern tone to your website - it is a new trend, why not? Yet, I believe that it is not worth putting the efforts.

If you think that spending time at the beginning of projects for discovery is too frou-frou for your fast-paced projects, be warned: the alternative is bleak. Chasing the next shiny technology or visual-design trend while neglecting the needs of customers could lead you back to the days of superfluous outputs such as Flash intros and parallax scrolling.

From: https://www.nngroup.com/articles/outcomes-vs-features/

Answer 5

In my opinion the full width image is cool, and it is ok. You should focus the user attention on your CTA (try to redesign it and use more explicative label for it). In this mockup I put the CTA clearly visible in the center of the image and tried (not so hard, I confess) to write something that helps the users understanding what's the meaning of the CTA.

^{download bmml source – Wireframes created with Balsamiq Mockups}