Periscope: User Interface Breakdown
Periscope, a live-streaming app by Twitter, launched just a few days ago and already it's bravado connection with the social media giant has it's claws dug onto users. As I write this, Periscope already has a whopping 400 reviews with an average of 4.0 stars, and is already crowned by many users in design-excellency:
"@periscopeco is hands down the best designed app since @instagram. New standard for UI/UX."
The app's purpose is to create an easy to use, easy to interact live-streaming environment for the broadcasters, and audiences alike. This creates a prominent branch off of the world of live-streaming creation, and its' audience.
Live-streaming, long ago, was quite a process of set-up and preparation, that involved multiple, supporting programs from screen capture, hosting, video and audio calibration. Live-streaming, in its' best form requires costly effort. Even with the simpler UI's (user interface) that was created for the sole purpose of easing the process, it is undeniable--Periscope is currently the fastest and easiest (albeit basic,) way to stream, so far. Coupled with it climbing the app ladder and an instant contender with original live-streaming app Meerkat, Perioscope is on it's way to become a native (home screen) app for millions of users.
So why is it the way it is? A couple of key things:
1. It's everywhere:
I downloaded the app this morning, and quickly did I find it since it's plastered on both "Editor's Choice" and the first app listed on "Best New Apps". This is a great example of paid trigger as described in Nir Eyal's Hooked:
"Companies generally use paid triggers to acquire new users and leverage other triggers to bring them back."
It being on the front page of the app store, as a user, whether I realize it or not, I instantly acknowledge it's existence. Better yet, it being featured twice actually doubles my curiosity--and the trigger is off. In addition to the hype around the web, this app is now part of my life (dramatics aside) just by exposure.
2. It's recognizable:
Other than the fact that the app hype centered around Twitter (for obvious reasons) as creatures of fast-thinking (humans will always first base decisions out of at-the-moment convenience rather than the conscious-costly, slow-thinking,) we depend on cues to help solidify our impressions of everything, instantly. One of these cues, centers on what we see, and how we interpret it. Periscope's logo is a good example of this. The instantly recognizable location icon, gives familiarity to the users, as it implies yonder of places and destinations, relative to where the user is. Seen prominently on Google Maps, the icon gives a notion of "I am here", and with the red dot that is familiar to the users as 'LIVE' and 'RECORDING', the logo--in my opinion says what Periscope is, without saying anything at all. The aqua blue background, connecting the relationship with Twitter, also translates corresponds confidence and dependability to the user, in terms of color psychology.
3. Easy-peasy user interface:
Opening the app, Periscope does a good job reinforcing what it is and what it does by showing it in plain sight-- the live broadcasts from anyone, and the people watching. The app's front is divided by three sections that have different purposes:
TOP OF THE APP: (landing page): featured streams, rendered in large boxes (two can take up the whole screen, but there are in fact, three of these). The prominent "LIVE" call-to-action button on the top left, drenched in easy-on-the-eyes muted red draws my eyes right away, and cleverly, placing the audience count with a person icon next to it (left to right) materializes my curiosity:
There are 17 people watching this one stream. I wonder what's so interesting about it?
The differing large, image backgrounds are provided for each box (a screen shot of the stream, taken by Periscope) is well done because immediately, I know--there's something behind this box (the stream).
I know that the app is barely a week old, but I can say without a doubt that some canny users will take advantage of the screenshot previews to showcase an interesting image to draw more users into their streams.
AS I SCROLL: The streams are then condensed from the large boxes to a number of bands, giving a compact feel--but not in actual practice. Periscope has turned the preview image into a square icon, filtered in the muted red with the same "LIVE" text (or grey, if offline). The title of the stream is displayed to it's immediate right. The audience count, now moved to the far right is the most compelling trigger here. As you see acknowledge the streams in bands, unconsciously you begin to compare them. Which should I watch? Judging by the numbers to the right, you can see the different numbers in a uniform fashion, one after the other. I'm more compelled to click on a higher audience count rather than a lower one. If a lot of people are watching this, it must be interesting.
We must remember that Periscope is a business. Whether or not a user chooses a high audience stream or not is not a top priority. The users are using the app, and that really is the conversion here.
At this point, it is easy to see the design reasons as to why they chose place the audience count to the right of the bands versus next to the "LIVE" CTA (call to action) on the large boxes:
1. The larger boxes had an eye-drawing CTA, and certainly the users will notice this first because it is the first and most apparent text after entering the app, against the vast space of the preview image. Placing the audience count next to it is using the practice of our left-to-right reading flow. So in a sense, the placement is only natural.
2. The following bands had the audience count to the right due to:
-Reinforce the real estate of the band, left to right by applying a visual anchor with the audience count.
-Equalize the importance of the bands vs the large boxes by placing emphasis in audience count.
We must remember that the large boxes did not have the same design intentions of the bands, primarily because the real estate is quite large, that the user focus is narrowed to those individual streams. The thought process is that the after stimulated, if it is not enough to convert the user into an audience, users scrolling further down to the band system will be tried again to a more compelling trigger--the ability to chose a stream based on comparing the audience count.