With more and more people shopping online, it would be beneficial for companies to make the checkout experience as smooth as possible. No one wants to lose a sale because of a bad user experience after the customer has already decided he is going to purchase something.

One of the most frustrating tasks I have experienced during the checkout process is when entering credit card information and it asks for the expiration date. The majority of sites provide a drop down box where you can simply select the month and date. The problem is the information in these boxes.

All the credit cards I have ever had display the date as numbers:

But on some sites, the drop down only displays the name of the Month:

This is particular frustrating to me because I have to then figure out what month my number is. This may not be too difficult if your expiration date is an easy to remember month number (such as 1, 12, or the month of your birthday) but in my case, it is a month in the middle of the year which I don’t tend to associate quickly. Yes, I still get by and am able to proceed, but that extra effort could easily be avoided. Why cause the customer to pause and have to think about it?

Some sites just list the number which is simple, effective, and easy to understand:

But what if you had a credit card that just had the month name? As mentioned earlier, I’ve never seen one like this but if that is the case then the above example would lead to the same User frustration while the first case (name only) would be the simple one.

My favorite solution is to just list both the name and number:

I can still quickly select the correct month no matter what format my credit card expiration date is.

The official website for the U.S Postal Service (USPS) is the source of information for many businesses and individuals. Whether it is to track a shipment, change an address, or locate the closest post office, the USPS website must have an understandable information architecture and easy to use navigation so users are able to quickly find what they want.

The site does a good job, for the most part - providing the ability to search on each page, having commonly used links at the very top of the page and providing shortcuts with descriptions. Nonetheless, there are plenty of findability improvements that could be made to make the user’s experience better and more enjoyable.

Is that a link?

The content in the middle of the screen provides shortcuts with well labeled titles and descriptions. The problem is the titles are a dark blue color which makes it seem like they are links. Not only are they not clickable but the only link to the shortcut is the small gray arrow button at the very end of the description. The only way to tell that it is a link is to see the mouse cursor change when over the image (this is true with many of the site’s text links as well).

When you consider that people of all ages have to use the post office and might visit the site, the USPS could do a great deal to improve usability by making the title and/or description a link. At the very least, have the arrow button change color or have a pressed down state when the mouse is rolled over.

Inconsistent Navigation

The majority of the site’s navigation menu remains the same – commonly used links at the top of the page (Calculate Postage, Locate a Post Office, Track & Confirm a Shipment, etc) with category buttons (Business, Household, Buy Stamps & Shop, All Products & Services, and About USPS & News) below it. Unfortunately, this is not the case with all pages. On some of the main pages (Buy Stamps, Track & Confirm, Locate a Post Office), the entire top navigation is removed.

Keeping the navigation layout consistent would greatly improve the user experience. Users will not have to shift their attention and “relearn” an interface. Users may also spend time wondering if they are on the correct page. Having consistent navigation makes Users feel comfortable when exploring a website.

Final Words

While I’ve pointed out two of the site’s biggest usability problems in regards to findability, there are still a lot more that can be improved upon, including problems dealing with the page design, user tasks, and information display. Unfortunately, doing an entire web usability case study on the site would take a few weeks. I would be remiss if I did not end this post without mentioning some of the things the site does well in terms of findability - links and label names are clear and specific, search is available on all pages (although not very consistent in placement or wording), the homepage provides direct access to popular pages, and the use of breadcrumbs to give users some sense of where they are within the site.

The main point to take away from all of this - improving the website’s usability may cause one less person to go postal in the future.

“A picture is worth a thousand words. An interface is worth a thousand pictures.” - Ben Shneiderman

Have you ever tried washing your hands, only to discover the water was too hot? Or taken a shower in the morning, only to be hit with the initially surge of cold water before warming up? Yes, we all have. While it’s not that big of a deal, it is a nuisance that can be minimized.

Germany’s Hansa has come out with some futuristic bathroom fixtures that not only look cool but solves some of those nagging water temperature issues. By adding LEDs that change color based on the water temperature, you can now see how hot or cold the water is before ever feeling the water.

It’s definitely one of those “Why didn’t I think of that?” ideas. Now I just got to figure out where I can buy one.

Healthopeda.com (fictitious site) considers itself the “best online health resource for people of any age and any health level who want to achieve a state of optimal wellness.” Their primary source of revenue at this point is ads.

This case study focuses on designing Healthopedia for Emotion. A Healthopedia Design for Information case study was done earlier.

Healthopeida.com’s Brand Characteristics
After conducting a brand workshop and interviewing an expert in the organization’s brand, I was able to understand the client’s brand strategy. Healthopeida wants to convey itself as a fun, hip, creative brand that is not like its competitors. At the same time, they want their Users to be able to have a laid back feeling when using the site. They identified with companies like Volkswagon and Ikea.

Requirements
In order to design for emotion, I went through the characteristics and thought about other companies that portrayed similar traits. I visited Volkswagon and Ikea’s sites to see what they had in common and noticed both had very clean designs and organized with a big picture in the middle to draw one’s attention.

I then thought about the different characteristics and how they could be expressed through the web layout, features, typography, color, images, etc.

Fun

• Don’t use the traditional font’s health and other corporate sites use. Bring out interactive features and updated content like Ask the Doctor, daily tips, and interactive polls.

Hip

• Include Web 2.0 look and feel with the logo, tag clouds, podcasts, RSS feed, blogs, vector art and a social community

Creative

• Provide the information of a traditional health site while combining Web 2.0 features, giving an impression that learning about health can be fun

Laid Back

• Have an option to play soothing sounds while browsing the site.

Not Mainstream

• Separate from the competition to not look and act like the traditional corporate/health sites

Finally, I looked at our primary persona, Jenny (see Jenny’s profile in the Design for Information case study) and thought about what might touch, persuade, or inspire her.

Sound

• A soothing sound option that can be played (initially paused)
• Jenna has many health sites she can visit; this is something that separates Healthopedia from them.

Imagery

• Added a big front main picture to capture Jenny’s attention
• Rotates through images every X seconds for new articles/features
• Able to click directly
• Able to pause
• Vivid images can inspire Jenna to want to find out more

Voice/tone

• Fun, creative, hip
• If a site doesn’t show it’s value right away, Jenna usually won’t stick around so need to be able to differentiate from others
• Web 2.0 features – cloud tag, podcasts
• Non-traditional fonts and art but with the same information
• Jenna likes to feel “young” and this site’s voice/tone has a “hip” feeling

Changes or additions made to the information space

• Added more imagery
• Added popular topics tag cloud
• More emphasis on health experts (ask the doctor)
• A little less information directly available on homepage – removed tabs
• Main features and personalization abilities still exist for Jenny’s goals

The Design
Like I did for the information space, I put together all the information and sketched out possible designs for the look and feel of the site. When I came up with something I was happy with, I used Photoshop to put it together.

This design tries to give the brand and User experience a feeling that learning, sharing, and interacting with all things health can be fun and cool. While it does not convey as much information as the Information Design, it still does a pretty good job at displaying information but at the same time projecting brand values onto the Users.