Nathan J Pledger

The little things in checkouts can make all the difference

I have just completed revisiting the checkout portion of the various e-Commerce sites I help manage. The reason for the revisit was to establish ways to improve the conversion rate of users that enter the checkout and complete the checkout to make the purchase.

Part of the testing process has highlighted some interesting points about e-Commerce checkouts and forms in general. I'll share them with you, here.

Make sure the Enter key targets the appropriate button on submission

Users can find it difficult making the transition between conventional desktop use, where Enter keys and mouse actions perform certain actions, and web use where Enter keys don't follow such stringent rules as windows and dialogue boxes and double-clicks aren't useful. (Even though users double-click on web pages an awful lot.)

One aspect of this is users' habit (and perhaps rightly so) of pressing "Enter" after finishing a particular section of a form. For example, when logging in to a site, typing:

<username>TAB<password>ENTER

to enter the requested details and actioning the request. Of course, on the web, thing's aren't so straight forward as a Windows dialogue box. This is particularly a problem for .NET sites, thanks to the way that ASP.NET renders it's pages, but a fix is available in ASP.NET 2.0. I have used the new DefaultButton attribute to achieve this:

 <asp:Panel ID="pnlForceEnterKeyToLogin" runat="server" DefaultButton="btnLogin">
  <fieldset>
   <legend class="hidden">Login</legend>
   <asp:PlaceHolder  ID="plhExistingUserValidation"  runat="server"></asp:PlaceHolder>
   <p>
    <asp:Label  ID="lblExistingEmailAddress"  runat="server"  AssociatedControlID="txtExistingEmailAddress">Email Address:</asp:Label>
    <asp:TextBox  ID="txtExistingEmailAddress"  runat="server"  />
   </p>
   <p>
    <asp:Label  ID="lblExistingPassword"  runat="server"  AssociatedControlID="txtExistingPassword">Password:</asp:Label>
    <asp:TextBox  ID="txtExistingPassword"  runat="server"  TextMode="Password"  />
   </p>
   <p>
    <asp:Button  ID="btnLogin" CssClass="button" runat="server"  Text="Continue  &gt;"  />
   </p>
  </fieldset>
 </asp:Panel> 

You'll also notice that I have used the '>' character to convey movement to the next screen. I'll probably replace this with an image shortly, but the point remains the same, small visual cues like this say more than you think.

Check page-flow is useful to the user

Make sure that page-flow from adding an item to the user's basket and putting the item in the basket is logical and obvious. There are three options, each with it's own considerations:

• Recycle the same page - Users can add items to their basket very quickly and not "lose" position in the site. This is particularly useful for pages with multiple items for purchase. However, make it obvious something has happened. Previously, I have emboldened the last item added to the basket, but a distinctive message would also suffice.
• Jump into the checkout - Once "Buy" is clicked, sending the users straight in to the checkout certainly emphises the process of purchasing, but then forces users who want to continue shopping to then come back out of the checkout to continue purchasing. It also gives a slightly forceful impression, which may reduce the number of units bought per purchase.
• Jump to a page full of other products - This is probably the most widely adopted method for companies who are more on the ball with their e-Commerce offerings. Once a product has been purchased, even basic cross sell logic could generate a series of products which may also interest the user either as a complement or otherwise to their purchase. Amazon.com do this, as do Marks and Spencer. However, again, make it clear that the user has added the item to their basket.

When errors occur, make it bloody obvious!

For complex pages, validation can be a pain in the @rs3! Where do you put the validation errors? Do you out them at the top of the page, or alongside the individual controls? I choose to put them at the top of the <FIELDSET> containing the controls, for accessibility, but this means that if the user has a particularly full basket, they may not see the errors as they may "fall off" their immediately viewable screen, resulting in the impression the page hasn't done anything when they clicked the button.

I have reinforced the messages within the <FIELDSET> by a distinctive banner that is shown at the very top of the page that advises them to look further down the page for why the request didn't work out.

Usability testing

While a fully budgetted for focus-group is an ideal thing to have to help identify niggling issues in usability, throwing the checkout at random people in the office could also be a great way of spotting errors, niggles and spelling mistakes you would never spot yourself. It can also be used as a training exercise for the support staff, such as customer services teams.

And of course, accessibility goes without saying ... doesn't it?

Even now, four years or so after it became a "good idea" to make sites accessible, developers STILL generate HTML 4 with no regard to semantic or accessible content. The same rules still apply:

• Use FIELDSET's to separate sections of a form and label them with a <LEGEND>. You don't have to display the legend, hide it if it detracts from the design.
• Use XHTML+CSS to seperate your markup and content from your design. And while you're at it, how about making a print stylesheet by using media="print" on your <LINK> tag?
• Use AccessKeys on key parts of the form, such as submission or common fields such as email address. And make sure your TabIndex works correctly.
• I like to try and reduce the number of images in the "content flow" as much as possible, unless there is a particular relationship between the adjacent content. Therefore, "furniture" such as icons, decorative elements, etc. I put in CSS. That way, a user on a light-weight browser or slow connection does not have to wait for it all to download and render (assuming you are using CSS media types).
• Don't rely on JavaScript - and definitely not Flash!
• Make sure your text is of a large enough size as to be legible. Remember that about 60% of users who use the web have some degree of eye problems.

And while I'm here, this is a really neat way of hiding content from browsers, but not hiding from speech readers:

* hidden { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; }

The problem being that it is often required to have content within your markup, but want to hide it for design purposes as elements such as <LEGEND>s, <CAPTION>s, etc. are often targetted to specific platforms and users. Hiding it with a display: none or visibility:hidden is no good, because speech readers (being one of the specific accessible platforms) have started to implement these rules. This method, however, moves it off the content layer, then either moves it out of the rendering viewport or makes it obscenely small so as to make is invisible and (hopefully) so small that if it was rendered it wouldn't affect your overall design.

Is it right for dead girls Facebook page to be used for cheap News shot?

There is the unfortunate news today that five Britons have been killed in a coach crash in Ecuador (BBC News). This is tragic news, particularly for those close to the victims. While watching the news on Channel 4 News this evening, I was shocked to see the girls' Facebook page to be used as a means of identifying one of the girls who was killed.

In the days of attacks on our privacy, either by legislation or incompetence by the government, and warnings about revealing information particularly on the internet, this surely was most irresponsible.

Note that in the screengrab from Channel 4 News this evening, I have removed some very risky information:

• Date of Birth
• Relationship status and who they are in a relationship with
• Their phone number

This grab was broadcast to the entire of the UK. Malicious individuals can use this information to cause further distress or commit fraud using these details. The BBC programme Newswatch recently covered the BBC using Facebook and MySpace pages to depict individuals in the news.

It just shows that it is even more important for users to hide thier profiles from everyone except their immediate friend network. The internet is full of personal potentially private information, including sites I have written myself, and restricting the access to information that could be regarded as being subject to fraud or misuse is even more paramount. While developing these sites, I took privacy very seriously and signed up to the appropriate legislation when required, but it seems users themselves need to take as much care as the site developers - and for news agencies not to blatently broadcast the information indiscriminately in the pursuit of a 5 second grab for a news package.

isleofman.com - exciting new look

This is going to be about a local issue, but no less relavant to my on-going pontification about web best practice. I hope that you'll enjoy it, even if you don't enjoy living here on The Isle of Man, as I do!

The Isle of Man nestles in between Ireland and England, and is home to major finance institutions due to it's off-shore status. Therefore, it supports a burgeoning hi-tech business community, and web design and web services has a signficant contribution. A number of web sites have sprung up, some work well enough, many more are really bad. One of the stalwarts of the island is www.isleofman.com, which is a web-site aimed at many audiences on and off the island. It forms an excellent window onto the island for the visitor and tourist, and an even better portal for the resident who needs access to local news, weather, sport or information about the island's businesses. I have had the pleasure to have had a brief contribution to the site, although this was before the recent change in ownership.

Those who know me and who read this collection of hap-hazard thoughts will know that I have a distinct idea of what counts for a quality web-site. Key words for me are simple attractive design, accessible, usable and semantic. 

Let's take a look at this new site:

http://www.isleofman.com/index.aspx 

 Very attractive, I'm sure you'll agree. As a showcase for the island, this page really looks the business .... until you look a bit closer and start to use it. The image caraousel in the middle of the screen is a Flash component, which while attractive, is actually quite difficult to use. For example, you move your mouse anywhere within the [invisible] borders of the control (including the white areas) and pictures start to fly left and right. A neat effect, but I wouldn't be expecting that if I was concentrating on clicking the useful links at the bottom of the page. Surely the images should only move when I am concentrating (and my mouse is too) on the images themselves? 

Unvelievably, those lists at the bottom of the page are not lists, in the semantic sense. They are just links within tables. Such an easy opportunity missed to present semantic and accessible content to search engines and users. I could have forgiven the use of Flash on the home page if these were written semantically, ie. as a series of UL > LI's. 

As you hover over the images, you wonder what is behind them, as there is no hint as to what each image is for. No text appears to give any hint. So, maybe I should click on one to find out:

Nope, still none the wiser. Those who know the island will know we have a famous association with motorsport, particularly due to the World Famous TT Road Races, which see some of the best riders race round the public roads of the island for two weeks in the year. So, you'd be forgiven for thinking that this has something to do with the TT races - well, you'd be wrong:

http://www.isleofman.com/Tourism.aspx 

This is the Tourism home page. Eight attractive photographs are presented to you, which are randomly selected each page refresh - a nice touch. Looks really attractive and usable. I would then start clicking on images to see where they go, but they go nowhere. They are not links, though they feel like links into different areas of Tourism. You'll notice I caught an ALT tag on the screenshot above - which is the same ALT tag on every image. Sort of defeats the point of an ALT tag, really. So where can I go? My eyes are drawn down to the rich content of the images and I feel lost as to where the content actually is. It takes a few moments to remember there is navigation at the top of the screen to help me.

Another cheap opportunity to be semantic and accessible would be the breadcrumb. An essential navigation aid in any medium to large site, should be implemented as it is: it is a sequential list of pages who order is important. Sounds like it should be an ordered list (OL), but it isn't.

I'm not going to spend time being overly negative, but I think I have made my point. I am a bit of a purist at times, but I am also pragmatic when it comes to the difficulties of maintaining and improving large established sites. So afterwards, how do I feel about this new look?

Firstly, the site is very attractive. The designers responsible have done a very good job of revitalising a tired design, which although attractive, was less than stimulating. I really do want to explore this site to see more of it's rich colours and imagery. But, when I can't or when I feel like I am randomly being sent around the site with no hint as to what is behind each link (the home page carousel, in particular) I feel cheated and confused. Bizarrely, the carousel isn't even consistent in the lack of information. Fair enough, a sizeable chunk of those images link through to the Tourism section - but not all of them, your challenge, dear user, is to figure out which (the Manx Flag, Celtic Dancers and Louighton Sheep link to different content). This carousel really needs a text overlay on it - then it would be complete - albeit in Flash. (Have you considered Silverlight? My bet is that it will work well with your CMS as it is XML based!)

This site has always performed very well with search engines. It has a prestigious domain name (well, if you're an islander!) and is actually often mistaken for one of the Isle of Man Governments own sites as a result of this high-ranking position in search engines. (Do a Google for "Isle of Man" and it is this site not any of the government sites that hits the top spot) As I always say, your favourite user is also your most limited user. This user cannot see colour, nor can this user appreciate design. The user cannot even make any intelligent detemination as to the meaning of the text on your page. This user is Google, et al. This is one reason why accessibility is so important, not to mention the very real and relavant audience of users who do not have the capability of obtaining the same web experience as you or me. Whether blind, deaf, wearing glasses or difficulties with motor-skills, these users are just as important. So an accessible web site, using industry best practice is essential. Simple rules like avoiding tables when they are just being used to form layouts, recording correct and meaningful text alternatives to images AND links and using semantic mark-up are the basic building blocks on which to build a site. This site breaks all those rules.

Saying that, one big no-no in accessibility is opening new windows pointlessly. In viewing this site, I had the misfortune to have to sully my new laptop with Flash to have the home page work (I wouldn't bother usually, the site did work quite well without it, though it wasn't pretty) and the link to get the Flash player did not open in a new window as per accessibility guidelines. Hooray to that!

The site is a big site, and it was always going to be a difficult task to make the transition into a new design. I love the design, I love the Celtic emblems which are remninscent of the local artist Archibald Knox (and I have a sneaking suspicion who applied that mark everywhere on the site). A lot of care has gone in the little things, unfortunately, their effect is spoilt by the use of unintuitive, and uninformative navigation controls. There were a series of other bugs and spelling mistakes, but these are not important, to me. They'll get ironed out over time. While I am sad to see my own contribution to this site go (the old on-line shop software), I am pleased with it's revitalisation and wish it and the team the best of luck.

Still no viable Content Management solutions?

I previously wrote a blog over at Work Connexions*  titled "Why Content Management is a con" (make sure you go to .com not .co.uk - Bizzarre splitting of branding, I know) that broke down, for me, the benefits of a Content Management System and highlighted the true costs associated with it's implementation. For example, while a CMS seems a "Plug-in" solution for a web site, it rarely is for the majority of web sites, particularly corporate sites that require specific functionality such as shopping baskets, support portals and true control over branding.

Over the past few months, in my free time, I have been looking at a variety of Content Management Systems, which vary from the free to the tens of thousands of pounds mark. Mainly as a basis for research, but also with a view to revamping my own site. My site has suffered over the last few years due to too much work of others! It's like they always say, the successful, quality painter/decorators tend to have the scruffiest houses - and the same is obviously true for web design and development! Putting some work back a little bit, I thought I would check out some for [hopefully] a quick installation on my own site.

I looked at 5 individual systems in my research, mainly .NET-based. First, though, let me outline my requirements, with a view to the objections I raised in my previous post on the subject.

• I want a system that is modular - and I mean modular. I do not have the time to maintain my own site, but do have a need to upgrade it's functionality at will without affecting the whole. Therefore, I want the ability to drop DLL's, controls and pages into the site and not have to worry about affecting other elements of the site. .NET is great for this, if the application is written well enough. This allows me to maintain the guts of the site in a piece-meal fashion, thereby avoiding a "big bang" publish and minimising costs to me (which in my case, is time).
• I want a system that is cheap. I am not averse to paying for software, indeed, in many cases I prefer it (see How to solve a Problem like Open Source), but this is a small site and I have a limited budget - both in terms of hosting costs and purchase of software. I certainly want to avoid the expense outlined previously!
• I want a system that is accessible and semantic. The quality of markup generated by automated systems such as Content Management Systems, Blogs, rich text editors, etc. is appalling. (Semantic Web 2.0 content is hard to achieve) While I believe Web 2.0 is muddying the waters a bit with regards to quality and meaningful content, I do want Web 2.0 features such as user feedback, and an AJAX-y feel. I hate the Web 2.0 term, I've been craving Web 3.0 for a long while, now - that is when XML becomes sexy to everyone!
• Finally, I want a system that is flexible. I want to be able to have absolute control over mark-up, and I want to have control over how the site is structured when detail is important. If it comes down to writing in XSL, so be it - I have yet to think of a better way.

All these requirements are based around quality of content and reduction of cost.

So what packages did I look at?

• Kentico - a low cost solution that initially seemed quite impressive. Having downloaded a trial and organised an online walk through from the US, I was quite impressed about how it was structured and how I was being 'chaparoned' to making the purchase. Unfortunately, when the software failed to perform a simple task (I forget what it was, it literally was something like publishing an article) during the demonstration, I'd had enough.
• Umbraco - a free, open source solution that - while completely functional - lacked the "pazaz" that I would have hoped for, the admin interface being very muted monochromatic colours making it difficult to differentiate the various sections of the screen and the purposes of controls. I played with it for a while, but was not pleased with the output of XHTML and open-source worries me.
• WordPress - a fellow member of the Isle of Man BCS is well involved (U-G-H GreyMatter) with WordPress and has helped in the installation of a number of sites (most recently, and impressively, Strive PR's Strive Notes) so I was quite intrigued about this software. While it looks quite a strong package, it feels too blog-ish, which is not the look I want. Additionally, it requires PHP and while I have PHP capability, I don't have the skill and prefer the [superior] .NET platform (PHP fans - remember you are on a .NET blog site!).
• SiteFinity - a Content Management System from the makers of radControls, which I have used at Work Connexions (and are still being used - hopefully not on my $999 license!) Obviously, this system is based around their radControls, which I am familiar with, but unfortunately, is also a weakness for me. The quality of XHTML output from rich text editors is poor when they rely on the rich text editors built in to the browsers (particularly Microsofts), and this shows in this package in the editor component and the surrounding navigation components. A beautiful drag-and-drop metaphor, however, which makes content management a breeze. Full marks for interface, shame about the output.
• Sitecore Xpress - finally, there is Sitecore Xpress. Sitecore is an enterprise level CMS that I have a lot of experience with, so when this was released, it was a dead cert I would be pleased about it! And I was. Despite the very limiting license agreement, I thought I would give this a shot. Bearing in mind, it is the same enterprise class software in most respects as the core Sitecore product, this was fast to install on my development environment and I had full blogging services and a design written in TWO DAYS - from scratch. This is largely because of my experience on the platform, but also because the guts of Sitecore is all XML, so those who have a modicum of XSL can make the entire site run like a dream on snippets of XSL with excellent levels of flexibility. Unfortunately, while it is called "Xpress" and is a "personal license", it breaks down at that point. By "personal license", I expect to be able to install it on my personal hosting, which is not insignificant. WIth five databases, my preferred MS SQL database was out of the question as I only pay for one. Any further databases would cost me a lot of money. MySQL would have been slightly cheaper, but still not cost effective. So I had to settle with the SQL Lite, and despite all attempts at my excellent hosting provider, the system is just not viable on a shared platform. This, to me, is rather a trial for the "real" version.

So, after all this looking, I have come out with nothing. Although, I have learnt a lot about various Content Management Systems, what is important to users, developers and partners/resellers. Over the past couple of years I have been playing around with some techniques for generating dynamic content - such as HttpHandlers, etc. So I'm going to write my own. How hard can it be? With the WinFX technologies such as Communications Foundation and Workflow Foundation, it becomes even easier to create rich .NET applications that are truly enterprise level but cheap to develop.

Maybe if I have these requirements, other people will too, and that would drive down the "true" cost of Content Management. I intend to try. Work is well under way and I hope to have something to show for it soon.

If you're interested in following my work, please do comment and let me know. Any ideas, suggestions, reality checks, welcome.

 * For those of you who read regularly, I am no longer involved with this site, a shame after all my hard work!