Interface | Interaction | Design

Twitter recently launched their redesign to behave more like an application and less like a web page. They kept the simple timeline interface and widened the right pane that contains profile information. They also created a slide out detail pane that shows more when you select a particular tweet. From the original announcement:

On the site, you’ll see the familiar timeline, yet underneath each Tweet is a handful of information, deeper context and even embedded media. Simply click on an individual Tweet and a details pane slides out on the right and reveals this content.

This new pane shows a wide variety of info about the selected tweet. If you are looking at a tweet that is a response to something, it actually tracks what it was in response to and shows them both in the pane. If the tweet has a link to media, such as an image or video, the right pane displays it. If the tweet features a hashtag (#design for instance) the pane will show other recent posts featuring that tag. It will even guess keywords from the tweet and give related content. It's really quite robust and powerful, without being intrusive.

Here are a few before and after examples of the interface. Finding the befores was a bit of a challenge, so I found those (courtesy of BJ McCray) first and took a look at those user's current pages.

Old:

New:

Old:

New:

All in all, they have managed an effective evolution. It can be a challenge to overhaul a tool that is used by 160 million vocal users. Particularly one that is known for its simplicity. Adding features has to be handled very carefully. I think they've succeeded.

I love their little recursive video they did for the launch too. Pretty cool...

It was mentioned in something I read recently that bank websites are notorious for their bad interfaces. While they get even worse inside, I decided to start with the home pages. This was also triggered by a recent "beta" of a redesign of the home page of one of my banks (which also inspired the title :) ). So, I'll start with them, Bank of America.

Here is their old (current) page:

It's pretty well organized, for a banking site, but there is just too much going on. To be honest, I totally ignore everything on the page except the Online Banking log in area. They do a good job of making that stand out, but considering the vast majority of people going to this page are here only for that, it could be a bit more prominent. What is likely the second most used tool, the "ATMs & Banking Centers" lookup, could also be much more prominent. I do give them credit for making the "Help for homeowners facing hardship" link so easy to find.

Now, let's take a look at the new page they are introducing:

This is a huge improvement. It's a much cleaner design. They've moved all the lists of services up under the Menus. They also got rid of the odd color glitches that were going on in the old menus. The Log In box is much more prominent and simpler. They made the "Locations" tools a bit less prominent, but it balances out, since there is so much less on the page. They also kept the "Help for homeowners" above the fold, so to speak. I really hope they continue this refinement throughout their online presence. They have done much over the last year or so to add features to their online banking, now it may be time to polish everything.

Now for a look at the competition. Chase is about on par with BofA's old page:

They have a lot of content stuffed into that front page, but they do a few things well. Their login is simpler than the first time login for BofA (to Bank of America's credit, they make good use of cookies to save much of what they ask you upfront on first log in). They also put the "Find ATM / Branch" tool right up on top where it belongs.

Compass and CapitalOne are both pretty bad. Neither has the log in on the home page. CapitalOne requires you to select your account type to go to another site where you can log in. Compass has a similar issue, but just places six different sign in links on the right side of the page. Other than that, both are just as crowded as the Old style BofA page. Their only positive is probably that the "Locations" links are all right up on top.

See for yourself:

INGDirect is one of my favorite banks and their site doesn't disappoint. At least not much:

They started with a lot fewer products (just savings accounts originally) as a bank, but have since added more with the acquisition of ShareBuilder and by starting to offer mortgages and checking accounts. I think this simplicity is reflected in their design. It's also interesting that on their home page they have two ways to get to the two most important links, "View my account / SIGN IN" and "Open an account". They only negative is that the sign in functionality is on a separate page. I think that is justifiable once you see their sign in mechanism though.

Google has a tradition of celebrating all sorts of events with are known as Google Doodles. They are usually for the birthdays of famous people…

…or national holidays for countries around the world…

…or major events & various anniversaries…

A recent doodle that received a lot of attention was for one of these anniversaries. For the 30th Anniversary of Pac-Man on May 21, 2010, Google created a particularly adventurous doodle. People that searched with Google that day were treated to a miniature Pac-Man game coded using JavaScript.

Using sprites and a background image combined with the original background music and sounds (this was the only shockwave used in the project), they implemented the game around the Google logo. Of course there was talk immediately of how many man hours of work were likely wasted that day around the world due to the doodle. According to calculations by the makers of Rescue Time (a time tracking and management application), 4.82 million man hours were wasted due to the logo. In fact, they say:

• Google Pac-Man consumed 4,819,352 hours of time (beyond the 33.6m daily man hours of attention that Google Search gets in a given day)
• $120,483,800 is the dollar tally, If the average Google user has a COST of $25/hr (note that cost is 1.3 – 2.0 X pay rate).
• For that same cost, you could hire all 19,835 google employees, from Larry and Sergey down to their janitors, and get 6 weeks of their time. Imagine what you could build with that army of man power.

Discussions of productivity aside, the tribute was quite impressive and a great demonstration tool for JavaScript and what can be done in modern browsers without resorting to Flash.

The game is still available at www.google.com/pacman.

There have been a few other interactive logos for Google this year. The second most famous was their experiment with HTML 5 to promote their Chrome browser. On September 7, 2010 the logo was made of balls. When you moused over them, they ran from the mouse. This worked best of course in Chrome, but was also quite functional in Firefox and Safari. They haven't left this one live, but you can see several demonstrations of it on YouTube.

They followed the bouncing balls with a logo that started in greyscale. As you typed your search term the letters switched to color. Here's a nice video of it.