UI of Twitter’s new ‘Vine’ app: Subtle Evolution

Recently Twitter released its new standalone short video sharing app ‘Vine’. It’s début isn’t without some controversies, but overall it’s a solid app with great potentials. All the dramas aside, I want to go ahead and do a bit of UI analysis on this hot social app, and see if we can find something interesting:

1. Biggest Screen Ever

Unlike the quite prevalent ‘5 Tabs Nav Bar’ design pattern other social apps have adopted, Vine doesn’t have a global navigation bar at all. It gives user the most screen real estate to display content, while UI gets out-of-the-way. Launch the app and you’ll see a video playing right away in loops, instantly immersive. Keep scrolling down and you’ll get end-less (literally) content, and there’s no bottom bar with 5 different icons to increase your cognitive load. The interface is clean and minimum.

Vine vs other SNS app

Notice that in above pictures, Twittbot, Twitter, Instagram all have the bottom navigation bar. It’s useful if user wander between these app sections a lot. But for a lot of users, most of the time they stay at their timeline viewing, thus the nav bar only gets in the way unnecessarily. Vine isn’t the first app to come up with this kind of ‘flat’ approach to content presentation. Path, which is another ‘intimate social network’ service, also shares the same ‘put content front and center’ philosophy.

Path Timeline and side menu

Path don’t have global navigation bar either, and they uses a side menu that’s hidden from the content panel, only revealed when the content panel slides to the right. Without the navigation bar, Path is able to keep the interface clean and display more content also.

2. Better Icon-Label Connection

Again using the picture above as an example, it’s really hard if not impossible to figure out what those little navigation bar icons stands for. Twitter at least put the label beneath the icons (but it’s very small, hard to read), Twittbot and Instagram only use icons, thus users will hesitate and ask themselves what those tabs are for before touching them. As we all know it, making users stop and think = bad user experience.

4 Section Design

Vine uses a drop-down menu to switch between app sections. In the menu, pretty and sizable icons are displayed along with the section name. When user gets into the respective section, the icon will stay on the top left corner, and the title will be in the middle of the title bar, further strengthen the connection.

3. Making ‘Like and Comment’ Easier

People are comparing ‘Vine’ with ‘Instagram’ by claiming ‘Vine is the Video Instagram’. They do have some resemblances in UI design. One case in point, they all use a ‘Like’ and ‘Comment’ button for the viewer to leave feedback. The difference is size, where Vine’s buttons are bigger than Instagram, which makes them more ‘touchable’, encouraging people to express their opinion, further foster the social part of the app.

Like & Comment Button Size

4. Curated ‘Explore’ Page
Exploring is an essential part of  social sharing apps. Whether the application can help user find the content they want will determine how far an social media can go.
Curated vd non-curated
As we can see from above pictures, Vine’s ‘Explore’ page has ‘Editor’s Picks’ and ‘Popular Now’, along with 12 most popular or interesting tags, this will cover a lot of ground already. Instagram, on the right side, only list photos that are currently popular. It’s more direct, but also due to the lack of sophisticated algorithm, the results as we can see, are quite random. User will have to input tags they want to search to get access to it, which is not very convenient.

5. Some flaws?

During the review, I also found some design hard to understand. For example, it is a video sharing app, but the only way you can capture a video is to go to ‘Home’ and touch the top right corner icon (no labels either). For such a prominent function as creating video, this is a bit too modest. Maybe Vine’s design team think this app as more of a major content consuming app than a content creating app I don’t know, but if making a video is not as easy as taking a photo, this will hurt its subscribers growth. Video is harder to capture and thus needs more love from UI/UX.

To Sum it up

Overall, I felt the application’s UI and UX is carefully designed. It’s not as sophisticated as Twitter, or as fancy as Path, but it gets the job done very efficiently. The UI gets out-of-the-way as much as possible, people will not have a hard time finding their way around because it’s just not that many layers worthy of the term ‘Information Hierarchy’. Everything is quite buttoned up. It’s simple and even ‘shallow’. (Interestingly, some say the early contents are also ‘shallow’, but addictive.) But simple can be powerful, and easier to get viral, which is critical critical for a new social service.


One thought on “UI of Twitter’s new ‘Vine’ app: Subtle Evolution

  1. Pingback: Twitter’s Vine: The Power of ‘Short’ | MuCraft

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s