Modern day splash pages

The "illusion of completeness" when an image or video occupies your first page visit

We continue our exploration of the "Top 10 web design mistakes" from NN/g. We don't come across this type of mistaken very often any more. With a bit of time though we uncovered two examples:

Transcript of "Only huge media above the fold"

( Jakob Nielsen is presenting face-on to a live and recorded Zoom call, holding a paper sign with the words "#9 - Only huge hero image above the fold" printed. )

NARRATOR:

Number nine on the list is "only a huge hero image above the fold". I'd extend that to any kind of rich media.

( A website is screencast with the whole browser window occupied by a video montage of a cityscape. The only other content on the current webpage are the words "Enter". )

So in this case, we've got a splash screen style where we've got a video montage instead of an image. But there's two things going on here. One is you have no idea what this website's about. You know that it's something looking at a city landscape, and you have to click "enter" to understand what that site's about.

So there's two things here. One, there's no context of what the site is about. And number two is you have to do an extra click to find out that information. When there's another example, let's have a look at this one.

( A website is loaded with a full-screen image of the exterior of Château Lafon-Rochet. Its name is written as a logo at the top of the page. )

Again, a full screen image. We at least have an indication of who the organisation is, but almost by admission, you can see it through this UI element on the right-hand side here, is it gives a sense that we know you have to scroll, but we're giving you a clue because otherwise there's no content to suggest that there's more content available. So in this site, you can scroll, and start going through the information, but that's not immediately evident, and hence the arrow.

( When the narrator says "you can see it through this UI element…", they indicate with the mouse cursor a right-hand arrow enclosed in a circle. )

Also, notice one difficult thing sometimes with full-screen imagery. I'm not sure if you've picked up on it, but on the top left-hand side, there is actually a hamburger menu. And that's been really lost in that imagery. And so you can only find it if you've either scrolled or you've got a keen eye.

( When the narrator says "keen eye…", they are suggesting people with accessible vision will unlikely notice the menu given the poor colour contrast between the menu and the full-screen background image. )

And that's what Jacob's talking about when we have a usability concern with full screen or full rich media above the fold.