CNN.com, designs from 2001 – 2007

CNN.com launched their new design this month and has received positive feedback from the industry as well as users.

A representative at CNN quoted “We’ve tried to keep the new site clean, easy to use, and performance centric. We really hope you agree when you see features like our integrated stories (all story elements on one page… yeah!), and our new flash in-page video player, so people on Macs can now enjoy our video without plug-ins. And in July, we’ll be bringing you live breaking news video – all for free.”

Here are some of the past designs from 2001 – 2007 and below you can find an article that talk about ‘web 2.0izing’ of CNN.com

User quote: “Impressive design; I’ve been loving CNN’s international on-screen look recently as well. Far better than the British channels’ big red shouty BREAKING news bars.” Full article: “CNN.com To Launch Web 2.0 Re-design This Weekend“

iPhone – No manuals required

Quoted on Seeking Alpha – “No manual is no problem. My 14-year-old son Robert picked up the phone and could use nearly every function immediately with no instructions. So could my 11-year-old David. The iPhone feels incredibly intuitive and obvious to use, which is a huge testament to its usability and the technology inside it.”

I wander when we can start using most of our other devices without manuals.

You can read the full article on Seeking Alpha

Cell Phone for Baby Boomers – Easy to use

The Jitterbug cell phone for baby boomers takes the complexity out of a cell phone by removing many of the features. Jitterbug concentrated on both the physical (industrial) design and the user interface.

For example, the physical design of the phone introduces a soft rubber cup around the earpiece that doesn’t just make the phone more comfortable but also blocks ambient noise, making the phone easier to use for the hearing-impaired.

The graphical user interface eliminates icons or menus and offers series of simple questions to the users. Users can simply answer using the big bold YES and NO buttons on the handset. For example, in the screen below phone offers the user to listen to their messages, the action required by the user is either YES or NO by clicking those buttons.

Overall Jitterbug is another good example of a company that designed a product by keeping the user in mind.

Take a look at their demo and you will notice that each feature is introduced by the words “Easy to use”, or visit their website.

Easy to use Video Camcorder

Today there is hundreds of video camera in the market, each coming with tons of features, but can you remember all the features? Are these features useful? How many times have you felt lazy to pick up your camera, shoot and captured video to playback on your PC or TV because it takes up too much effort? And then the memory tapes (Mini DV, H8), card, batteries to worry about.

And, what about the parents who have a running toddler and a baby to carry while shooting – how easy is are these cameras in situations like these? Not much!

PureDigital thought about all these factors and focused on a camera that is really easy to use, so you can focus on what you want to capture in the easiest and quickest way.

Here are some of the quotes they have recived:

• Wall Street Journal: “Stunningly simple to use“
• BusinessWeek: “A Sweet and Simple Camcorder“
• CNN Money.com: “YouTube for Soccer Moms“
• Chicago Tribune: “Catching life’s little wonders on video just got easier“

See the picture below of Flip Video or learn more about the camera at PureDigital product page.

Customer Centric Design Process: Philips’ Norelco

I read this article in business week on Philips’ customer centric design process to redesign their electric shaver. The ROI is yet to be measured on this product but I can say for sure that after listening to 5,000 men in U.S., Europe, and China this new electric shaver would be an easy sell.

Here are some highlights from the case study, if you want to get a quick snapshot:
Research:
• Philips interviewed 5,000 men in U.S., Europe, and China between the ages of 35 and 54
• Target users are experienced shaver who is comfortable spending more for a premium shaver

Findings:
Men didn’t have problems shaving the face but had problems with hairs on the neck under the chin.

Solution Idea:
To design an electric shaver that can easily maneuver around the neck, with least irritation.

Prototype:
Among other finds from the customers, the design was inspired by many ads showing cars, phones, and men accessories and color was inspired from the Silver Motorola RAZR phone, BMW Z4 Coupe, and the Volant silver series skis.

You can read the full article on Businessweek.com

Call to Action

“Call to Action” is a marketing concept that is also applied to the web. In marketing, it’s used to make the advertisement effective by telling prospective customer what steps they need to take next. You can see this prominently in infomercials where the advertisement would say that you need to “pick up the phone and call the number on your screen now to order” because they don’t know how many of these products they can sell at this low price, and how long the free gifts would last.

The meaning of “call to action” remains the same on web too, below is a email from”Feed the children” with prominent “call to action” telling me the “options that I have”, “steps I should take next” and “how I can take those steps” and making those as clear as possible. Take a look below, and while you are at it you can help by donating too.

Here is another article on “Call to Action” and a link to Feed The Children’s website.

404 Error page – guidelines and examples

I was working on a web-based application that needed a custom 404 Error page, so out of curiosity I got online to see what some of big players in the industry (who also have huge teams of usability and user experience people) have done.

So what is a 404 Error Message?
404 error message is a web page displayed by most web servers when it is unable to find the original page that the user requested. For example: If John request for http://www.yahoo.com/mail.html on Yahoo.com and if the page does not exists or has moved, Yahoo’s server will by default show an alternative basic page which is a 404 Error page, unless this has been modified or customized.

The basic guidelines for error messages are:

1. Error message should be written in plain english so all users should be able to understand it’s meaning.

2. The message should explain the user why they are seeing this page.

3. And finally, the message should suggest the user what steps she/he can take to fix it.

To my surprise, some of these big players have done a lousy job to follow these guidelines. Let’s take a look at some samples.

 

Google – Does NOT follow usability guidelines
Monster – Does NOT follow usability guidelines (worst 404 page I’ve ever seen)
Staples – Does NOT follow usability guidelines (Staples doesn’t show any page, just redirects to the homepage)
Yahoo – Follows usability guidelines (Redirects user to homepage after 10 secs)
MSN – Follows usability guidelines
Useit – Follows usability guidelines
Here is a sample of basic 404 error page displayed by IIS (Internet Information Server by Microsoft):

Web-based cart sorting tools

Card sorting is a method used to find out how people group information. It helps to understand patterns on how people would expect to find information. There are two main methods for performing card sorting, i.e. Open and Closed Card Sorting. Below you can find a few articles on card sorting and 2 web-based tools for card sorting.

Articles:

1. Card sorting: a definitive guide by Donna Maurer and Todd Warfel
2. What is Card Sorting? by InfoDesign
3. Card Sorting: How many Users to test by Jakob Nielsen
4. Information design using card sorting by James Robertson

Web-based tools:

1. WebSort™ is a web-based software tool that enables researchers to perform remote card sort studies. Create a study, send a link to participants, and analyze the results- all through a web-based interface.
2. OptimalSort gets users involved in information architecture design.

User experience in the news

I’m lately seeing coverage of news related to user experience, here is one piece seen on a pharmaceutical news site..

“New Look and Feel – Updated graphics and images in addition to new page layout and format provides visitors with an improved user-experience. …”

Read the full story