TV Design Case Study: Twit-on-TV

Twit-On-Tv was recently published on the Google Play Store and so I decided to try it out. My hope was that it would be a great way to consume byte-sized content on a TV, much like Hopwatch for Reddit. Unfortunately, after trying it out I was disappointed by the subpar experience. This article is going to go over some of the current design flaws with the app and how it can become a great Twitter client.

Main Interface

Twit-on-TV
When you first open the app and login, you’re presented with the traditional Leanback interface. There’s three categories: my timeline, my tweets, and my settings. The first thing I notice right away is the aspect ratio of the cards are wrong. My profile photo, repeated ad nauseam,  is stretched out such that it kind of ruins my picture. There’s a severe lack of options here. I can’t search, and there’s no option to find trending topics.

These two features could be great. If there’s a trending video, I’d like to be able to find that without a lot of digging through my timeline. Live events like sports or award ceremonies that are sending out constant Twitter updates are another thing that users would commonly like to follow. Without the ability to look beyond my current timeline, you lose a pretty big part of Twitter’s value.

I’d envision another category just below the Timeline showing banner images with the hashtag or event at the bottom explaining it. Then when you tap it takes you to a new Timeline with that banner image acting as the background image. Search could fit into a similar results screen.

The results screen could be adapted for any collection of tweets including your own. It may be a good idea to reduce home screen clutter and get rid of your row of tweets. I don’t scroll through my own content often, and it’d be nicer to put that separately into a results screen. As handsome as I may be, I don’t want to see myself half a dozen times on a screen.

Content Consumption

Twit-on-TV

Twit-on-TV

You’d think that I could just scroll left and right to see the content that someone tweeted. After all, each tweet is only a few words and should be easy to show up on a TV. However, the decision to hide that content away in a card is pretty frustrating. After only a couple characters, you have to make another tap to open the tweet and then another tap to resume the previous activity.

There are options to take on each tweet, including the “Speech” function which will say the content of the text. While that’s a cool feature, it’s so buried that by the time you get to it you’ve already read the whole thing.

This is just too many taps and not beautiful. Trying to read each tweet incrementally like this is frustrating and slow. The original Twitter timeline was built so that users could scroll to their heart’s content, going at the user’s pace. I think this could be something that translates well to a TV as well.

The developer may need to ditch the Leanback UI and come up with something on their own. It’d be much more immersive, filling the entire space, and making everything just a click or two away. Moving left to right would send the user farther back in their timeline. Up would have a search bar and new tweet button, putting search and posts everywhere in the app. Down would display the trending banners like I explained above. The tweet actions could be initiated with an ‘A’ button press. A menu would pop up showing options to retweet, like, or say aloud. The popup would center around a heart icon, putting retweet and speech on either side and simplifying the navigation a lot.

Text-to-speech would also be a setting to be enabled by default.

Style

Let’s look at the design for these tweets. As you can see above, a plain text tweet is not beautiful. It’s just a bunch of text placed at different spots on a screen. There’s no color, no imagery, no iconography, or anything else to make it stand out. The action buttons at the bottom could easily become icons, and that’d describe Twitter’s actions much more consistently. Who is this user? A profile photo could be used. Instead of a blank gray background, the user’s banner image could be used. Then the centered card would look more elegant because it stands out much more from the background. Using Google’s Palette API, the teal card can change its color based on the banner image.

Images

Twit on tv

Images show up a little better. It pushes the user’s info to the side and displays the image prominently. The banner image is the same thing, which doesn’t work out too well. The image looks bloated and pixelated on a full resolution, and it looks redundant. The teal card stands out, being one of the only teal things on the whole screen. Plus I get no more information about this user. I can see their profile picture on the main activity; why can’t I do that here?

Composing

Twit on tv

You can send tweets from your TV, which isn’t a great experience either. Part of that is limited to the keyboard, but another part is the restrictions you are given. You have to be in the main activity, not as you’re searching a trending topic or in reply to a tweet. Then a popup cuts off the middle of the screen, not filling it but preventing you from seeing any other content well.

Tweets are often made with some context. A key part of this app would be to maintain context with the conversation even when you’re creating a new point. I think this compose window would be better served as a sidebar that comes out of the right side, like in the Settings. It would squish the main panel a little, but all the content would still appear fine on the screen. This way, I can refer to past tweets while writing.

As stated above, placing the new tweet button next to the search bar makes it much more accessible everywhere and will allow more users to take advantage of it.

Mock-up

Doesn't this look better?
Doesn’t this look better?

It’s easy for me to just rant about what’s wrong without offering much guidance, so I decided to create a quick mockup explaining what I mean. When you open the app, you’ll see the most recent tweet appear and then you can use the DPAD to quickly navigate in each direction for more controls. It’s not perfect, but just one way to redesign the interface in a way that would be faster to get to everything the user needs.

Conclusion

Twitter is trying to encourage the sharing of photos and videos, as well as integrating with their other products Vine and Periscope, and this means you can have a really great app that plays through your timeline with a fantastic experience. Yet the poor interface and a lack of options means this app could use a lot of work. I am optimistic about the continued development of social media clients for the TV as it’s a great platform to broadcast content to a wide audience, both globally and in your living room.

Twit-on-TV is a beautiful, functional app on a phone, and if they made TV just as high of a priority, they could deliver a killer experience.

If you’re interested in downloading this app, it’s free to do so on Google Play.

Nick Felker

Nick Felker

Nick Felker is a student Electrical & Computer Engineering student at Rowan University (C/O 2017) and the student IEEE webmaster. When he's not studying, he is a software developer for the web and Android (Felker Tech). He has several open source projects on GitHub (http://github.com/fleker)Devices: Moto G-2013 Moto G-2015, Moto 360, Google ADT-1, Nexus 7-2013 (x2), Lenovo Laptop, Custom Desktop.Although he was an intern at Google, the content of this blog is entirely independent and his own thoughts.

More Posts - Website

Follow Me:
TwitterLinkedInGoogle PlusReddit