Recently more and more web sites are using the home/landing page as a long scrolling page that in many cases describes all their product features and the navigation only has a few extra items like “Contact Us” or “Support” or “Log In”… But the features, what their products do and how to get it is all contained in that single home page.
I can see many advantages to have a long and complete home/landing page on your web site:
- A lot of devices (including laptops) are touch-enabled and scrolling is easier and has become somehow more natural than selecting a menu.
- There is only one page to maintain to describe what it is the company is offering. It simplifies the design, the maintenance, the updates…
- And surely it simplifies the navigation for your users. They only have a few places to go. Either they want to know about your product, it’s all on that page or they probably want to contact you and there is a link to a contact form.
As we will see, it can be pretty neat, IF the user realizes he or she needs to scroll. So let’s study how 3 different companies have decided to implement that “feature”.
To compare these 3 web sites I used Safari on a Macbook Air (that is, using the mouse to scroll) as the Desktop device and an iPhone as the Touch device to look at how they present their home page.
PayPal (www.paypal.com)
- Desktop: PayPal opens their feature video maximizing the size of the video with your Safari window. It also resizes the video as you resize safari. It still displays a top navigation if you need to access specific product/service information. So how do we know there is more content on that page than the video? They have judiciously added a “down arrow” in a footer under the video. That tells us “hey there is more content, please scroll”. If you click on that arrow it takes you down on the page and they did something pretty smart that actually made me react whether I actually clicked on the arrow or scroll down. They added images where some content is not completely showing at the bottom, which made me wanting to scroll down more! Unconsciously! I thought that was a neat idea.
- Touch: They have a pretty standard way of showing their home page on an iPhone. The navigation is iconified and scrolling to get past the feature image was pretty natural for me.
Automatic (www.automatic.com)
Desktop: They decided to go with one single home/landing/presentation page. No navigation besides “what’s automatic?” which gets you to a specific point on that page wherever you are. To access the rest, you just scroll down (or back up). But they do not give the user a hint to scroll down. Not a big deal, you will get to scroll eventually. But personally, not my preference.- Touch: On a touch device the single page feels very natural, you just keep scrolling. There is some navigation in the middle of the scrolling that will get you further down directly but no way to go back to the navigation. I ended up scrolling up and down to read about their product.
Zoosk (www.zoosk.com)
Desktop: Here it gets really neat (in my own opinion). First this is a real vertical slider, which means it slides (down) automatically over time. Then, they give you a hint because they have put a vertical slide control on the side (< …. >). But I realized I was scrolling down before I registered the hint. I believe this is because they cut the bottom image of each slide, just so you scroll to see the missing bottom. Very nifty. The image cut happens independently of your browser’s window side. A little bit like the PayPal example but I think they went one step further with making it a real slider.- Touch: Interesting enough (as of this writing) you cannot get any information about their product/service from the iPhone version of the web site. You can only sign in/up or download the free app from the single iPhone web page.