Swiping stories and how mobile interaction patterns evolve

Once in a while a new interaction pattern pops-up and you wonder why it took so long to figure out.

The ‘stories pattern’ is one of these patterns. It’s a truly native mobile experience. Born on native.

In design we often still treat the touch screen as a regular computer screen.

We moved from skeumorphic design, a way to make people understand a new medium by reusing anchors from the past to a more mobile originated visual design.

Infinite scroll
Facebook figured out that if you build a smart infinite feed people will scroll indefinitely. It’s still a web pattern based on the scrolling behavior of your mouse. It works fine on mobile too.

Tinder familiarised us with card swiping on a phone. Using one hand to hold your phone and use your thumb to go through dozens of cards like an experienced card dealer in a casino throwing out the cards.

Google matured the card concept with their Material Design guidelines and Google Now.

The stories pattern
Snapchat was the one to crack and grow the ‘stories’ pattern. Successfully copied by Instagram and now rolled out into Facebook (test) and Medium.

It’s a way to horizontally swipe through something with one hand, like a deck of cards. Only the cards fill the entire screen.

There is no vertical scroll or partial view, it’s screen to screen to screen. Building a horizontal oriented infinity feed of little experiences or moments.

Stories features on Snapchat, Facebook, Instagram and Medium

The great thing about this pattern is that it works just better with the motion of your thumb.

Figure from: A comparison of smartphone interface guidelines using primary navigation patterns by Pukar Bhattarai, HCI-E MSc Final Project Report 2016 UCL Interaction Centre, University College London.

You stretch your thumb a little bit and there is something new. Something that might be fun. It’s addictive, you can peek at the next card, on small swipe and your on to something new that might be exciting or not. The Skinner box.

This is the one-armed bandit of mobile. It’s a nice and small gesture and it’s addictive.

Good design is as little design as possible
Dieter Rams, 10 principles for good design

As often with great design. In retrospect it’s staring you in the face. Why something so simple was so complicated to discover.