A Magazine Concept using the Horizontal Scroll Interface

Prelude

It always bothered me, that all apps use an interface principle which relies on vertical scrolling. I bet the first three apps you open everyday are based on this. So I asked myself the question how a principle with horizontal scrolling would work. I did some basic UI/UX research and came up with some pretty neat solutions. Of course, this system isn’t as perfected as the vertical system, but it’s a starting point. And that’s the point of basic research.

Basic UI/UX research is in my opinion a extremely precious thing we can do as a design community. And sadly it’s only done rarely, so I have to encourage you to do it yourself. Just pic a topic your interested in and think could need some change. Or maybe you come up with a better solution to my problem.

Here are some examples where research has to be done:

shadows; the hamburger menu; what comes after flat?; online advertisements; car interfaces; type; feeds; interfaces for kids; what’s the simplest form of ui; audio interfaces; app drawer; AR/VR interfaces; gradients; redesigning the desktop; in stream; commenting; grid/off grid; feeds; on boarding; UI and algorithms; and much more!

But now let’s get started with horizontal scrolling.

The Horizontal Scroll

Asking the right question

My question: How could a horizontal scrolling system for apps work?

I wanted to do something new and dig deep into our design principles, that’s why I choose this question. First, I had to find the difference between the two systems. So I made a few sketches to illustrate.

A basic comparison between the two systems

In the vertical system, the pages are ordered besides each other and the user scrolls down to see more content. The menus are at the top and bottom. I think this system is so wildly spread, because from the beginning of mobile apps, the vertical system was the standard. Most design-and prototyping-software is based on vertical artboards.

In both systems you have about the same amount of space to work with. So just looking at this, someone could think that they are the same. But the devil lays in the detail and these details are the menus and the user guidance.

Answering the question

How much space the menus occupy

The first and biggest problem I run into are therefore the menus. I always thought that they eat up a huge amount of space and as you can see on the left, the vertical system doesn’t use the space very intelligent. At the top there’s a navigation bar and at the bottom the classic tap bar. Sometimes these menus vanish when the user starts scrolling, but that isn’t the most elegant way and it’s used very sparely. So I had to tackle this first.

I solved this problem by giving the user only a simple indication, that there are more pages to discover and a hamburger menu. This solution uses way less space, but doesn’t provide any information on what you can do with these menus. To get rid of this problem, the menu will change once the users starts swiping up or down and a navigation menu with labels will appear.

The two types of menus in my horizontal concept

On the left you see the open navigation menu. It will vanish as soon as the user has made the switch between two screens. This menu could display much more information, like app informations, notifications or icons. On the right is the off-canvas menu, which can be accessed by an icon in the bottom left corner. It can house features like search, contacts or just as an additional menu.

The basic layout

After doing all the research and sketching it was time for a basic layout. This example consist out of four pages (one of them are the settings) and an off-canvas menu. It’s based on a simple grid-system. The off-canvas menu has place for a search box and six other elements like: sharing, editing or quick access to different functions. The video below shows the elements in action. Sorry for the clumsy animation, but I had to do it with After Effects, since no prototyping software support such a system.

The basic layout animated

After doing this base system I wanted to apply it to a use case. So below is an app concept I made to dive deeper in to the topic and takle some more problems I think exist. Problems like: reading, browsing or the presentation of fullscreen content.

Example

Magazine

This is an example of a curated magazine. It’s divided into different section, which the user scrolls through in the main page. I tried it with device preview and think, that it feels very natural. The content is alway in focus and is presented in a very dynamic way. When the user is scrolling through the feed almost all menus vanish, what enhances the user experience further.

The main feed of the magazine

Especially fullscreen pictures look amazing and it feels a bit like Medium’s stories. Anchors, which stop the scrolling at the beginning of each section would help navigating a long feed. All in all, I can say, that scrolling through feed like this is very appealing and a good example of horizontal scrolling.

A reading page

Reading, on the other hand, is very difficult in a horizontal interface and it doesn’t feel very organic. The good thing about it is, that it’s easy to separate a text into paragraphs what forces the user to read in the meant way. A solution would be a mixture of a horizontal page system and vertical scrolling through articles.

Magazine in action

Ending

I hope I showed you a new way of thinking about mobile app design and inspired you to make your own UI/UX basic research. During the making of this Horizontal Scrolling System I learned a lot about the fundamentals off design. I’m satisfied with the outcome, but I think that there has to be done a lot more research in this area. Especially a live prototype would help to understand if this concept would be accepted by the user. The rise of Snapchat shows to me that new approaches to UI are worth taking and that the users are keen to explore new ways of app-design.

This concept represents my opinion on design and I would love to read and discuss your feedback in the comments.

Thanks for reading!

Fabian Frey
Studying at Zurich University of the Arts, the epicentre of flat-design.