📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Viewpoint

Bidirectional Scrolling is Here to Save Responsive Design

This article is about a simple question with a surprisingly complex answer.
Bidirectional Scrolling is Here to Save Responsive Design

Bidirectional scrolling allows a user to scroll both vertically and horizontally when using an interface.

The Question

It’s Monday afternoon and the air is starting to feel stuffy in our meeting room. We are standing in front of 20 marketing professionals, all of them representatives of individual countries of an international non profit organisation. We just finished presenting our new UX approach for their global website relaunch.

“What are you going to do about the scrolling problem?”

This question got us by surprise.

“The ‘scrolling problem’?” — We asked

After some discussion the ‘scrolling problem’ our customer was referring to turned out to be the length of their current mobile site. The need to scroll more on mobile than on desktop was seen as a flaw that needed to be fixed.

You need to scroll further on mobile than on desktop to reach the same spot on a page

“Our mobile site is just getting way to long”

So — Do we need to ‘fix’ scrolling?

Scrolling doesn’t need to be fixed

Seeing scrolling as a problem goes hand in hand with the much discussed ‘above the fold’ argument, the urge to place everything important in the initially visible area of a page. There are many interesting articles and UX studies about the topic, I’m going to link just two of them below. In a nutshell most of them prove that user engagement peaks exactly on or right below the fold, making the ‘above the fold’ argument invalid.

The “above the fold” mythThere is no fold. Period. There, I said it.

http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

In my opinion this user behaviour comes down to two reasons:

Users are impatient. They don’t wait until a page is fully loaded to scroll and discover the content.

Users have learned to scroll. In a mobile-first world scrolling has become the number one interaction with digital content. Never-ending newsfeeds have taught this interaction to users over and over again.

As a result, many pages and blogs (unknowingly) embrace this behaviour. Most of them, including the most popular WordPress themes around, feature a prominent media header at the top of the page. We call it ‘mood-setter’. It has no specific function attached to it but helps do prepare the user for the content that follows below, where engagement happens.

source: https://wordpress.com/theme/twentyseventeen

So, users scroll. A lot. Does this mean there is no scrolling problem?
Not exactly.

Bad responsive design needs to be fixed

Our customer has a point: When users want to skip a section (on their current page) that they are not interested in, they have to scroll through all of it’s content. As a result the organisation lost potential customers on the way.

But the real problem isn’t scrolling, it’s lazy UX design: using the same old desktop design patterns and adapting them for mobile.

There are hundreds of possible solutions to this problem, most of them feature a mobile-first approach and the idea of progressive enhancement. But just like many desktop navigation solutions don’t work on mobile, many mobile navigations don’t work great on desktop either. Take tab-bars for example: They are considered to be one of the most effective types of navigation for mobile applications. But still, they are quite uncommon on responsive websites. There is a lot of space available on desktop pages — why not use it to show content from different areas of your service instead of hiding it behind a navigation link? On the desktop it’s all about teasing different areas of your page to generate interest. On mobile it’s more about making a lot of content easy to navigate on a small screen.

Responsive Design is always about compromises, it’s about finding adaptive navigation solutions, that work on all devices and all sizes. But our current desktop and mobile navigation patterns just seem to be incompatible.

So how can we fix our customers responsive design?

Bidirectional Scrolling

The Objective

Our task was to display a huge variety of content from different categories. There were 3 main conditions:

It all comes down to a basic marketing-based user journey:

  1. Attention: Show the user everything you offer
  2. Interest: Generate interest in one specific offer
  3. Desire: Make the user say “I want to know more”
  4. Action: Make the user click

The Solution

Bidirectional scrolling in action

Out of all the ideas we considered, there was one solution that caught our attention. It’s the one we presented in that meeting room when we were asked about the ‘scrolling problem’. There is no standardised naming for the solution we proposed, some people might simply say ‘horizontal scrolling’, others might call it a slider, we called it ‘bidirectional scrolling’.
bidirectional: Moving in two directions (usually opposite) — Wiktionary

A bidirectional scrolling website is — just like the name implies — a page that scrolls in two directions. It’s important to distinct between primary and secondary scroll direction.

The primary direction of scrolling should be vertical in most cases. This means the entire page will move on the vertical axis when a user scrolls.

Many researches have shown that horizontal scrolling hurts the user experience and has lower engagement than vertical scrolling. But this doesn’t mean that you have to abandon horizontal scrolling completely.

The secondary direction of scrolling for a bidirectionally scrolling website is horizontal. This direction is used by individual sections of the page, not the entire page. Each section can be scrolled individually.

Why?

This scrolling system allowed us to tease a lot of content from different sections without creating the need to scroll, without hiding things behind a menu and without visually cluttering the interface by showing too much content. And most importantly: it works on desktop and mobile.

This way it’s easy for users to jump from section to section by scrolling vertically. Yet they still see what to expect inside each section by scrolling through it’s content-teasers horizontally. Teasing relevant content this way without forcing users to first choose a navigation point is important to generate interest. Users are used to seeing a variety of (personalised) content, e.g. when they open a social network. Facebook doesn’t ask you whether you want to see events, news or pictures. It just shows you a little bit of everything and gives you the option to view more content of each type. When designing an interface that is supposed to encourage users to discover your website it’s important to remove hurdles. Skip complex navigations, minimise clicks whenever possible and focus on the content that users might be interested in.

bidirectional scrolling on desktop and mobile

Bidirectional scrolling - How?

There are many great articles on how to integrate horizontal scrolling into interfaces. Here are just two of them:

https://www.nngroup.com/articles/horizontal-scrolling/

Horizontal scrolling in mobileUX of scroll interface uxplanet.org

Examples of bidirectional scrolling

Bidirectional scrolling isn’t a new idea. Interfaces like this have been around for quite some time, almost exclusively for media-libraries like Netflix or Amazon Video.

Netflix

source: Netflix

With apple embracing bidirectional scrolling in their new apps like App Store, Music and Podcasts, more and more app developers started picking up the idea lately.

Apple App Store

source: Apple App Store

The idea now starts to make the jump from native apps to web-interfaces. Also it is no longer limited to media-heavy interfaces. We are starting to see this UX pattern on news-websites, social networks, booking sites and many other digital services.

Do you know a great example of bidirectional navigation patterns?
Let me know!

We need to talk

Feel free to leave me a message: www.fabiansebastian.com

This article was originally published on Fabian's Medium page.

Further reading:

Get started with Marvel Enterprise

Get started with Marvel Enterprise

Some of the worlds most creative companies use Marvel to scale design across their organisation.

Get started with Enterprise

Design Thinker, currently working as Creative Director at adunique in Hamburg. www.fabiansebastian.com

Related Posts

Making good component design decisions in react when it’s hard to see how an existing component can still be reused

Disney’s 12 Principles of Animation is one of the inestimable guides when traditional animations are considered. It was put forth by Ollie Johnston and Frank Thomas in their book – The Illusion of Life. These principles were originally designed for traditional animations like character animations. However, these principles can still be applied in designing interface animations. So, this is just… Read More →

Design is no longer subjective. Data rules our world now. We’re told all design decisions must be validated by user feedback or business success metrics. Analytics are measuring the design effectiveness of every tweak and change we make. If it can’t be proven to work in a prototype, A/B test, or MVP, it’s not worth trying at all. In this… Read More →

Categories