When you consider navigating through websites and apps, your initial thought is likely scrolling downwards.
This is logical–nearly all websites arrange their content in a vertical format. To view more content, move down the page with your mouse, trackpad, or keyboard. Certain websites could make an effort to increase the user experience by using interactive elements that move in from the side or a 3D effect. The position of the scroll usually remains upright.
Does horizontal scrolling function similarly to the successful vertical scrolling? You may have thought about including this less common feature in your website. Do you find the horizontal scrolling mechanism intuitive or helpful? Is it better than a vertical scroll? And how can it enrich your UX?
In this article, I’ll tackle all of the queries that have been posed and demonstrate how to design simple horizontal scrolling utilizing custom HTML and CSS if you think it is suitable for your website.
What is horizontal scrolling?
A way to move through a page which involves scrolling left and right to see the material at both sides of a window/container is known as ‘horizontal scrolling’. Horizontal scrolling can be done by using a horizontal scroll bar, moving your finger or cursor sideways on a trackpad or mouse, pressing the left and right arrow keys, or swiping to the side on a touchscreen.
The scroll wheel causes the page to shift side to side on the screen, instead of up and down. Here’s an example of vertical scrolling on a photographer’s website:
While navigating on the majority of websites typically follows a vertical layout, horizontal navigation is seen less often. It is commonly believed that horizontal scrolling is a useless and old-fashioned user interface technique that has few practical applications.
That could sound a bit abrasive, so let’s elaborate on that point and go over why it’s not likely that you’re scanning left and right too regularly.
Disadvantages of Horizontal Scrolling
Most web designers and web users have an unfavorable view of horizontal scrolling. Even I’m not too keen on it myself for a few reasons:
It violates users’ expectations.
Vertical scrolling is the navigational norm. Besides including some aesthetic details, every internet page is laid out with the content being organized up and down. Consequently, users anticipate to scroll in a vertical direction and not from left to right.
Every now and then, it’s acceptable to ignore design principles to inject a bit of aesthetic charm and interest. Going against this specific rule without a reasonable explanation will leave visitors feeling more confused and irritated instead of interested. Many people will simply presume that your page or page component is not functioning correctly.
What about touchscreens, though? The use of smart mobile technologies has familiarized individuals with navigating the screen through the sideways swiping gesture (most notably implemented in the Tinder app). If not explicitly told otherwise, a person using a mobile website is likely to scroll down instead. It’s usually a good idea to maintain vertical scrolling on both your computer and your smartphone websites.
It has a high interaction cost.
The amount of work a user has to put in to complete a task, like using a page element, is referred to as interaction cost in terms of user experience. The cost of interaction is made up of both the mental effort that needs to be put into a task and the amount of physical effort required to finish the job.
Vertical scrolling has a low interaction cost. It is anticipated, so thinking is not necessary to accomplish it. It is user-friendly to scroll through a page or document using the mouse wheel, trackpad, or arrow keys instead of having to manually scroll up or down.
In comparison, the interaction cost for horizontal scrolling is much higher.
We need to get accustomed to the different way of scrolling and how information will come in from a different place on the display. We are unaccustomed to having to think with increased effort, and this is damaging our experience of watching. People who require the horizontal scroll bar must take the extra effort to locate it.
It takes more physical effort from people to use horizontal scrolling. Desktop users with a regular mouse cannot swipe across to view additional content, something that can be done with a trackpad or on a mobile device. Those users must either utilize the arrow keys or click and pull the scroll bar.
It’s easily missed or ignored.
This difficulty originates from the absence of anticipation – if users are unaware that a horizontal menu is approaching on a website, they won’t seek it out and miss out on possibly important material.
Providing graphic indicators, for example arrows or descriptive words, can help to reduce this issue. But, there’s still a chance users will miss it. If they take note of the signs, they still could be unclear as to what the secret subject material is. In this situation, the majority of people are not willing to interact with content that is not in their field of vision.
It presents challenges for accessibility.
The complexity of just simply scrolling up and down is increased significantly when a second scrolling dimension is included, especially when both are being used concurrently. A page element with both horizontal and vertical scrolling can be confusing and challenging for those with physical impairments to interact with.
For people who have a physical disability, a mental disability, or don’t have much experience with technology, horizontal scrolling can be an annoying hindrance that can be eliminated with better design.
Horizontal Navigation Best Practices
Avoid horizontal scrolling on full webpages.
Vertical scrolling should never be removed from a whole web page and be replaced with horizontal scrolling. Violating this convention will alienate the majority of users.
Enable other interaction methods.
Although horizontal scrolling may be suitable for your page, we suggest providing desktop users with an alternate approach to uncovering obscured content. An arrow button can have the same function
Users of mobile devices should not need to press any buttons when swiping side to side, resulting in fewer problems for them. The main scrolling direction should remain vertical for devices with touchscreens.
Design horizontal scrollbars like vertical scrollbars.
Desktop computers should be equipped with horizontal scroll bars that are contained within the application. Scroll bars oriented horizontally should have an appearance and work in the same manner as vertical ones in order to maintain a consistent design. Keep your scroll bars standard, since they’re meant to help, not be the center of attention.
In certain situations, visible scrollbars are not necessary. If the container has clickable buttons on both sides, users can utilize these instead of dragging a scrollbar. Also, do not display a scroll bar if the contents of a container start back at the beginning when the content stream ends.
Make the horizontal scroll option visually apparent.
Make sure that visitors don’t miss out on your content by showing them it can be scrolled horizontally.
You could design your scrolling containers to display a horizontal scrollbar when the mouse cursor is hovering over them, in addition to indicators such as arrows.
When Horizontal Scrolling is Great For User Experience
According to Damian Rees, there are 4 scenarios where horizontal scrolling creates a good user experience:
- 1. Displaying several images (e.g. for a photography site or a design portfolio)
- 2. Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)
- 3. Displaying discreet sections or slides of information on applications
- 4. Displaying a large catalogue of products or items so that different product categories can be easily shown
Careful Planning
Any experienced web designer is aware that this concept is among the initial topics they learn while studying design. After a period of time, we become sluggish and decide to proceed without planning. It is important to take your time when designing something horizontally, creating a sketch of the view, constructing a model and considering how each element will fit. One has to contemplate numerous things since it is unlike most designer’s and visitors’ typical experiences. Therefore, one needs to make considerably more preparations in comparison to the designing of a vertically presented website.
Horizontal Navigation
This appears to be the primary grievance of people who view horizontal websites. Even though the design of the website may be visually appealing, the navigation can be complicated and make viewers confused, resulting in them leaving the site and finding one that is simpler to use.
Your navigation needs to be obvious and attractive. It should be designed and function in a manner that meets people’s expectations. People don’t want to have to go through the hassle of clicking and dragging a scroll bar side to side. Most of us are now so used to scrolling with our mouse wheel or arrow keys that we forgot that we can click on and drag the scroll bar. It has developed into something people mainly use to tell where they are on the page rather than a feature they use regularly, especially the younger folks that you are aiming to reach through the horizontal design. That said, don’t remove it. It all boils down to the fact that people understand what the purpose is.
Your navigation system should be simple to locate and utilize. It should be self-explanatory so your viewers won’t have to linger on your website for extended amounts of time in an attempt to figure out how to reach somewhere.
Basic Navigation
It is critical to make sure your viewers have access to the details they are searching for, so make sure the navigation system is effective. Ensure that a menu that is plainly visible and simple to utilize is presented, leading them directly to the desired content, namely the homepage. This way, people will be able to explore the exclusive nature of your layout, yet still be able to access the vital details regarding your business and what it provides.
Use Labels
Realize that horizontal layouts are not as understandable to users as the vertical layouts they are used to viewing every day. They should have an easy time comprehending the situation and how to work with it. Use labels. Rather than having to click around to understand how each component works, your visitors would appreciate it if they were informed what it is they are looking at. Even if the design makes sense to you, they may not understand it as easily.
People would prefer that the instructions be completely explicit rather than feel embarrassed or unintelligent when they don’t understand something and can’t make sense of it. As I have said before, if your guests can’t comprehend your website quickly, they will go away.
Don’t Neglect Your Content
When designing in a horizontal format, it may be appealing to let the design do the talking, as this type of layout is frequently used on sites that focus on visuals. It’s perfectly alright to create a website like this, however you should have some goal or objective beyond merely showcasing interesting items (unless, of course, the only purpose of the website is to show off interesting things). Ensure that the business’s details, including products or services, contact data, and ordering information are all still present.
Creating a horizontal layout for your website does not lessen the significance of its contents in comparison to if it had a vertical design. Make sure that your content is shareable if you would like to have repeat visitors.
Coding
This is something that should be obvious, however, I want to make sure to point it out in case it is missed. Coding typically works better in a vertical arrangement because people are already familiar with this type of design and find it comforting and attractive. Consequently, it requires some work to craft a horizontal web page and maybe you aren’t familiar with the process yet.
This effect can be achieved by utilizing various techniques. This tutorial will demonstrate the fundamentals of HTML and CSS required for constructing a fully functioning, awesome horizontal website. That is only one way to do it, though. There are also other ways to create the effect.
One Final Word Of Caution (Yes, Another One!)
Your horizontal design may be eye-catching and encourage visitors to explore your site more than other ones, but they ultimately want to be able to access what they need quickly and leave. Do not attempt to deceive them into staying by making your website unnecessarily confusing and difficult to navigate, as this will only cause them to choose a different website. It is simple for individuals to navigate up and down a page using the scroll wheel on their computer mouse.
Moving one’s mouse to a particular area of the screen and dragging (holding the mouse button) or clicking it is more demanding than other forms of scrolling since it requires horizontal scrolling. Additionally, certain horizontal scrolling mechanisms cause the design to stutter, diminishing the user experience. Take into account that people are familiar with analyzing page material and scrolling downwards. Incorporating horizontal scrolling on pages containing an excess of text would be detrimental to users’ satisfaction.
If you believe that utilizing horizontal scrolling would be advantageous for your customers, then go ahead and make that choice. Remember, your whole focus is your user. Ensure that your horizontal designs are not only attractive but also practical so that your customers can easily meet their goals and will come back for future visits.
