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.
PabloS
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!