.
For sure you have noticed that all applications use the interface principle, which is based on vertical scrolling. We can bet the first three apps you open everyday use this principle.
So, we asked ourselves how the principle of horizontal scrolling would work. As a result, we did some basic UI/UX research and came up with some pretty neat solutions. Of course, this system is not as perfect as the vertical one, but this is just the beginning. And this is the essence of fundamental research. Now, keep on reading about not boring mobile ui and ux design services and cool solutions!
Horizontal scrolling how we know it
How could a horizontal scrolling system be used for applications? Let’s try to do something new and go deeper into our design principles. First of all, we have to find the difference between the two systems. However, Yet, if you just search for good mobile UI/UX design services, contact the Weelorum specialists. They are always ready to help you bring your ideas to life.
Here is a primitive comparison of the two systems:
- In a vertical system, pages are arranged on top of each other, and the user scrolls down the page to see more content.
- Menus are located at the top and bottom.
- This system is so widespread because, from the very beginning of mobile applications, the vertical system has been the standard. Most design software for design and prototyping is based on vertical artboards.
- On both systems, you have roughly the same space to work with.
So, just based on that, one might think that they are the same. Yet, the greatest difference is in the menus and the user manual.
How much space does the menu take up?
The first and biggest problem that is usually encountered is the menu. Many people think that they eat up a huge space. In other words, there is an opinion that vertical scrolling does not use space very smartly.
For example, there is a navigation bar at the top and a classic tap bar at the bottom. Sometimes these menus disappear when the user starts scrolling, but this is not the most elegant way and is rarely used.
So we had to deal with that first problem. We found a solution by giving the user only a simple indication, i.e. more pages to open and a hamburger menu.
This solution uses less space but doesn't provide any information about what you can do with these menus. To fix this problem, the menu will change after users start scrolling up or down the page, and a navigation menu with captions will appear.
So, the horizontal menu can display much more information such as app information, notifications, or icons. On the right side of this menu, type is possible to place the off-canvas menu. It can be accessed by clicking the icon in the lower left corner. It may contain functions such as search, contacts, or just an additional menu.
Basic layout
After doing all the research and completing the sketches, it was time for the basic layout. This example consists of four pages (one of them is a settings page) and an off-canvas menu. It is based on a simple grid system. The off-canvas menu has room for a search box and six other elements such as sharing a post, editing, or quick access to various features.
Base layout animation
After building the mentioned basic system, we wanted to put it into practice. So below is an app concept that we made to dive deeper into the topic and address some of the issues I think there are. Problems such as reading, viewing, or presenting full-screen content.
As you see, horizontal scrolling is more than welcome in mobile design, as it can guarantee:
●space saving;
●new design and animation approaches;
●user-friendliness.
And, of course, horizontal scrolling in mobile app design can help you stand out from your competitors. Just try it!
An example of horizontal scrolling in mobile app design
Let’s think of the concept of an online journal with horizontal scrolling! Well, it can be divided into sections that the user scrolls through on the main page. We also tried it with device preview and we think it feels very natural.
The content is always in focus and it is presented in a very dynamic way. As the user scrolls through the feed, almost all menus disappear, further enhancing the user experience. Yet, if you are here to find reliable mobile UI/UX design services, contact the Weelorum team.
As for the content positioning in such a journal due to the horizontal scrolling, the full-screen images look amazing. And it's a bit like the stories format on Medium. Anchors that stop scrolling at the beginning of each section will help you navigate through a long feed.
In general, we can say that this kind of feed scrolling is very attractive and is a good example of horizontal scrolling.
More than this, the advantage of this format is that you can easily divide the text into paragraphs. The solution could be a mixture of a horizontal page system and vertical scrolling of articles.
Summing it up
We do hope that we have shown you a new way of looking at mobile app design and inspired you to do some basic UI/UX research of your own. During the creation of this horizontal scrolling system, we also learned a lot about design fundamentals.
Now, we are glad about the result, but we think much more research should be done in this area. Especially a live prototype can help to understand whether this concept will be accepted by the user.
Furthermore, Snapchat's rise in popularity shows me that new approaches to UI are worth it, and users are eager to explore new ways to build apps. This concept reflects my opinion on the design and I would love to read and discuss your feedback in the comments. Thank you for your attention and time!
