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.
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.
What I think is really slick are the tabs on the news boxes. Clicking on one doesn't require the page to reload at all keeping the user experience fluid. This is done via CSS and Javascript and works to great effect.
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.
Posted by Scrivs at April 15, 2005 11:50 AM
#1 | huphtur (http://huphtur.nl)
They actually set the body background to white, instead of relying on the browsers default! That's a first for Yahoo! (Yes, I am THAT anal)
#2 | Zelnox
Hehe, yes, the tabs are cool. I saw them on their Search tabs I think yesterday. Neat.
I find their choices of colour is also more pleasing to the eye (as opposed to the sea of darker blue links).
I'm assuming the new Yahoo news is customizable? I just tried. I could only change the vertical order. -_- not a fan of so much scrolling.
I don't really use these news services though.
#3 | Johnnie Manzari (http://www.johnniemanzari.com)
I know your website is called Whitespace, and you probably put a value on white space as such, but one advantage of the Google design is the density of information. Tufte talks about Google News a great site for this very reason.
#4 | Scrivs (http://9rules.com/)
I agree that density of information can make data easier to handle at times, but are you saying that the Google page could not be better designed while still maintaing the high density of information?
I think it can (yeah I know this would be a good time to prove it).
#5 | David (http://www.davidjghay.com)
I prefer the Google layout - as someone mentionned, it's the density of information. Dual columns is a great way of doing that - having to scroll so much with Yahoo Beta was a pain. Of course, I agree that it's hardly the best designed site - but it is more functional.
#6 | Oto (http://www.thenewline.com)
I am just wondering why Yahoo is not redesigning their pages using XHTML but still relies on the antiquated HTML 4.01...
One would assume that if they go through the effort of redesigning the entire News section, they would try to make their effort last for a while in the future. I think that any current Website development should be done in XHTML and CSS. HTML is on its way out.
Another interesting point is that their code is not valid. You can check it out here. The main news page racks-up a whopping 201 errors.
#7 | Johnnie Manzari (http://www.johnniemanzari.com)
Hmmm... if you want to do a redesign of the Google page that keeps the density but makes it softer on the eyes and just, well, less ugly overall, I'm willing to work with you on it or do a pass on it of my own. I believe balancing density and readability is the key issye.
#8 | Brian (http://www.bludrop.info)
If Yahoo News beta is customizable, then how does it differ from My Yahoo?
#9 | Scrivs (http://9rules.com/)
Johnnie, I might be down for that if I can find the time. If you do come up with something make sure to share it and I will post it up.
Brian, My Yahoo incorporates all sections of Yahoo, while the news section simply lets you customize in what order you wish the headlines to appear.
#10 | David
Sorry all, this is off topic but:
I noticed that the images on this site, when rolled over, display the background color of the a:hover { background-color: #whatever }
Most of the time the bg color shows up at the bottom of an image.
I'm having this same problem on a site I'm working on..I'm viewing in Firefox 1.0.1 with a Mac. I have tried everything I know to fix it but cant figure it out. I gave img { background-color: transparent; } and img a { background-color: transparent; } but these declarations dont work. I checked in IEpc and this problem wasnt happening.
So, I dunno. Anyone have any ideas?
Thanks, David
#11 | Joe Clay (http://www.gra-phix.com/)
I'm not sure when you viewed the site originally, but the tabs do reload the page. As far as I can tell they're nothing like tabtastic tabs, which is what you're talking about.
#12 | Scrivs (http://9rules.com/)
I don't notce a page reload for the most popular or world news boxes in the down the screen. You looking at what I am looking at?
#13 | Brian (http://www.bludrop.info)
I'm afraid not, scrivs. He's looking at the tabs at the top of the page for the different sections. When I first saw the page, I thought those were the tabs everyone was talking about.
But the "Magic Tabs" are the ones further down the page that give you a glance at the different news sources for the same topic/section.
#14 | Tom
The clean looking page and better code is good but I have to say I much prefer the google news page for these reasons :
1. News article preview, I can get a feel of the article to see if it's worth reading, also I get a general overview of what is going on in the world without reading every article.
2. Clearly seperated and color coded news categories.
3. Big font for headlines, yahoo has a quite small font for all headlines except the featured story.
4. GN makes full use of browser width.
Email information is not stored by us and is only used to send out the email.
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies