34

There are recently many websites using full screen scrolling pages since Apple launched their own with the iPhone 5C. (website not available anymore, but a reproduction can be found here)

Some other examples are:

Is there any study about this practice from the UX point of view? More than about the scroll highjacking, about the use of full screen content?

It seems to me that it's an easy way to present information to the user when used properly and in a simple way, just like a good Power Point presentation. A way to show the user the most important things in a beautiful and smart way.

I see many developers complaining nowadays about this kind of sites, mainly because of the scrolling highjack, but it seems to me users in general, as well as clients, like them.

Any thoughts about this?

  • 2
    "Any thoughts about this?" = alas, that's not a great question for this format. That said, note that most (if not all) of those examples are essentially ads. And ads can get away with being annoying if they draw the right kind of attention. – DA01 Oct 14 '14 at 3:58
  • 1
    PayPal also makes use of this feature, but they do it primarily for specific interaction such as adding/removing credit cards and bank accounts. I can see it working in those cases, or if you are trying to showcase something like the Mac Pro example that @andrewb pointed out. But as a general design concept (especially when you don't add a top-level navigation), it feels to the user like you put training wheels on a bicycle that they've been riding for years. – hargobind Oct 14 '14 at 7:04
  • 4
    rant on I can't help it, but I despise those pages rant off – the_critic Oct 14 '14 at 12:02
  • 10
    My unscientific experience: trying these examples, I get a strong feeling of frustration. – Davidmh Oct 14 '14 at 12:52
  • 1
    It has been a while since I closed websites regularly after a few seconds because of their UX (Flash sites). It seems unusable websites are slowly becoming hip again ... Seriously, I think that all those sites, the Mac one the worst, are usable as dog poo. edit: No wait, dog poo is useful compared to those. Let's agree on cat poo. ... Argh – phresnel Oct 16 '14 at 12:46
52

The visual appeal of those sites is undeniable. However, they have serious problems in terms of usability:

  • All control is taken away from the user. All of these sites force everyone to view a multi-page glossy ad, whether they want to or not. What if I just want to buy your product? What if I want to quickly get your contact information? Forget about it. This will be very annoying to everyone who isn't wowed into submission by your design.

  • Extremely low information density. A good site would offer all key information at a glance, or at least within one click. These sites spread out one page worth of information over many pages. Do I really need a whole screen to tell me a 10 word sentence?

  • Where Am I? There is usually no way to navigate to what you want, and even no way to see where you are in relation to other content. As long as the user is travelling through your site in a straight line, it works alright. But anything non-linear becomes a real mess. On the New JUMO Concept example above, when you click on to one of the specific lamps, then click on the lamp itself, it is unclear where you ended up in relation to the structure of the site. You just have to scroll around until you get your bearings.

  • Unfamiliar navigation paradigm. Several of these sites offer an instruction to scroll on the first page. If a user presented with your site can't understand the most basic navigation without instructions, isn't this a sign of utter UX failure?

  • No fallback if the site doesn't fit on a screen. You have to be 100% sure your design will work on any size screen, because if it doesn't, the user has absolutely no way to scroll and see the content. Several of these sites break if you make the window smallish.

I, personally, would stay away from this design. It is lame in terms of usability. It does look cool if done well, but a big part of that is the novelty -- which is going to wear off fast.

Update: there is some pushback from some people on this answer. These pages can look impressive (as I mentioned), and they might be ok in certain cases. But I think there is a danger for designers of overestimating the importance of a beautiful design and underestimating the importance of a functional web page.

Also, "you can have navigation with this design" seems to be one of the main objections. This does help a little--but none of the examples given have navigation that is anywhere near as good as a normal website. Little dots on the right hand side barely count as navigation. The top menu design is better, but still far from ideal. On the MediaFire site, you can click on unintuitive things like "Trusted" to see a fairly content-less page. You have to click on "More" and then go to the bottom of the page for any real information about the company, support, etc. On the carpet site, it isn't clear where you are, and it gets confusing if you do anything non-linear. Maybe it is possible to do the navigation better, but I'd at least like to see one example where it is done well.

  • I updated my question with one more link at the bottom. Your 1st and 3rd points doesn't make much sense when there's a navigation menu or a bullets navigation. Info is accessible through links in the same way and even faster than in other sites. – Steve Oct 13 '14 at 13:29
  • 1
    The last point you mention makes reference to responsive design, which can be a problem in any other site. That's not a specific problem of this kind of sites and can be solved in any case. – Steve Oct 13 '14 at 13:32
  • 2
    I don't think that this is a short-lived novelty; full screen, more immersive media experiences has a substantial place in UX. As it somewhat overrides the user's control (can't freely scroll as you want), it results in an immersive tour-like experience. I'd think this is a powerful tool for introducing a new product/concept, though you'd probably want a more efficient alternate experience for return visitors (as Apple has done in the specs page for the Mac Pro apple.com/mac-pro/specs). – andrewb Oct 14 '14 at 2:51
  • 10
    Just going to say as a technical user... web pages that try to be pretty and force you through the entire 'experience' just make me look for a competitor to buy from or sell their product. You can look for an analogy in video games where too much of the action is of the 'on-rails' variety and the hate that generates from the user community. – cpt_fink Oct 14 '14 at 5:27
  • 1
    'Some' is the important point... and xkcd.com/1309 – cpt_fink Oct 15 '14 at 5:44
16

This design loses all novelty the instant you realize it's a slideshow.

However, as a slideshow, it wins in these areas:

  • having a single direction to swipe/scroll makes it easier to figure out "where do I go from here" than something like Prezi (where the "next" direction can be anywhere, even into/out of the page)
  • a smooth transition from one page to the next makes it easier for those viewing (but not controlling the scroll) to see which direction things are going
  • obnoxious animations and noises, which are so easy to abuse in PowerPoint, are marginally harder to construct in jQuery or JavaScript, resulting in a higher average quality of presentation
  • visual progress indicators (e.g. dots along the side in the Mac Pro ad) can help readability, and for whatever reason are usually absent from slideshows.

But, as a slideshow, it loses in these areas:

  • unfamiliar control paradigm
  • you arrive at a page perhaps not expecting a slideshow, and leave without experiencing it simply because you didn't scroll
  • sticking a "scroll to view more" message on your front page is amateurish, and is completely due to the above two points
  • 1
    "This design loses all novelty the instant you realize it's a slideshow." I don't even have to read the rest. That's exactly the problem with it. It's an advertisement; a presentation. It's not a website. +1 – fredsbend Oct 15 '14 at 18:50
6

dan1111 has pointed out potential issues with this design, but I think that it's quite a robust idea if executed correctly.

Case example is the Mac Pro introductory website. This garnered a lot of attention when it came out, providing a good way to introduce users to the new product.

Things they did well:

1. It looks great

Black backing, appropriate font style and colour choices, good graphics, etc.

2. It has a navigation

Dots on the side, hovering shows the title of that page. This gives a user quick control to go where they want. Slightly slower than having text always visible, but more elegant. Your position in the navigation can also be seen by the filled in dot.

3. Views have rich content

Central on one graphic, provide quite detailed specifications, and certain pieces are highlighted with graphics on the side. Each page has a lot to read, so time spent animating is proportionally low. Only I/O views at the end get close to the "ok get on with the show" point.

4. "Responsive" design

Looks fine on my HD screen, my MacBook Pro screen and on my tiny iPhone 4S screen. Doesn't look good if I do anything weird - Chrome user agent faking, very thin window on desktop, etc. I'm not sure how they're doing it, apparently user agent sniffing, but it works - page doesn't look broken to average users.

5. Alternative page

The specs page effectively gives an alternative for users. Likely for those with old browsers, or people who have already seen it and want just a portion of the info.

This satisfies most the complaints except for the "unfamiliar" one. I don't think unfamiliar is an issue, as technology and society inevitably progresses to unfamiliar places. Just need to educate users, e.g. "scroll down or press arrows to continue".

I think this design is a decent experience for users, it just needs to be used only where it's suitable, and it of course needs to be executed well, as described above.

  • 4
    "Dots on the side, hovering shows the title of that page" = typically referred to as 'mystery meat' navigation and not usually ideal. Though Apple can get away with it for marketing sites. :) – DA01 Oct 14 '14 at 3:56
  • @DA01 I'm not sure that be consider a mystery meat navigation anymore. Any kid will be able to understand it nowadays since the sliders became popular in websites time ago. – Steve Oct 14 '14 at 10:44
  • 3
    It's not called mystery meat because people don't understand it, but because you have to mouse over each item to so what it is ... you can't tell which button you need to click without examining them all... – aslum Oct 14 '14 at 14:33
  • 3
    To be fair, that's not even truly navigation. It's really just a pagination tick...ala your iPhone screen. Is it useful? eh...it shows you how much scrolling you have to do. But it doesn't actually help you navigate. Which, again, isn't all bad as these one-page sites are really linear ads. Ads aren't the best UX, of course, but I suppose they have their places. – DA01 Oct 14 '14 at 15:35
  • Oh - I'm not able to scroll past the second bullet point in Chrome 38 on Windows 7 (it only jumps back to the start). Guess I won't buy a new Mac Pro. – stuXnet Oct 16 '14 at 11:24
2

These single page apps were in trend which led the way to a few frameworks with which the similar view can be achieved in a better way.

The point is the user has to use a loads of scroll either to go to top (unless the link to top is provided) or to scroll to the bottom and they might be clueless about the category they are going through except to say 'about the product/page'.

To overcome this, we can provide a navigation either on the left or at the top which will help the user to navigate in the page but across the categories of the content displayed like this

  • Yeah, I understand the problem of not using a navigation menu. But in case of using it, in terms of UX, what about full screen technique for websites? Any articles or studies about it? – Steve Oct 13 '14 at 14:20
2

I wanted to post this as a comment on andrewb's answer, but I ran out of room.

andrewb gave a number of good points about these websites.

The problem is that ALL of these good points can be applied to a non-full-screen scrolling page WITHOUT the downsides dan1111 pointed out, and often even better.

A scrolling page allows you fine control over what a user sees and when he sees it, in effect being similar to a presentation or a video. This means that it's great when your website has a flow you want the user to follow. A scrolling page should be used when you want control over what the user sees when, like on a product announcement (like Ubisoft did for Assassin's Creed: Unity at http://assassinscreed.ubi.com/en-us/games/assassins-creed-unity.aspx (click on the "more info" buttons for the full-screen pages), or Apple for the iPhone 5C).

Thing is, you don't want this page to be the only way the user can access this information, even if he can get it through 3rd parties. The user might not be on a device that supports the features you want to show. Or he is looking for one specific factoid about your product and isn't interested in all the 643 other factoids that precede it in your oh-so-beautiful but oh-so-slow presentation. Or he doesn't have the time to scroll through your entire ceremony. You should give those users the option to browse your website without all that extra embellishment.

  • 1 - It seems those fullscreen sites are supported in all devices (mobile, tablets, desktop and old browsers). 2 - As I said before, there are menus to link specific sections so you don't have to follow the established order, just as when using anchors in a site. – Steve Oct 14 '14 at 10:39
  • I believe non-standard browsers like those found on handheld gaming devices like the 3DS or the PSP and older smartphones have more trouble supporting such things. – Nzall Oct 14 '14 at 10:53
0

The Apple demo just shows me three and a half phones, nothing else. I cannot even scroll the page.

enter image description here

Now you might call me a special case because I use a portrait monitor and use Vimperator instead of a mouse. But I know of quite a few users who use screen readers and other non-conventional input and output devices.

If you can assume that 100% of you users use a conventional screen, oriented landscape, and use the mouse, then you can use such a trick page. Otherwise, don't. Enough people won't be able to use your webpage.

  • 1
    That's just a reproduction... it is not perfect as its said in the last section... Take a look at the other real sites I posted, such as the one used by mediaFire. – Steve Oct 14 '14 at 16:29
  • The mediafire one is a bit better for scrolling, but still not perfect. There is some overlap of 'frames' when scrolling. And as another poster mentioned, the information density is so low as to be maddening! – dotancohen Oct 14 '14 at 20:57
  • 1
    You don't have to ensure that the user is using a conventional landscape screen, you just have to ensure that you support the vast majority (99%+) of viewer's screens, whatever they may be. – andrewb Oct 14 '14 at 21:35
  • I have problems viewing the content on the demo too: i.stack.imgur.com/oaQ8K.png – fredsbend Oct 15 '14 at 18:55
  • @fredsbend because as you can read in that same page. It is JUST A DEMO... :D – Steve Nov 6 '14 at 23:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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