4

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

5
  • The problems with your images are not their width, it's the height you give them. It's too much.
    – Confused
    Apr 5, 2016 at 8:56
  • What would you suggest as a recommended height? We are trying to enact a visceral emotional reaction from a stunning building image, while also making sure to follow best usability practices. Suggestions much appreciated. Apr 5, 2016 at 19:53
  • Please keep in mind, these are high rise buildings-- so naturally the height is much larger than the width. Any decrease in height would also affect the width of the photo Apr 5, 2016 at 20:06
  • Do you think a size of 1080 x 1600 would help? Apr 5, 2016 at 20:32
  • These are artistic and aesthetics considerations vs browser aspect viewing ratios and the objective of you and your business. There is no "this is the answer" solution. Everything will be a blend of these three main factors, factored by loading times, too.
    – Confused
    Apr 8, 2016 at 11:58

5 Answers 5

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!

0

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!

4
  • Thank you, James. Can you please elaborate on this "They aren't on your site now, and it's actually unsettling because of the huge contrast between the background and photos." I don't really understand what you mean. Thank you! Apr 5, 2016 at 19:50
  • Just FYI- I'm referring to the main building image when you initially land on the page- nothing else Apr 5, 2016 at 20:36
  • I meant the images aren't full-width on the site now. If they were it would be better for visual contrast.
    – Jamezrp
    Apr 6, 2016 at 20:47
  • @Jamezrp "it's totally fine (and preferred) for images to be full-width". Do you have any source or study for this? In our own research, this is only true on small screens. As an example, we have monitors at 3840px resolution, while others are at 2560px and 1920px. If you show me a full width image, I'll probably close the site or at least scroll down until I lose sight of that MASSIVE image. I'm a bit surprised to see this answer TBH, so some additional studies would be greatly appreciated so I can see if we got everything wrong in our research
    – Devin
    Sep 2, 2016 at 20:58
0

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.

3
  • Can you please elaborate on this? Especially this part "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." Apr 5, 2016 at 20:25
  • As of now your Parallex effect doesnt seem to be working smoothly. Its might be because of image is taking little longer to load. On first load, it feels sluggish. After that it works fine.
    – Ketan
    Apr 6, 2016 at 5:23
  • Agreed fully with the image being too large and causing slow loading! If you inspect the image in Firefox you can see it is over 1MB, which is pretty huge.
    – DasBeasto
    Apr 6, 2016 at 12:33
0

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/

0

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.