Snapchat Map

Guadalajara, Mexico
thu22sep2016—38w266d72%— 01h54m18s—-5utc

Snapchat is not instantly intuitive. It’s not meant to be understood or mastered the first time. Neither is a 🎹 piano or a 🚲 bycicle. These tools are instead optimised for ease of use, flow, and leveraging of possibilities after you’ve mastered them.

A lot of people over 25 years old (!) have famously responded to Snapchat’s newness with disinterest, perplexity1, annoyance and even anger. It’s not that hard to learn and the young have already adopted it in droves for its main 💪 superpower: flinging timed2 slices of life back & forth with friends & followers.

There’s a lot of conceptual innovation going on but as an interface junkie let me now just focus on interfaces & mental models. Once we realized the screen of a PC could be a (cyber)space, their master metaphor, the one that best exploited the affordances of mice, keyboards and the screens of the time, turned out to be overlapping draggable windows3 on “a desktop”. The metaphor of 📱 touch screens is spatially-arranged slides and Snapchat is pushing it into new directions like few other apps.

Snapchat Map

One of the unique things about Snapchat is that its slide switching is particularly immediate and easy to trigger, no fussy edge swiping here, a mere swipe and the slides track the direction of your finger right away. It can be disorienting at first but also allows for easy discoverability and learning if you keep at it, while being very very fast once you get it.

Snapchat is still experimenting furiously, now-big parts of the network like Memories or Discover are barely 3 months old. In the intensely multimedia stories4 by content partners on Discover, a fast 2-dimensional slideshow style is emerging: swipe left/right to go forward/backward, down for details.

Map of a Comedy Central story

This may all seem exotic but Apple itself has been evolving the basic metaphor of iOS in a broadly similar direction. It’s been getting steadily more complex and new users do get confused once in a while, but they use things like edge swipe, a fixed bottom-bar for apps, and a home button to ground the experience:

iOS10 map

Instagram’s stories are an admitted riff on Snapchat with an intriguing metaphor of flipping a person cube: tap to advance someone’s strip of instants, swipe to flip the infinitely-sided cube to the next person.

Instagram Cube flipping

Another Snapchat-inspired app is Musica.lly which is mostly just a very simple vertical strip of short user-submitted videos of airplaying & dancing but the immediacy and polish of the interface is remarkable. Here it is show horizontally:

Musically app

Finally, a useful variation is to show the slides with context, where it’s natural to think of them as cards now. It’s a zoomed-out view with fast flipping through and usually the option of acting on the cards somehow (with further gestures). Here it’s illustrated by iOS active-app switching, Chrome Tab-view, Kindle Page Flip, Safari Tab-view & Spotify’s Now Playing:

Card flipping

1 “For some older users not as adept at navigating new software, the lack of guidance can be confusing. ‘I used to think Snapchat was like those high-pitched whistle sounds that only teenagers can hear,’ says Stewart Butterfield, 43-year-old CEO of the corporate messaging platform Slack. ‘It was a pretty hard thing for me to grasp at the very beginning.’” from Seth Stevenson’s superb feature on Snapchat’s recent releace of Spectacles.

2 “Timed” in 3 main ways. Sequentially: ordered by time, a not-obvious ordering which was the main innovation of the blogging revolution (before it was common to order by themes or ontologies). Time-boxed: by default into 3 seconds for photos and 10s for videos. Ephimerally: expiring in 24 hours.

3 The main things windows do is represent modes and mode-switching spatially: inside this rectangle, this rules and this state applies, over there, something completely different might be going on… to change mode select that window and it will become topmost in your stack.

4 It’s a level of full-screen design, sound, animation & immediacy that’s beyond the usual web. The closest thing I’ve seen is Texture’s wonderful Netflix for magazines experience, which builds on the editorial design of magazines and presents it in a similar 2-dimensional slideshow. Slides.com is also experimenting with a similar spatial model.

Follow me on Twitter!  |  Back to ELZR.com