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'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.

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.

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.

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.

…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.

When you're writing programs, you can become kind of jaded just looking at a text editor. But when you press run, you see that in your web browser, and it's pulling in information that just has so much emotional value to it.

George Michael Brower
Google designer and technologist

That quote is from an ABCNews interview with Andy Berndt, vice president of Google's creative lab, and George Michael Brower a designer and technologist at Google. Brower worked on a project that most are probably familiar with by now, The Wilderness Downtown. The site was created by a cast of many, led by Director Chris Milk, as a music video for Arcade Fire's "We Used to Wait". Developed entirely in HTML5, it is something that really has to be seen. So, go ahead, fire up Chrome or Safari and check it out. I'll wait.

Back? Good. Impressed? I was.

This video, for wont of a better term, uses an address you feed it to query Google maps and street view and integrates that imagery dynamically with canned video and dynamic renderings. Not to be too cliche, but this is what Web 3.0 is all about. Or at least it should be.

Here are some of the things that make it interesting and compelling interaction design...

The first is the simple address box. It performs realtime querying to populate a list of addresses as you type. This is pretty common place now since Google added instant searching to their main search site, however they still don't have it on the maps site and I wish they did. It works quite well. For the screen shots I have here of the video, I started with 800 W Campbell Rd, the address of UT Dallas (you didn't think I was going to show you all where I live, did you?).

Interestingly, when I first entered it by address, the site warned me that there wasn't enough imagery in street view and satellite view to make the full video experience (when I decided to try to get the message verbatim later it wouldn't do it again) so I went with UT Dallas.

After entering or selecting your address of choice and clicking Search, the site loads for a bit, then tells you to click play. It of course gives you a warning about how processor intensive it is, but I didn't have much issue even with my several year old laptop.

Now I'll jump ahead a bit, perhaps halfway through the experience. There are generally two or three windows up showing video. The canned footage of "you" running as a kid, along with various renderings from Google's map imagery with some rendered birds thrown in for good measure. This is something I didn't notice until my second viewing of the renderings. Not only does the street view camera move move along with the runner, but there is a rendering of the runner on the satellite overhead view as well. You can see it in the large version of this screen shot, it looks like a shadow of a light pole in this case (in the row of parking closest to the building, about halfway down the building), but it was moving.

Another interesting interaction tie in comes when entering your "postcard" text. Not only is the rendering of the font or mouse movements very nice, but the three video windows across the bottom react and move as you type. Giving the impression of a physical machine.

The last nifty bit of compositing comes toward the end if the experience. As "you" are running again, trees begin to grow around you. First you notice them in the white rendered windows, but then they are bursting through the streets in the Google images. Growing to cover your memories. Erasing the evidence of our existence.

For those interested in the why of this project, there is an interview of the director, Chris Milk, over on Techland. A great satellite view of the how is on the Chrome Experiments site. It breaks the project down into some of its major components and the tools used to build them. The street view of the how is provided by one of the primary contributors, Ricardo Cabello (aka mr.doob) on his blog (via WebMonkey). He goes into a lot more depth on the project.

This is probably one of the most impressive HTML5 projects I've come across to date. Between this and Pac Man, it seems that Google is really working hard to push the envelope of what is done with these new, powerful web standards.

When you put coders together with directors and a musician, they all begin to say, 'Well, this can do this, and this can do this.' Hopefully there'll be more.

Andy Berndt
Vice President, Google Creative Lab.

I'm sure there will.

To these I would also add Predictability and perhaps bundle Simplicity with Clear and Concise. Whether applied to a consumer device or an application or a website, these are critical markers of a useful, successful interface. Which brings us to eLearning. I've decided to pick a few of eLearnings most obvious violations of these tenets. I'll start with my addition...

Predictable

Predictability is incredibly important in User Interface (UI) design. If a user is afraid to try things because they are unsure of what will happen, they will never explore and learn the UI. One example of eLearning's lack of predictability is in the use of the Java chat functionality. The first issue seems to be that their implementation of the Chat Applet has it running in the Chat page that you launch it from. This has disastrous implications if you close that window, or in some browsers (Safari, for instance), simply open a new tab in that window. Once I closed the chat I was in and lost all history of the conversation, I quickly avoided doing anything that might cause the same response from the application. So, I was nervous to try opening a tab when I did use eLearning Chat in Firefox.

While on the topic of Chat, there is another issue that points to a lack of cross platform testing. This one falls under Predictability and Consistency. When using the applet in Safari, links look like links, but do not behave like them if you have popup blocking on (which eLearning warns you about). Amusingly, with the blocking turned off, the link opens in a new tab in the window that launched the chat, triggering the first issue I mentioned. The applet also manages to break Copy and Paste, so links have to be retyped. In attempting to try similar experiments in Firefox I was thwarted by:

Consistant

Now, on to Consistency. This is the bane of many an application. It is particularly an issue with applications (and worse yet, suites of applications) that have large development teams working on different pieces at different times, such as Microsoft Office. One of the oddest inconsistencies in eLearning, that I cannot see a reason for is in the top menu. When you are in the My Courses tab it looks like this:

However, when you are actually in a course, it looks like this:

It seems odd that you would have to exit a course to change your settings. There is plenty of room in that top bar to leave the Settings option there at all times. This is inconsistent and inefficient. Which brings me to...

Efficient

Efficiency is what applications should be all about. If they are inefficient there is little point to use them rather than manual methods. I'll try to be efficient in describing the most glaring inefficiency in eLearning. Count the clicks...

Click #1:

You have to choose between "Academic" and "Training, Organizations, and Research."

Click #2:

Then you click the Login button.

Click #3:

Then you enter your credentials and click OK.

Click #4

Only then are you taken to the Course List so you can choose the course you are trying to get to.

Click #2 is the most clearly superfluous, however you really should need only one page with 2 login options that would take you directly to your course list. To make it even more frustrating, you cannot bookmark anything but the first page. Anything beyond that will just malfunction without really telling you why.

How it should work...

There is more data on this page than any one of the other 3, but the overall login process is much faster and simpler overall.

These issues are just the beginning for this application. It is full of oddities and glitches. I'm sure I could delve deeper and find an issue for every category, and perhaps I will in a future post...

Squidfingers.com is the personal portfolio of Travis Beckham, a graphic designer currently working in Kansas City, Missouri. I've long liked the structure of this site.

It seems very well built and the navigation doesn't break the browser like framed or flash based sites often can. Forward & back work fine throughout because it is a pretty basic, static setup. The flashiest function it has is some JavaScript animation to switch images on the view pages. It's an excellent example of not using a CMS or some other database or flash driven solution when such a solution is unnecessary. Kristina Halvorson would be proud. He also does a good job of continuing to update the site as you can see by comparing my screen shot (taken when I first came upon the site in September of 2009) to the current site.

The navigation is simple and straightforward. Clicking a thumbnail takes you to a page where you can navigate through full screenshots of the designs. Under some of the thumbnails you'll notice there are also links to the live websites.

The only weakness of the design is that he has neglected to include a way to contact him or any textual information about what he does. The information I included at the beginning of the post I actually gleaned from a Google search. The artist's name and location is also in the meta data for the site, but most people aren't likely to look there.

He would probably do well to make some additions of contact and background information to the site, but other than that, I find little to fault it with. It's just that those are pretty important and glaring omissions.

This is a fascinating experiment in interface design from around 2005. It was developed in Flash by Alex Frank as part of his degree in Communication Design at the University Essen-Duisberg in Germany.

The basic premise is that the click of the mouse has been removed. Selection is therefore replaced by either mouseover, gestures or timers. There are several different subsections on the the site that demonstrate different ways to do things without the use of the click.

He also gives a brief history of computing to show that the idea of clicking on things in an interface is a relatively recent occurrence commercially, starting in the early 80s with the Apple Lisa.

I think the site appeals most to me because of both the unique design and the unique navigation methods employed. While the clickless interface might not be useful in the mainstream, I could see it being very useful for handicapped individuals that may be able to move a joystick or something, but not operate a traditional mouse with a button.

The one area I am somewhat disappointed with is the Links section under Communicate. It may be because the site is actually so old, but all of the links are "Currently disabled." I would be very interested in seeing some of his inspirations for this site and interface.