In last post, we did some initial Usability Testing and User Experience analysis for ‘Pizza Hut’ (www.pizzahut.com) Home-page. In this post we will try to dig deeper into other area (Create Account’ form) and see if we can discover anything interesting!
[I will be including 'Screen-shots' of the web-site regarding the point I am trying to make, but it may add good value to your reading, if you have the website open in additional browser (preferably Chrome or Firefox) window/tab. As always comments/feedback are welcome & if you can bring in any new observation that will be awesome!]
Let’s try to ‘Create Account’ by clicking the link on top. Notice that there’s no tool-tip for ‘Create Account’ link. A short line describing why user need to create account as tool-tip would have been better. Anyways, here’s what we get on opening that link:
I am using Firefox 11 & it takes noticeable amount of time to open this page. My firebug shows lots of time taken by Google Analytic, and Facebook and Twitter API. Tracking has become high priority business need, especially in these kind of businesses, where there is cut-throat competition and everybody in the industry striving hard to win as much ground as possible. However, looking at the performance I feel there’s need for optimization and surely, doesn’t seem too complicated to achieve.
It displays ‘in progress’ animated icon while users are waiting for the page, which is good thing to do. Although it opened within couple of seconds for me, I can imagine it taking longer on slower connections (which is rarity now these days). Progress icon is something that doesn’t get the amount of priority it deserves amidst all other development work that’s lying around. It’s fairly easy to do there are some pretty good JQuery resources. From Product management perspective, it also could be thought of an important way to positively affect the actual ‘conversion’.
I don’t see need for 2 separate ‘in progress’ icons though and showing just one for the whole section might have made more sense. Keep in mind, mostly these progress icons are based of AJAX request and due to its asynchronous nature it may be little trickier to accomplish it!
Designers (especially photo-shoppers) normally just have symbolic representations of ‘on progress’ icons in their mock-ups and it’s kind of ‘go -hunt yourself’ thing for developers.There are some pretty rich collections of these are available, however no point in over-spending time, if it’s not so important for business.
Moving on, it’s a typical looking ‘Create Account’ form. There’s a small box notifying users why they need to create account. Color combinations don’t look as good as Homepage …although it’s minor thing, it would be worth trying out different color-schemes.
Some of the Text seems to be too small. To be specific, some of it is as low as 10px in size ( … and I am not looking at text in footer). On Google-ing around, it seems that many developers and designers consider 10px as minimum allowable font size as standard for their projects. Other point to note is that, it vastly depends upon intended audience. However, if space is not a constraint (like may be in this case), keeping the font size ‘not too small’ may be better for readability.
Let’s take a look at technology behind. It’s mainly JQuery & PHP doing all the client side functionality. It appears to be well written and seems to be following general best practices. Most of Javascript is compressed and not many JQuery plugins used, which is generally a good thing.
Now let’s explore some of the functionality. When ‘Create Account’ button was clicked while keeping everything blank in form, several validation messages appeared. On my Firefox 11 it appeared mis-aligned. I tested it on Chrome 18.0.* and IE9 and saw the same mis -alignment. Huh … this could have been a simple CSS fix.
Validation can get tricky at times and especially with plugins, things can get ugly at times, if not maintained correctly. Now if we try to enter the requested information on Form in order to Create account, the validation messages appear again on top of each field. Upon completion of the field, new validation message goes away but old one still remains. Not a good User experience for sure.
Another interesting bit about the validation here is, if you try to enter characters instead of numbers in Phone field, a message appears informing user that they should be entering numbers only. It’s a good looking effect … and what I liked about it is that it disappears in couples of seconds or so. I have played with many validation plugins and some of them are really great. I liked the way the message disappears though! Here’s a greatly configurable JQuery resource, if you are aspired to do something like this – http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html (Notice that, its actually a tool-tip!)
Usability Testing and User Experience
Validation messages are not consistent. For example, you are enter less than 6 character password and will be able to move on without any validation message popping up, like in other cases.
This form does ‘Address’ and ‘Phone’ validation after Form submission, which is smart and perhaps essential in this case as it must be correct and valid for delivery purpose.
Few other minor things would be -
- Confirm email field should not allow ‘paste’ in order to ensure correctness of email address entered.
- On any validation error, password fields should be blanked.
- Mouse cursor doesn’t change when hovered over top tabs (‘pizza’, ‘p’zone’, etc.) which may be misleading.
This concludes this second part of ‘Pizza-hut’ website review. Although it fails at many minor things as noted above, if you are hungry and craving for Pizza, you should be able to get one through this 
. I hope you would be able to take-away few things from the above discussion for your Project/Work. Questions/Comments are always welcome!