{"id":15156,"date":"2018-06-06T10:38:20","date_gmt":"2018-06-06T09:38:20","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15156"},"modified":"2020-12-13T22:29:13","modified_gmt":"2020-12-13T22:29:13","slug":"bidirectional-scrolling-save-responsive-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/bidirectional-scrolling-save-responsive-design\/","title":{"rendered":"Bidirectional Scrolling is Here to Save Responsive Design"},"content":{"rendered":"

Bidirectional scrolling allows a user to scroll both vertically and horizontally when using an interface.<\/p>\n

The Question<\/h2>\n

It\u2019s 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.<\/p>\n

\u201cWhat are you going to do about the scrolling problem?\u201d<\/strong><\/p>\n

This question got us by surprise.<\/p>\n

\u201cThe \u2018scrolling problem\u2019?\u201d \u2014 We asked<\/strong><\/p>\n

After some discussion the \u2018scrolling problem\u2019 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.<\/p>\n

\"\"<\/a>

You need to scroll further on mobile than on desktop to reach the same spot on a\u00a0page<\/p><\/div>\n

\u201cOur mobile site is just getting way to long\u201d<\/strong><\/p>\n

So \u2014 Do we need to \u2018fix\u2019 scrolling?<\/p>\n

Scrolling doesn\u2019t need to be\u00a0fixed<\/h2>\n

Seeing scrolling as a problem goes hand in hand with the much discussed \u2018above the fold\u2019 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\u2019m 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 \u2018above the fold\u2019 argument invalid.<\/p>\n

The \u201cabove the fold\u201d myth<\/span>There is no fold. Period. There, I said it.
\n<\/span><\/span><\/a><\/section>\n

http:\/\/blog.chartbeat.com\/2013\/08\/12\/scroll-behavior-across-the-web\/<\/a><\/p>\n

In my opinion this user behaviour comes down to two reasons:<\/p>\n

Users are impatient<\/strong>. They don\u2019t wait until a page is fully loaded to scroll and discover the content.<\/p>\n

Users have learned to scroll<\/strong>. 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.<\/p>\n

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 \u2018mood-setter\u2019<\/strong>. It has no specific function attached to it but helps do prepare the user for the content that follows below, where engagement happens.<\/p>\n

\"\"<\/a>

source: https:\/\/wordpress.com\/theme\/twentyseventeen<\/a><\/p><\/div>\n

So, users scroll. A lot. Does this mean there is no scrolling problem?
\nNot exactly.<\/p>\n

Bad responsive design needs to be\u00a0fixed<\/h2>\n

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\u2019s content. As a result the organisation lost potential customers on the way.<\/p>\n

But the real problem isn\u2019t scrolling, it\u2019s lazy UX design: using the same old desktop design patterns and adapting them for mobile.<\/p>\n

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\u2019t work on mobile, many mobile navigations don\u2019t 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 \u2014 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\u2019s all about teasing different areas of your page to generate interest. On mobile it\u2019s more about making a lot of content easy to navigate on a small screen.<\/p>\n

Responsive Design is always about compromises, it\u2019s 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.<\/p>\n

So how can we fix our customers responsive design?<\/p>\n

Bidirectional Scrolling<\/h2>\n

The Objective<\/h2>\n

Our task was to display a huge variety of content from different categories. There were 3 main conditions:<\/p>\n