CodepenLink to codepenEmail meEmail me at info@metricslice.comGitHubLink to my GitHub repositoryCall meCall me at 404-694-1204Follow me on TwitterFollow me on Twitter @thebeckyhamm
Menu

UX Smackdown: Snapchat

Feb 04, 2016
← Back to All Posts

This is the beginning of a series of posts on User Experience and usability principles, as applied to various websites and apps.

Snapchat is an app that allows you to send brief (pun intended) photos and videos to your friends that cannot be viewed more than once - which exploded in popularity due to the newfound ability to (somewhat) safely send nudie pics.

We'll leave the nudie pics behind today to answer a few burning UX questions, like: how did I add that snap to my stories? What does the recycle sign mean? And why are there so many boxes littered all over the place?


In his excellent article, Thomas Byttebier explains that "icons can easily break the most important characteristic of a good user interface: clarity". So in the spirit of clarity, I'm going to suggest a few revisions to everyone's favorite nudie-pics app.


The Camera Screen

Firstly, let's take an inventory of the actions you can do from the snap camera screen.

  1. Take a snap
  2. Take a video
  3. Go to Snap History
  4. Go to Stories
  5. Turn flash on/off
  6. Turn camera around
  7. View your settings and your friends

The icons are a flash, a ghost, a weird recycling sign, a square, a circle, and three lines. Totally obvious which is which, right?

current snapchat ui

How about we first think through grouping these actions by category?

So we would have camera actions (snap, video, flash, and camera orientation) and navigation items (history, stories, settings).

It's common practice these days to place the camera button in the bottom center, so we'll leave that there, and group the rest of the camera actions around it. Remember also that we're trying to clarify things here, so I'll add text underneath the updated flash and camera flip icons.

Stories and History can go at the top. As a user, I don't want to access settings while I'm trying to take a snap, so I'll remove the (very unintuitive) action of the ghost at the top.

new snapchat ui

Ok. We've got the bare minimum to not completely confuse our users! We forgot an item in our list, however: video. To start videoing, you currently press and hold the camera button. Maybe Snapchat was leaving this up to their super users to figure out, but ideally we'd work in an extra icon that denoted this switch as well.

The Snapsterpiece Screen (seriously that's what they call it)

Inventory of actions:

  1. Delete snap
  2. Type and/or change font style
  3. Pick a color
  4. Draw on screen
  5. Add a sticker
  6. Add filters
  7. Choose snap length
  8. Download
  9. Save to Story (with no confirmation, as I JUST FOUND OUT. So now my story includes three random pictures of my dog and one of my laptop screen. Good thing I wasn't naked. Thanks a lot, Snapchat.)
  10. Go to Send Snap

Icons: an "X", a post-it note, a "T", a pencil, a circle with a number in it, a down arrow, a square with a plus in it, and a chevron right arrow. Just what I was expecting.

The actions are fairly well-grouped already. Editing actions are in the top left and snap actions are on the bottom. Let's add some labels and we'll be 90% there.

new snapchat ui

Going back to our list, we didn't directly address filters or the horrifying consequences of adding a snap to your story.

Filters seem to be, as with video, another super user power, since there is no explicit reference to them. I'd create a new icon to add to the top of the screen, or use a helpful unobtrusive mini-tutorial pointing the feature out for first-time users. Something like: "Swipe left or right to add a filter" with accompanying arrows.

As for Add to Story, I would add this alert: "Add this snap to your story? Your story is shared with all of your friends." with "Yes" or "No" options below.

Another options is to remove the icon from this page, and only have the "My Story" option listed above the contact list on the Send screen.

Other Screens

Snapchat also has views for sending your snaps, viewing snaps, viewing contacts, and viewing stories. Here's how Snapchat's website describes the sent and received photo and video icons:

new snapchat ui

...

If you have this memorized, I commend you. How about some outgoing and incoming arrows, with a little video camera or film strip next to the video items?

In the meantime, I will just keep tapping icons to see what happens.


There you have it! A somewhat less confusing, more intuitive app for folks of all ages to send their nudie pics from.

Usability Rating: 2 out of 5 stars