The next time you stumble upon a well-designed landing page, watch yourself digest it. You’ll often find that your attention is drawn to one (generally central) pattern or text box first, which you’ll scan and absorb in its entirety before proceeding to more peripheral elements. The experience of viewing a website, then, should be considered in 4 dimensions, not just 3. Even on websites constituted entirely of static images, the hierarchy of patterns on the page dictates where the eye is drawn and when. For this reason, web designers should look to video editing as a learning opportunity or, at the very least, a source of inspiration on how to maintain a visitor’s attention over time.
Into the 4th dimension
I say YouTube video editing in the title for a simple reason — long-form films tell stories differently, with slower rhythms that allow for deeper penetration into a given scene. Well-edited YouTube videos, such as the work of the All Gas No Breaks channel, are remarkably lean creations, cutting from one scene to the next with the speed and precision of a chef’s knife-hand. A good editor, like a good web designer, does the viewer’s work for them. Data is arranged in a careful order, with each scene transitioning fluidly (or, on occasion, jarringly — but only as counterbalance) to form a satisfying viewing experience. Often, after a barrage of sharp cuts, the editor will place in a more languid shot, perhaps with distance between camera and subject, or with music sitting in the background, as breathing room for the viewer. Having been bombarded with data, the audience can then scan the scene more freely without being confined to the rhythm of absorption dictated by the video.
Web design follows similar principles. The central image or phrase constitutes an initial, dynamic barrage, highlighted with larger font, in the case of text, or large, isolated space, in the case of images. The background features, often menus or informative text, provide respite from the noise of the more striking features. Websites that deter the viewer are those that present no hierarchy of importance, such as text-laden sites where the copy is all more or less of the same size. Where does the viewer begin? Where is the entry point? Viewers want a clear pathway to navigate, with each focal point like one scene that leads to the next.
The practice of sequencing
For any individual web page, particularly the landing page, a designer can list features in descending order of importance. A visual pathway can then be constructed between each feature, using image/text size, spacing on the page and colour as a means of differentiation. The web designer can actually orchestrate where the viewer’s eyes move, forming a web-like pattern across the page. First, a central image, then off to the right, down and finally left, for example. Experimenting with this sequence could lead to some unique visual layouts.
Multi-layered pathways such as these can be more satisfying to a visitor than an approach that uses, say, one or two levels of focal importance. There are some great minimalist websites with exactly two steps in their visitor ‘pathway’ — often a single central image set against a background menu. In these cases, the central image is often so original and engaging that placing it in isolation draws out more value. Generally speaking, however, commercial websites do not benefit from such a sparsity of content.
A tool for CRO
CRO, or conversation rate optimisation, is the practice of structuring websites to boost conversion — by directing visitors towards a desired outcome. More and more, web designers are viewing their creations as conversion machines, primarily, rather than aesthetic designs, employing the psychology of pattern-recognition as a means of attaining tangible outcomes. The free trial that one business owner is promoting may take centre stage, followed by its supporting actor, the ‘about us’ section, for example. Smooth transitions between these various features will encourage the visitor to move forward in their navigation experience, while unclear sequencing (such as focal points 2 being bunched too close together, followed by a sharp jump to number 3).
Websites, like videos, cannot rely on smooth layouts alone. The content must also speak for itself. No matter how satisfying the user’s visual journey, if the text repeats stock phrases like ‘Delivering change through action’, the visitor will not be enticed. But, combining a multi-layered, sequenced approach with CRO will inform users immediately of what exactly the website is offering. Ross Pike of web design agency Koreti Ltd comments, ‘In the age of data saturation, web designers must impose no burdens upon visitors. Getting to the point quickly and with visual finesse is the best way to convert traffic and leave a positive impression on consumers.’ The windows of time that visitors will offer have never been narrower, so for both web designers and video editors, the job is to carve sleek transitions that viewers will enjoy navigating — doing so could make the difference between an early exit and a successful, happy customer.
