It’s really no secret that Yahoo and Google are starting to resemble each other more and more everyday with their selection of services. Both have search engines. Both have webmail. Both have news. Once you start offering the same services as your competition how can you find ways to differentiate yourself from them? Well an obvious method is to create more features. Gmail came out the blocks with over 1gig in email storage blowing away Yahoo. However, even though Google trumped Yahoo in webmail features, what really makes Gmail standout (for me) is its interface in comparison to Yahoo! Mail’s, which is the case with many people I am sure.
I am giving Yahoo the benefit of the doubt with regards to its webmail interface since it has been around for so long (I believe that last redesign was 3-4 years ago) and its only competition was the equally horrendous Hotmail. But looking past that you will see that when people are comparing Yahoo! Mail with Gmail the interface design is a key feature in why they are deciding to switch along with spam protection and storage capacity.
On the web adding more features to a webpage isn’t as easy as it is to add more features to a desktop application. Eventually, you will probably see all of Google’s properties and Yahoo’s properties having the same features list. For example, Yahoo can add the same amount of storage and use the same exact spam filter as Gmail, but until their interface design changes, they will always be behind.
However, now I am starting to see a trend across the Yahoo properties that shows they have put more of a focus on design and this is a good thing. Earlier when I said that Gmail’s interface was superior to Yahoo Mail’s, I wasn’t speaking in terms of aesthetics, but how well the interface works. To me none of Google’s web applications show a great sense of visual design. You sort of get the feeling that all the engineers that are creating these projects also have to create the interfaces as well.
Yahoo recently launched their beta Yahoo! News section and it follows along the same paths of other recently launched Yahoo properties (homepage) in that it uses CSS and has a much cleaner design. If you take a look at Google News you will see a webpage screaming to be redesigned. Granted you can use the same argument with this page that I used about Yahoo! Mail with regards to age, but it’s hard to see any other place where Google is putting focus on design (although Google Maps is very slick with its use of Ajax).
I was going to compare Yahoo! News with Google News, but designwise there really is no comparison to be made. Instead I figured I would do a critique of the Yahoo! News Beta homepage.
What I first noticed when viewing the page was how clean it looked. Much of this had to do with the color scheme used by the designers along with their use of whitespace. Nothing extraordinary with the color scheme, but as I have discussed in the past, when you are creating a site for a global audience you must be careful as to what colors you decide to use.
From what I have read, blue is the safest color for international use and therefore it should come as no surprise to see many of the world’s largest corporations using it (Microsoft, IBM, HP, etc.). So even though I would like to see a bit more color differentiation between sections, it’s understandable to see why they chose a dominant blue/gray palette.
News Section Headings
The news section headings are geen and stick out on the site. This is a good decision since it helps the eyes scan the page better than if they were blue like the other links on the page. Interesting to note that the headers are the only links with lines under them. Another good decision since all the links on the page are blue, this lets the readers know that the headers are clickable as well.
I do think that the headers could have been better integrate with the boxes of the news items, because as it stands now you get header->break->box->break. This gives the design a bit of a disjointed feel, but nothing too outrageous.
News Section Navigation
Not much else to say about these boxes since they serve their purpose well.
At the top of the page you have the featured story. Sure you can assume that everyone will know that the story in the biggest box on the page will be the featured stor, but why not add a header nonetheless? A header would also serve the purpose of better separating the featured news box from the search box. As they stand right now they are very close to each other and fight for visual attention.
It would be nice to see the Special Report box within the featured news box align with the right column content below it. This would help increase the unity of the elements on the page.
What I like about the tabbed navigation at the top is that it gets out of the way of the content. If you go to a news page you go there to read, not try to understand how to navigate between the sections. On the old news page the navigation is on the left becoming part of the content when reading from left-to-right, while the beta page has it at the top not interfering with the content at all. Good change.
The code is what I would expect from an entity like Yahoo! who has to make pages viewable in a large selection of browsers. However, some oddities still persist. For example, the page is littered with <div class=”spacer”> and I think they could go without that. Much of the class and id naming scheme has been improved with relevant names. I was even surprised to see some the code well-indented.
Looking towards the bottom of the source you will see this gem:
This page is brought to you by the letter L, the number 8 and p3.news.re2.yahoo.com.
Always good to have a sense of humor when coding.
A huge improvement over the previous version and way better than Google’s offering. It will be interesting to see what effect Yahoo’s new design philosphy will have on its traffic. Unlike most other companies, Yahoo isn’t trying to catchup with Google with regards to audience because it already has it. But I do wonder how many people will defect from Google’s offerings to Yahoo’s simply because of the design.