2008 – Headlines, Ars masthead, and no icons

2009 – Headlines, Ars masthead, and new icons

The difference between the two may seem minimal, but from the standpoint of usability and graphic design the gap is wide. Designing useful icons and positioning text for small, content-centric mobile devices is becoming essential in the web content industry. Other tech websites like Reddit and Gizmodo both have custom mobile sites (click to see their mobile versions). There are even ad dollars to support these specialized websites with custom ads, Ars Technica has IBM as a mobile sponsor, and Quattro Wireless is dedicated to providing Gizmodo mobile advertising.

As the use of smartphones with web capability increases, look out for a greater focus on mobile websites in the future.

This really stands out to me as why thoughtful web design is important. When Twitter debuted it took time for Twitter (the company) and its users to figure out what exactly it was and how to use it. The official Twitter blog says that “Why would I want to do that?” is a common reaction from people new to Twitter.

Twitter began as a rudimentary social tool based on the concept of status messages but together with those who use it every day, the service has taught us what it wants to be. [...] Twitter has moved from simple social networking into a new kind of communication and a valuable source of timely information.

The realization that Twitter (the service) is good for something specific has impacted the design of the site. Instead of just offering itself up as a social networking tool, Twitter is now saying that it is the melting pot for what’s hot and happening now. Most of all, the new design was specifically made to attract new users and get them to participate.

Helping people access Twitter in more relevant and useful ways upon first introduction lowers the barrier to accessing the value Twitter has to offer and presents the service more consistently with how it has evolved.

The corporate jargon doesn’t clear the  mud, but I think Twitter (the company) is saying is that Twitter (the service) not only wants new people to sign up, but also to participate. This has been a problem in the past for Twitter (Twitter Quitters is what the Neilsen wire called these new users) and part of the problem was the Twitter front page itself. Here’s the rundown from a design standpoint on why this redesign was necessary to attract new users.

1. Attention Deficit Twitsorder. The old old front page was cluttered with text, buttons, and links that divided user attention (why would a user want to Watch a Video! when they came to sign up?). The new front page has axed the block of text, and only has three buttons (‘Sign In’, ‘Search’, and ‘Sign Up Now’) that efficiently direct new users as well as current ones.
2. Areas of Expertise This is the biggest change to the Twitter front page. The emphasis on the old front page was explaining to users what Twitter could be used for and it took them a paragraph to do it. Over half of the real estate was informing users of their options, and the rest was for signing in current users. The new front page places Search smack-dab in the middle and adds an even larger list of hot topics. This change encourages new users to see what people are talking (or Tweeting) about.
3. Brand X It’s becoming more clear that the center of a browser window is center stage for branding and identity materials. The old placement of the Twitter logo made the brand isolated and disconnected from the surrounding text. The new Twitter logo placement not only draws the eye better, but connects the brand with their new tag line:

Share and discover what’s happening right now, anywhere in the world.

It’s clear that Twitter isn’t just a social network, and it doesn’t want to be one anyway. Now it has become a search engine for society itself.

Take a look at the current website:

Here are the proposed changes that I am presenting today:

If you can see the clear difference than you know that this is quite refreshing, so to speak. All of these changes will be made into a Drupal theme and developed by the Central Web Services department of Media Services. In this case, I really am just a tracer.

I was surprised when I saw this promo on their website. I think it is very clever in the message it sends across:

First off this is the way that you sell technology: put people in the picture. There is a reason why the iPod silouette commercials were so popular. Everyone could see themselves in the people dancing, being active, and using the product. The shot of a man breakdancing is an excellent way to catch peoples attention in a fun, positive, way.

They also have a great two word slogan that not only does good for supporting the service they are promoting (PHP Interoperability) but for A Small Orange itself. Be Flexible really defines the services that A Small Orange has itself from small $5/mo plans to hosted servers, reseller plans, and lots in between. The placement of the copy is just right since it guides your eyes along the contours of the body of the dancer giving a sense of motion.

In my opinion the message that this ad transmits is that A Small Orange is friendly, fun, easygoing, skillful, and knowledgable. Just like the man in motion A Small Orange can accomplish things that others cannot. Which is true, because they just sold me on how they implement PHP 5. Which I needed to run my ActiveCollab groupware right next to the PHP 4 based WordPress cms. So this promo works on two levels customer wise: it informs current users and attracts future ones in a pleasant, non-technical way.

Happy Holidays, everyone!

I installed WordPress + Equix over at my other pet project SunSolo and just fell in love with how easy it was to put up a header image and some words. I spent at least two-to-three weeks making my own custom Joomla template for the old skycorbett.com site and that’s just to bring it up to the point where the front page looks good.

I have high hopes for WordPress and I expect that there will be more words and less hassle. Like a sports car that can only take carry-on luggage, I want to spend more time on the road.