User experience and Usability of WSJ.com

http://online.wsj.com/home-page?refresh=on

At a first glance, the amount of information on this first page is a little overwhelming. But the website actually is doing a better job at organizing information as compared to other big news site, like CNN, in which I sometimes get lost.

Image

The thing I like the most is that the page is broke into little sections that makes sense to me. The space after the WSJ logo can be roughly divided into two columns. On the upper left is the biggest news, which is showing the syria issue on the webpage at the moment with a big obama picture. And as the target audience of WSJ is the business community, the space next to the breaking news is devoted to updates on the stock market.

As the importance of content diminishes down the page, the space is divided into three columns, with smaller pictures and smaller text. What’s worth mentioning is that the news section is given a slightly different color than the other content like commentary and video. It shows news is still the most dominant component of the WSJ.

In terms of visual hierarchy, notice the size of the Obama image as compared to those in the DON’T MISS section at the lower right hand corner. It is the same when you enter a specific story page.

Image

As shown above, the main story is clear marked from the other content the website wants to promote.

As for convention, I am not exactly sure what that means. But I guess the website utilized the habit of our eyes that read from left to right. As a result, the most important content-the biggest news of the day-was located on the upper left hand corner.

As a matter of personal preference, I like a page that’s clean. I am really not a big fan of content that is flashing or moving. Personally I think it is confusing and distractive, and makes me feel dizzy when it moves too fast. But I guess many website likes animation that’s supposed to bring variety to the website? However, the amount of animated noise on this website was acceptable to me. There is this little bar that is constantly updating latest news.

Image

Actually, I think this form is rather clever because it helps draw people’s attention to the breaking news. If the website puts it in a obscure spot in a low-profile manner, readers could easily miss the most important.

Another thing that usually is animated is the advertising. And the ads on this site is no exception. Luckily, there are only two ads throughout the front page, and they are sectioned an clearly labeled. In my opinion, the website does a great job to minimize noise and also balance the need to have ads.

Like most other website, when you hover over the content that is clickable, the color of the content changes, indicating there is a link you can go to. WSJ uses dark blue and dark red for this, which I think is more distinguishable than the standard black and bright blue.

ImageImage

To put everything in a nutshell, online.WSJ.com is the kind of news site that really focuses on the news and leave out what’s irrelevant. This is the kind of website that I leave with the information I want, rather than having to close the window because I was lost navigating through the site.

PS: As I was finishing up, the website refreshed and they updated Obama’s live speech on Syria. Notice the little “click for sound” button. I think that’s sweet whereas so many times I was browsing other websites and the sound of a video or ad just popped up from nowhere, which is embarrassing especially when I was in a quiet place and forgot to turn off the volume.

Image

Advertisements

One response to “User experience and Usability of WSJ.com

  1. nice job. You noticed a lot of detail which is very important for uses when they are using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s