One Device Window, Many Messages
Using the split screen design technique not only shows that you as a designer are on the cutting edge of the latest trends, but that you are also thinking about the message and the optimal approach to make an impact on the consumer. In my experience, that is a designer you want to keep around. Before getting into too much detail on the topic of split screens and showcasing examples of the technique in practice, let's get some of the basics out of the way first.
What is a split screen?
A design pattern that displays two vertical panels that are directly adjacent to one another (on the desktop). On mobile devices, split screen designers that are responsive will stack one on top of the other in a vertical fashion.
Why use a split screen?
It represents a minimal range of choices for both the designer and their user and that's a good thing. It enables the designer to emphasize the availability of two different paths/options with significant visual weight but minimal clutter for the visitor. In short, it can make a big impact.
There are many examples of the vertical split screen approach visible and accessible on the Web today. A few examples we've come across recently are included below (and we'll be adding more so log in now to submit/discuss an example), along with some guidance on what to consider and avoid, and some best practices for implementation.
Vertical Variance Splits
Split screens can do more than just help designers differentiate between two items; what if there are three or four or even five possible paths or options that can be taken by the user? Think outside your design box for a minute. While it could add some unwanted clutter and potentially overwhelm the user, it would ultimately come down to execution. Bose, for example, went for a five panel split screen and while it's quite aesthetically pleasing upon first impression, the interactions and transitions are a little clunky and it is not mobile friendly (a wasted opportunity).
Information Visibility
Split screens provide an excellent opportunity to show both a visual (image) and associate it with text (words). It's an exceptional opportunity to impress upon users the importance of information (the "take-away" or the "call-to-action"). Another way to improve information visibility in split screens is through the use of color and the use of contrast, as well as the choice of typography. The split screen technique is quite minimal by nature, so pay particular attention to the visibility of interactive elements. Many sites that use the design format do not execute this very well however. This psychologist's website, while visually striking, could be a real challenge to interact with for some users.
Creative Expression
Keep in mind when designing for a split screen experience that it's a perfect opportunity to fully exercise your creativity, so think outside the box on how you as a designer can create a memorable experience. That might be through the use of a striking image, for example, or a novel call-to-action element. Creativity is working without limitations and being a little more daring in the actions that are taken. The benefits of doing so are immense, and while you may fail, you'll create experiences that make an impression and likely enjoy yourself more along the way.
