You are reading

Realigning the new Twitter

Recently Twitter redesigned its web interface. The new panel-esque design really encourages to use the web app instead of having to tweet with desktop clients like Twitterrific or Tweetie. The interactions work as expected, and somewhat remind me of those found on Twitter for iPhone, which makes perfect sense since it’s Twitter’s official iPhone app. Overall: impressive work, and thumbs up.

But I think there are still a couple of corners that need polish and fine tuning. So, this past weekend, I thought I could exercise myself by realigning the new Twitter; specifically, by improving white space, align the layout to a grid, and above all, sprucing up typography.


In case you don’t have it yet, have a look at the new Twitter (click on the image for viewing it full size):

So let’s dissect this specimen and begin by aligning everything to a grid.

Grids: Everything in its right place

As you know, grid systems create order, and more important, provide us with a basic framework to start exploring layout and typographic possibilities. The problem with grids is that, if you are not careful enough, it’s really easy to get lost in the means of the International Typographic Style and completely forget the main visual concept behind your site (that could be different than using Helvetica, a white background and lines).

I’m sure Twitter didn’t like that. It seems they wanted a more relaxed look, not Swiss, but American. Approachable and modern. But in my eyes, the site still looks a bit messy, and not clean though. If this is intentional, I don’t know, but since this is an exercise, I wanted to experiment on how the new Twitter would look loosely applied to a grid.

So I began by adjusting the new Twitter to a 12 column, 1080px wide grid (also, check out Cameron Moll’s related blog entry on page widths). The grid has a generous gutter to prevent the design from looking too grid-y, but, still in order. Here’s what I came up with (rollover to show the grid):

As you can see, I filled the left 6 columns with the user’s timeline, and left the remaining columns to play with the right panel. There, I used 3 columns for each section, nudging them even more so it doesn’t seem that there’s a grid behind it. In this way I also released stress from the design, that could appear when aligning everything strictly to a grid column (in a related note, have a look at Doug Bowman’s explanation on proportions).

Looks better. Everything in it’s right place, and still looking American.

White Space

While aligning the design to a grid, I also tweaked the white space and some UI elements for better usability and consistency.

White space is fundamental in the way that it helps users identify blocks of information quickly, without reading. The problem with new Twitter’s white space is especially prominent in the right panel. When I first saw the new design, I couldn’t identify quickly what areas of the content make for a section. Since everything looks shrinked and the titles are set in Helvetica Neue, it’s hard to actually understand what fits within a section. My brain was making a heavy process in identifying what’s part of a section, and what’s not.

So I polished macro white space (between sections, wrappers and other modules), and micro white space (between titles, and copy). Here’s a cropped version, compared side-to-side, of the right panel. On the left, the original sidebar designed by Twitter, on the right, the realigned panel.

The changes may sound subtle, but have a look at this blurred export of it:

Typography

There’s no point in discussing the importance of typography in web design. It’s not important, it’s fundamental. Again, the problem, to my eyes, is the new right panel. It still looks cluttered, and font pairings doesn’t seem to match. I love Helvetica, and I can understand why Twitter decided to choose Helvetica Neue Light, but I’d propose to change it for Helvetica Bold for aims of better usability.

As you can see from the previous blurred screenshot, findability is greatly improved when using Helvetica Bold for each section title. I also removed unnecessary weights (limiting myself to play with 13px, 15px and 18px as font sizes) and polished everything out a bit more.

Copy is interface

The section titles now have more information, and therefore are more usable. Section headers now have direct links to their actions. Users, now, at a glance, can quickly have a look on the section title and make an action on them.

Special treatment requires the “Trends” section. I simplified it a bit, by displaying WorldWide trends by default. So in this way, users have an idea of the type of content this section is displaying, (WorldWide, South America, etc.) and can change their settings by clicking on “change”.

Sections headers now convey more information and work as a pattern, with section titles on the left, and their primary actions, on the right.

Final thoughts

This is just an experiment. I like to dissect things because then I can understand how they work. If you read Spanish, you can read my analysis on Taringa.net (a site with over 13 million page views daily and probably the most popular site in Latin America) where I helped to save thousands of dollars a month by applying simple HTML techniques.

Oh, and the disclaimer: I don’t work for Twitter and this was made just to experiment. This said, I love @vl, @stop, and all the design team they have there :-)

Here’s a full size version of the realign, and also a compared version, side to side, of the experiment.

Oh, don’t forget to follow me on Twitter.

Comments for this entry

Me gusta la propuesta, la verdad que ahora se me hace medio enquilombadita la interfaz como está.

Habrá algún script de Greasmonkey para poder hacer cambios en como se ve la interfaz hoy?

Abrz!

Even though I agree with aligning things (the avatar misaligned with input field for instance), placing the numbers at the far right of each box header requires additional effort: you need two saccades to aprehend the data displayed, as opposed to one, with the original Twitter interface. The Trends block in your redesign breaks with the uniformity of the other blocks and maybe if there’s a long country name instead of Worldwide the header block would get too messy. For instance, United Kingdom or New Zealand.
All in all, the realignment looks very interesting, although the data should stay where it is for faster reading.
My 2c buddy, hope we can catch up again for some sake! :D

Me encantó. Me gustó más este “realign” que el de Gmail :P

Y el artículo de Taringa es una Biblia que siempre vale la pena volver a visitar, para recordar un par de fundamentales.

Saludos!

Viste que contestó uno de los flacos del equipo de UI vía Twitter?

Jonatan

User

http://www.flickr.com/photos/stop/5034204045/
Mira quien aparece ahi, por lo menos lo vio ;)

While I do think you made a good point with the use of Helvetica bold instead of Helvetica Neue Light, I think you carried some things too far.

For example the gutter between the main section and the sidebar is way too narrow in your version. Especially comparing it to the very generous whitespace between modules in the sidebar. I think the gutter between two separate columns of the interface must be larger than between two similar modules in the sidebar and there are numerous techniques on achieving this visually without braking the grid. Personally I would align the vertical column divider on the end of the 6th column instead of the beginning of the 7th (or at least right in the middle of the gutter).

The original version is much more condensed, especially vertically, which was perfectly achieved without the interface being too cluttered. For instance your input area takes way too much real estate (without even having focus on it) which results in having less content displayed on smaller screens. As a user and as a designer In Doug’s position I would exchange a bit of whitespace for more content any time.

I also find your realignment of the sidebar very formalistic. Applying the horizontal divider below the module heading instead of below the module in your case works only on modules with half the sidebar width. Because you chose to divide the modules with increased whitespace (and avoid the design being too cluttered with dividers) the “Twitter for BlackBerry” module is now “hanging in the air” having no proper alignment or “stability”, which is original design works flawlessly.

Also I think you are making an unnecessary visual tension by aligning the “home, profile, messages” tabs with the sidebar. It visually suggests these two elements are somehow relate when in fact they are not.

I think you could improve both layouts by solving previously mentioned problems :)

Thanks for your great feedback, Natan!

“For instance your input area takes way too much real estate (without even having focus on it) which results in having less content displayed on smaller screens.

What you see is how the input field could look after focusing. Of course, it should be condensed in a normal state (pretty much as Twitter’s input field).

Also… I’m not sure if they worry too much about small screens.

I also find your realignment of the sidebar very formalistic.

Could be. Truth is that the 1px line really helps the eye to “follow” the action tied to each title. Without the line, it could look less formal, but it will be for sure disorienting for the user and require extra process.

(…) the “Twitter for BlackBerry” module is now “hanging in the air” having no proper alignment or “stability”

Yes, true. I was thinking on treating this element different, maybe with a 2px line divider, or something else. Since this is not a section with content, but and ad to external content, it deserves another treatment.

Again, thanks for having a look!

Gracias por sus comentarios!

Elio — Language is definitely an issue that I couldn’t (neither wanted to!) experiment with. I see that Twitter’s default behavior is to cut off long words when needed (in the “Who to follow” section, for example), so it shouldn’t be as much as an issue.

I don’t agree when you say the numbers require additional effort. In any case, I’d love to have a heat map comparing Twitter’s original version and mine.

Fantastic analysis Rod. Congrats!

nm

User

Very nice! I like it.

Can this now be turned into a greasemonkey script so that we can actually see things this way? =D

alleagra

User

No, Recently Twitter redesigned its web interface. There’s no apostrophe because can only ever mean and you didn’t mean to write that.

Precision matters as you’d probably agree. I have enjoyed your column.

alleagra

User

I should have used different brackets because the comment has been rendered meaningless with … it’s …and …it is … vanishing! Sorry.

[...] This post was Twitted by phiji [...]

excellent work. i really like the new design, but yours bring an extra layer of clarity to the table.

>>>1080px wide

I went and called up the full-size JPEG and a lot of the info now goes off the right side of my screen. Don’t make the mistake of thinking everyone has a gigantic screen in front of them. I don’t and the New Twitter, surprisingly, fits all on my screen as it is.: 1024×768.

stephen

User

I’m not saying I have any insight into twitter, but here are my thoughts:

Main thing: Twitter has a brand to maintain. While the stylistic changes that you propose are good in general, the reason why they did it the way they did is that it is consistent with their brand.

The changes you suggest somewhat improve efficiency but it makes it look more like a news or “professional” website. Twitter is “fun”.

Another question you might ask is if the users come to twitter to efficiently gather information and leave or to waste time? if the answer is to waste time then you might want to make the site *slightly* inefficient in a few regards, especially since users will remember where things are over time.

[...] The Old Fashioned » Realigning the new Twitter [...]

The #newtwitter is leaps and bounds ahead of the #oldtwitter. I’m sure this is hurting a few desktop clients. I’m liking the #newtwitter overall!

Gave me a lot of insights here Rodrigo. Thank you very much for this post. I hope you keep upping more of these. I’d love to gain insights.

Don’t know if I’m the only one but I don’t like the new Twitter design, prefer the old one.

[...] last week I decided to play with the new Twitter interface and see if I could improve it by making tweaks and [...]

It’s obvious you put a lot of thinking into your redesign. I prefer to focus on the main content (tweets) and little else. My quick CSS hack shows this.

It’s wonderful that anyone with a little knowledge of CSS can modify interfaces to our needs. I think a visual JavaScript based tool would be a tool non-css people may enjoy.

[...] Article: Designer get’s a job at ZenDesk for sharp review of Twitter web UI. Share and [...]

[...] Twitter rediseñó, me tomé un fin de semana para hacer un ensayo con ideas sobre cómo lo hubiera diseñado yo. Ese artículo apareció ese mismo fin de semana en [...]

[...] http://www.rodrigogalindez.com/archivos/realigning-the-new-twitter/ Share this:TwitterFacebookMe gusta:Me gusta Cargando… Esta entrada fue publicada en invitados, visitas por Lucas Mourelle. Guarda el enlace permanente. [...]

Leave your comment

Please be polite. You can use these HTML tags: STRONG, A, BLOCKQUOTE, CODE



Copyright © 2004–2010 Rodrigo Galindez. All rights reserved. Hosting by XMundo Networks.

RSS Feed. Proudly powered by Wordpress. Correct at time of going to print.