The Smart Details That Make Twitter's New Video Feature Easy to Use

Video for Twitter couldn't be about carefully composed beauty shots. It had to be one-touch fast.
Here you see previous iterations of the video feature with the final version on the right. Note how the edit button is...
Here you see previous iterations of the video feature, with the final version on the right. Note how the edit button is gone, replaced instead by having all the editing options right before you.Twitter

It was 2014, and everyone knew video was eating the world. Which left Twitter in a particular bind: How do you add video to the firehose of 140-character tweets? Still, it was obvious why they needed video on Twitter: to capture the moment, same as a tweet. So video for Twitter couldn't be about carefully composed beauty shots. It had to be one-touch fast, with the possibility of artfulness.

Twitter released a video feature for its mobile app this week, and it's both intuitive and deceptively simple. (Not everyone has it just yet; it's still rolling out.) It manages to cram everything on a single screen, and it's filled with smart design details. And the process of its creation says a bit about the state of mobile app development these days.

The task fell to Paul Stamatiou, a fast-talking twenty-something who is both a coder and a designer. While people like Stamatiou have been unicorns for years---easy to describe but impossible to find---he happens to benefit from new creative tools that are changing the development process. Stamatiou's project wasn't the result of a huge team. For much of the development process, it was just Stamatiou coding in Framer, a javascript animation framework that lets you code on one half your window and see the outcome on the other.

Here are three versions of the play-back screens, with the final version on the right. Note how the filmstrip is handled, and the progress bar, to tell you that it's all part of one video.

Twitter

That simple WYISWYG functionality is easy, direct, and visceral. It allowed Stamatiou to avoid the typical loop between coding, prototyping, and testing. Instead, he could do it himself. When he'd arrive at something worth testing with users, he'd work with Dave Dearman from Twitter's user research team. That's when the product started taking on features worth paying attention to if you're a design geek.

Stamatiou and his managers already had ditched the "edit" button they'd been using, deciding to make it all fit on one screen---after all, nothing runs counter to ethos of being in the moment than having to wade through a hamburger menu. But users started to balk at the feedback offered as they took the videos. What did this chopped up film strip mean? How much video am I supposed to record? Worst of all, although the video recording feature lets you stitch segments together, users didn't realize that the video they were capturing were clips that fed into a larger video. And they didn't understand that by tapping on the thumbnails below the viewfinder, they could delete entire segments of the video they were recording.

The final version shows you an empty box and a red dot when you record a new segment, which helps tell you that you're adding to the film strip you've already created on the left.

Twitter

The rounded corners on the ends of the film strip help signify the video as a bounded whole. Likewise, the rounded edges that appear when you tap on a segment denote that you're editing the whole segment---and not a mere frame.

Twitter

So Stamatiou brought in a bit more help from Avi Cieplinski and David Hart, two Apple alums who worked on Twitter's iOS prototyping team. First came the issue of ensuring users understand that their video clips were parts of a larger whole. They dropped the idea of having individual thumbnails. They added a single progress bar that bridged all of the clips, and rolled forward during playback. To help users understand how the segment fit in with what they'd already recorded, they they added a red dot that appeared in a tile just to the right of the film strip denoting what they'd already recorded.

Finally, they rounded the outside edges of the first and last segment---thus making it clear where the clip began and ended. Likewise, when you tap on a segment to remove it, it dislodges to reveal a round-edged tile---signifying that you're about to remove a whole chunk of video. All in all, it's a brilliant way of creating multiple-cut videos, and anyone who has fumbled with Vine and Instagram should be able to grok the benefits pretty quickly.

Of course, none of this is genius. It all seems obvious, in retrospect. But that's the thing: These things are rarely obvious until after the fact. Taking the product for a spin, it is quite impressive how well it communicates what you can do with it, on one screen. And it's more impressive still that this is all down with basically only two buttons: Record and send.

But the bigger story might be that as more tools like Framer appear on the market, the advantages that redound to designers who can code is getting even greater with every passing day.