The first problem is I already had a relationship with these people.  I had even paid them money once. While this is a free event, I would have thought they could have made it easier for returning customers to access the site. Unfortunately, when you look at the site, on first glance it looks as if you have to fill out the whole form, which is what I did. I left the password field blank because I thought it was something about a coupon since I didn’t see Password at the beginning of the field. I then hit submit.

This is where the problems started. First of all it asked for a password. So I gave it one. Then it said your email already exists in our system. This is when I noticed the Returning Members Login now! to the right of the password box. After some fiddling around and password resets. I was able to login.

After you login, though, you have to finish filling out the form. Why? I assume it is some marketing gimmick, but they should have already had my information. To finish the process you have to scroll down to the Complete Registration button. While I give them credit for allowing you to login without doing a page refresh (and for presenting my information when I tested this after registering), the form is a barrier.

If you are going to offer existing clients a way to log in you should first make it obvious that they can do it, and two, change the page context once the log in has occurred. Since the form is fairly static and has little separation between the log in and details, the distinction between returning customers and prospective is broken.

Some options to make this a better experience is to have the email first and do a search on the email to see if it is in use and tell the user that it is in use, do you want to login or choose another email address. For returning customers, if you need that information, you should inform them that you recognize the relationship that you have, but you need to do some updates, or fill in missing data. It is insulting and suggests sloppiness when a returning customer is presented with such a form.

If the cursor shows select and I click in the cell the menu won’t close. That is not what one expects.

jQuery’s Delegate, though, makes it easy to deal with the situation. You can put delegate higher up the DOM and when ever a click event occurs it will propagate up the DOM it will fire the event you set with delegate. It is a handy feature. I set mine at the containing div for the page which insures that any click on the page will close the menu.

$("body").delegate("#myDiv", "click", function(){
	//do something
});

Http: The Definitive Guide

SEO Warrior

CSS Cookbook, Third Edition

jQuery Cookbook

Programming the Semantic Web

Even Faster Web Sites

JavaScript Patterns

HTML5: Up and Running

High Performance JavaScript

Developing Large Web Applications

In the first image I have filled out all of the form fields except the card type. There is quite a bit of sensitive information on the form, including a password, the credit card no, security code, and the expiration date, all of which took me some time to find.

When I clicked submit the form highlighted most of my errors. Unfortunately, it also cleared the password that I worked so hard on to create. Worse, the form has not indicated the error. When I fix the card error and click submit the page is going to return another error.

Here the page indicates I am missing my password, which I had already entered. What isn’t obvious right away is that the security code has been erased, too. If you were to fill out the password fields and go straight to the submit button you might miss that the security code was not filled out. You click submit and the page returns an error saying the security code hasn’t been filled out. But it has also cleared the password again and isn’t telling you clearly. So the process begins again. It could take several attempts to fill out the form and by this time you are getting mad.

When I fist filled out the form they didn’t have the pop up warnings, which are a big help. Unfortunately, the pop ups don’t cascade from one form error to another when you fix the error. Instead, you have to click the little X on the pop up to get the next error message to pop up. Who wants to do that? What they should attempt is to show each error message as the previous one is cleared. Another part of the problem is the visual separation of the password and credit card information. If they were closer to each other it would be more obvious that the two errors had occurred. Since users are less likely to make a mistake with their address, moving the email, password and credit  information nearer to each other would probably help. Finally, why do they need to clear the password anyway? Isn’t the connection secure to begin with? Once and a while developers can be overly security conscious.

One last problem with the form is the card type selection box. If you fill out the card number and expiration date before the card type, you will loose all you data. The card type drop down is programed to reset the fields when you select a new card. This doesn’t make sense since card numbers and expiration dates are on every card there.

Although they have improved their form a little since the last time I filled it out, many of the problems I first encountered still remain. I hope they have these fixed when I have to renew again.

HTML 5 will introduce new features that help us (and search engines) better dissect a webpage. In the past, <div> elements have been used everywhere where, in HTML 5 an array of elements will be available to describe navigation, text sections, articles and headers. The improved sectioning could quite easily assist a search engine in understanding the layout of a page – check out this post on block analysis to understand why that’s cool.

Canal Sur is full of examples of how to confuse the user and is instructive in what not to do. The analysis of the site will focus on the search and navigation systems and how they either don’t exist or lead the use to the wrong information. In analyzing the site and its search features, I want to look find the current episodes of a program, either on the show’s home page or somewhere else

Home Page Search

The problems with the Canal Sur site begin on the home page. Imagine that you wanted to find the most recent episode of the program El Público Lee. What would you do? You could search, which many users do when they don’t see what they want, or as their primary means of site navigation. The site search(buscador in Spanish) is in the top right an extremely common location. If were to search for El Público Lee and hoped to find the show’s home page or the most recent episode you would be out of luck

Canal Sur Home

Instead, you would get a list of results that are vague at best (even if you speak Spanish). The first two entries are about the show, but when you follow the links you don’t go to a sub page within the show’s sub site. Instead, you go to a press release where you can download a Word document. The second result, which looks the most promising since it actually talks about who will be on the show, has the same problem. The last two items on the first results page are about a different program called El Público.

Canal Sur Search Results

The results page seems designed to confused. First, showing press releases in search results is not a great idea. Press releases are not particularly as time goes on. More users will be looking for the actually content than press releases, especially as the release ages.  Moreover, it is unclear why one press release has more relevance than another. As a regular viewer of the program, I know that the release does not refer to a recent episode. It should also be obvious what the link will go to. Some how they should codify what is a press release and what isn’t. Finally, the search algorithm should limit the results by the three words, El Público Lee. If designers are worried someone will miss El Público, they should offer a “Did you mean” option. If you are going to have a search on your site, you need to produce manageable and usable results that work to user’s expectations. Going to random press releases is worse than not having a search option.

In part two, I will talk about finding the show home page via navigation.