Hands on With the New Twitter Design

Twitter launched a radically new layout to users Thursday. The first to see the new look were mobile users through the Twitter iPhone and Android apps. After updating those apps, the new look of Twitter became active on those users’ computers as well. All other users will begin to see the updated Twitter look over the course of several months.

The results are mixed. The new look and interface is great for mobile users and the sleek interface is cool. Features on the computer version mix the super-sleek interface with a few bonuses but also a few misses. Pages have more pop but still have the look and feel you would associate with Twitter. The site also rolled out branding pages for companies that have a nice look but could change the organic feel that has brought people to Twitter.

Visually, Twitter has reinvented itself consistently across various platforms. Aside from slight, device-specific tweaks the interface looks the same on the website, on a tablet and on a smartphone (no update for the Mac app as of yet). The biggest plus for designers and other visual professionals is an enhanced use of images to push you toward content. Twitter is starting to define itself as more than just a 140-character platform.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

See More

Web Design

The Twitter update adds a variety of new features, including better search functionality, keyboard shortcuts and better tools for social interaction.

The worst part? Twitter flipped the location of key items on its homepage, moving the timeline to the right and all of the extras to the left. I have clicked the wrong item on multiple occasions.

Home, Connect and Profile

screenshot

These three “new” features speak for themselves. Home is a user’s landing page, and clicking the connect symbol (@) will show a user’s timeline. The thing that looks the most different is the profile page, which makes the account holder a star on his or her page. Profile information is in a larger box that stretches across the page with a much larger icon. Custom backgrounds are still very visible (and don’t have to be reset with the update).

Twitter did not change the font, size or color usage in tweets other than to make link text gray rather than black. So the timeline looks pretty much the same. It’s all the stuff around it that has an added pop (in part because of the lack of visual change to the basic part of the site).

Designers who are marketing themselves or their work could benefit from the use of larger images throughout the site design. The list of recent items has images that are also a bit larger as well. Images and videos now appear in each user’s timeline and are viewable without a link to another site.

Discover

screenshot

The new “Discover” feature is a mashup between hashtags and trending topics. Click on the icon and get immediate access to things generating buzz. Each topic has a link to pages for that topic or hashtag.

This is one of those fun little features that adds visual punch to trending items. The photos and text are much larger than in the general timeline and really looks newsy in the mobile application. The downside is that it adds an almost false sense of credibility to Twitter as a news organization because the feature so closely resembles some news websites.

Hello, Shortcut Keys!

screenshot

Twitter developers built 21 keyboard shortcut combinations so you can get away from the mouse. Want to send a Tweet? Hit “n” and the dialogue box pops right up.

The keys are something I have been waiting for. Unfortunately, they don’t work quite like shortcuts in other applications. Because the web browser already uses ctrl-letter combinations, Twitter uses single-letter keys. I must admit, it has made me a little nervous in the early stages. Am I typing random letters somewhere?

But it seems to work. Even the “gh” combination to get to the home screen sends me there without stray letters or Tweets getting sent out. The shortcuts don’t work when the Tweet window is active though, which prevents inadvertent tweeting.

But is it too late? After clicking through Twitter all this time, will users take to having keyboard shortcuts? It sounds like a great concept, but I am not convinced my habits will change. Still, it’s nice that they went the extra mile and included them for users who prefer to use the app this way.

Mobile Design

screenshot

Twitter’s biggest improvement affects mobile users. I left Twitter for third-party applications on my smartphone a long time ago. Twitter’s app could not compete with the speed and simplicity of others that were free to download and use. Maybe that is why Twitter is offering the new-look site to its mobile users first, to get us to come back (it worked for me.)

It more than met my expectations. The feed is easy to navigate with home, connect, discover and me buttons that are anchored at the bottom of the screen (these are anchored on the left for tablet users). The “Discover” feature is visually appealing with large images and text and might be my new go-to source for information on the go. It is tailored to the mobile user as well and, according to Twitter, will adapt to your preferences with use. It uses your interests and location (if allowed) to showcase relevant trending topics.

The smartphone app looks and works like Twiter.com on a computer. It is easy to follow users without having to leave the item you are viewing. The tablet application has the same feel as well, with a popup window to view links without navigating away from the timeline.

Brand Pages

screenshot

There goes the grassroots feeling that has made Twitter the anti-Facebook. With the update, Twitter introduced brand pages for companies. (Facebook and Google+ already offer something similar.)

It is a great concept for your small-time design shop or freelance business. Registering through Twitter advertising allows companies to have a distinct layout with a banner featuring a company logo rather than just the Twitter user icon, and other extras such as logos, taglines, videos and quick access to promoted Tweets, according to the Twitter Advertising Blog. In addition, Twitter promises that no other companies’ advertisements will appear on your page.

The new features will be free to all users, according to the Twitter Advertising Blog, but are being tested with only a handful of companies at this time. Most are household names – McDonald’s, Coca-Cola, Nike, Verizon Wireless and a page for the latest movie in the Mission: Impossible franchise. The new pages are only viewable on the new Twitter interface and there is no definite timeline for when these pages will be available to everyone; Twitter says it will be rolled out “in the coming months.”

These pages look good. As soon as you hit the page for @nikebasketball, the owner of the site is obvious. The brand pages have a visual definition that has been lacking on Twitter until now.

This feature could be a great asset to designers trying to showcase certain work and who are working with a limited advertising budget. Since Twitter does not charge to host a site, there is no upfront cost. Just visit Twitter.com and complete the business registration, upload your information and start tweeting.

The Lowdown from a Design Perspective

Historically, Twitter’s UI branding has been a bit all over the place. The iPhone, iPad, Android, web and Mac versions each had their own visual presentation style. This overhaul is a clear attempt to tie it all together and you can expect to see similar changes rolled out over the remaining areas sometime soon. Items like the new Home, Connect and Discover symbols give the official Twitter brand a much needed distinct style that helps it stand out from the third party Twitter universe (at least for now).

screenshot

There are some nice usability tweaks as well in the web interface. For instance, clicking on a tweet expands it to show relevant information like retweets and other pieces of the conversation. This strategic placing of key information helps keep the interface clean and simple. This type of functionality also gives the web app a richness that makes it feel more like a native app, a clear trend in web app design that has really taken off lately.

Another interesting design observation: With each new iteration Twitter’s design focus on pure text tweets has faded. The latest round really pushes the new Twitter image-sharing service. Features like the new media grid shown below and the ability to embed videos into business pages hint that the days of Twitter being the simplest social media site around are over.

screenshot

This represents an interesting change in identity that some users will hate initially, but I suspect we’ll all adjust before no time. However, in the long run it raises questions about just who Twitter wants to be. Let’s hope they can keep their core focus while adding helpful features and avoiding bloat.

Conclusion

Twitter has added enough extras and visual interest to its homepage that will allow it to compete with some of the other applications out there such as Hoot Suite and Tweet Deck. The look of the interface is much more visual with variance in text and photo sizes.

Although it has some faults, the new design works because it is simple and organized. Twitter may win back some users who have not been using their mobile applications with the streamlined site across platforms. Branding is a bonus for companies and looks really nice, but I worry all the corporate pages will just junk up my timeline with unwanted ads.

What do you think of the new Twitter design and functionality changes? What do you love? What do you hate? We want to know!