The UI Battle: Page Vs Scroll

(SPOILER!) There may or may not be a winner here…

What Is Better UX, Scrolling or Paging?

A long or infinite scroll is generally considered to be in the trends of modern UI and UX design. Considering the growth of mobility market and the gaining popularity of mobile-first websites and apps, it makes a lot of sense. We, at Shakuro, have been vocal proponents of the scroll, however, we’ve learned that it’s not a one-size-fits-all and we have a project where it shines through quite convincingly.

But first things first.

Actionable UI

In 2014, an unusual client approached us. He had a project that was supposed to converge the two very similar, but very different universes – the vending machine buying experience and the technologically advanced online store benefits.

The earliest mention of automated retail is attributed to Heron of Alexandria, an Ancient Greek mathematician and inventor. In his book “Mechanics and Optics” he introduced a mechanical vending machine that took a coin to dispense a portion of holy water.

Much later, with the emergence of social habits, like tobacco consumption, generally accessible print media, and snack profusion, vending machines became an essential attribute of urban lifestyle. It feels like today there is a vending machine for anything including, for example, cars.

The UI Battle: Page Vs Scroll | Shakuro

Old English self-serving cigarette dispenser.

Actionable UI is what the entire experience of vending machines revolved around at that time. The give-and-take principle is perhaps the most natural way of material interaction between humans even with a mechanical mediation between them. The paradigm remains simple to this day, while technological leaps and bounds take automated retail to the next level by blending analog and digital experience.

So where exactly does digital automated retail stand? The delivery is certainly limited by the physical size of the machine itself, but the buying experience has to be similar to the online store one, right?

Well, it’s not. Buying from a vending machine is a social interaction. It might not feel like one, you are just choosing a soft drink, but add a line of people after you and you’ll end up in a socially awkward situation.

I was in one once at a railway station where I was trying to buy a ticket to the airport from a ticket ATM and it just wouldn’t respond timely and later, wouldn’t accept my bills. Somewhere in the middle of my order confirmation the screen just froze and then scrolled down completely losing me. Totally not my fault, but I was sweating feeling all eyes on me.

That’s where I started thinking. This is a vending machine, it has to as simple as throwing in a coin and having the thing fall down with a rewarding bang to the bottom of the booth, right? But this was a weird experience of me standing in a crowded place and somehow involved in a situation where I’d take time to read the UI, figure out the controls, perhaps wait for a response a little more patiently, like I would behind my laptop at home. But I wasn’t at home and my perception was blurred by all the buzz around. Add to that a foreign country situation. Add to that the catastrophic consequences of a mistake. Add to that a scenario for a physically challenged person.

There is a way though. We can modify the UI, and create a perfect UX combining the best of the two worlds. And the first thing to dump would be the infinite scroll.

When Does Scrolling Suck?

It’s impossible to cover every single scenario and every situation where you have to make a choice between implementing a paginated or a scrollable UI. Let’s stick to this particular case – automated retail.

1. Limited Hardware Resources

Most of the average vending machines are equipped with a medium hardware as it only implies that simple operations with not a lot of complex interactions are supposed to be happening. However, packing the catalog with more and more new products and options is a process far more rapid than hardware upgrade on most of those things. Long scroll is a memory-consuming option as it has to be able to quickly display all the items on top of the other functional processes.

A better resource distribution comes with a paginated layout.

In 2012 Coca-Cola announced its smart vending machines, sporting Intel Core i7 chips, HD cameras, Wi-Fi modules, QR code recognition technology and a  lot of other cool stuff. It’s clear that smart vending machine is a whole new animal and it can leverage all sorts of independent features and augment the experience. But hey, I mean that’s Coca-Cola…

2. Quick Reaction UI Scenarios

As in my railway station example, most of the time, you want to have a smooth and clear interaction, get your product, and go on with your life. The long scroll was invented to keep users engaged in a constant flow of products, information, and whatever the website is conveying. In case of a result-focused process that is buying, the UX has revolved around the satisfaction. Whenever you are scrolling to get to what you really want, you are going extra miles back and forth, rather than spotting the page that interests you.

Portions of information give you greater control outside the comfort zone.

Keeping in mind the multitasking mode that we are used to operating on today, it might not be too much of a challenge, but in no-hassle-policy situations, different cultural environment and simply in an adjusted state, you want the easiest road and the backbone understanding.

3. Conversion Priority   

In automated retail, there is no surfing. A user envisions the result and doesn’t feel like exploring the journey along the way. This means pride of place goes to usability. The usability of a vending machine is the product access. The more streamline the project is, the better the chances are for a customer to be satisfied.

Paginated display focuses a user on the result, with no distraction of looking over the hill.

It all falls down to the objective of the interaction. There is no better way to present a user-generated content, than have an infinite roll of posts, tweets, photos, days, weeks, months, and years. The technology though gives you an option of piercing through all the unnecessary stuff and get to the point.

Why Paginated UI Works for Vending Machines?

Approaching this project with a clean slate was the best we could do. Swyft Terminal was a bold and daring project from the get go. The Swyft machines were designed to sport huge HD displays. This means our designers had some room to play.

At the same time, we checked our web and mobile app design induced desire to create a unique visual experience and went along with the “One Thing Per Page” principle. The idea is simple: one feature per page, one action per page, one single form page. These blocks of complete actions build the grasp of the entire project. The pros are quite obvious and we managed to pull the project off with some good UX examples:

  • Chunks the perception. Smaller portions are easy to digest. You get to see just enough product to quickly find the one you need.

The UI Battle: Page Vs Scroll | Shakuro

  • Better delivers the message. To avoid misunderstanding, a service message has to be clear, concise, and easily-spottable. The action is clear and the prompts are subtle enough not to bug a user, but also obvious due to the one thing per page principle.

The UI Battle: Page Vs Scroll | Shakuro

  • Better placement of CTAs. The reduction of scrolling helps retain space for important things like Call To Action buttons without compromising the content.

The UI Battle: Page Vs Scroll | Shakuro

  • Easy ramification. Relevant information has to accessible. Clever usage of the estate on one page allows distributing the information in a way that helps users locate their current state and not be distracted and carried away.

The UI Battle: Page Vs Scroll | Shakuro

Official Decision

For some cases, scroll is the best option. The approach goes off of the natural state of things. Some processes only make sense in one setting, like providing the first and the last name, or a login and a password, but there are cases that do good when emphasized solely.

In our Swyft collaboration, we combined a lot of techniques in design. The natural way here was to serve content in portioned and logical sequence. We took care of the Swyft Terminal UI options for physically challenged people by introducing the screen reduction and downslide which made all the UI elements easily accessible. This obviously required a compromise of one thing per page and scrolling principles, yet the organic experience that takes into account multiple factors is what we at Shakuro strive for.