As a part of that system, I needed to provide detailed stats for certain situations, such as a list of all transactions that had a discount code used. At first, I had one method per drilldown, all of which shared 90% of the same code. I tried and I tried, but I couldn't work out a way to abstract out the changes.

The only changes in the code were that the number of items counted differed depending on the section. E.g. On the sandwich breakdown all units with a specific PLU counted, but on the discount one, only items that had a discount applied are counted.

As the criteria used changed with every drill down, and wasn't just a case of comparing a field to a value. Passing in the field to check and the expected outcome as strings wasn't going to cut it.

How To Solve It

My first option was a giant if/else statement, or a switch. Pass in a parameter or two to the function and run whatever filter was needed. While this could have worked, it couples the two functions far too tightly for my liking, and I'm putting logic that belongs in multiple functions into one.

Another option was to conditionally define a function filter which took multiple optional parameters and automatically run it in the drilldown. Again, while this would have worked it's not a very clean way to do it.

Enter lambda functions. By passing a function as a parameter, we can filter the data as selectively as we like. By default, $__filter will be null, so we can check if there is a filter to run at all. If there is a filter, run it and handle the response however you want.

Short Example

Imagine we're selling things online. We have a model that returns all of the transactions made by a specific customer. We want to use all of this data to generate statistics - some for all the transactions returned, and some only for items that match our filter.

You can be as generic or as specific with your filters as you like. For example, this one will only return data for items that have a price of over £5.

function over_five($__transaction_ids) {
        $filter = function($__item){
            return $__item->sale_price > 5;
        };
        $r = $this->_filter_data(
                model::get_transactions($__transaction__ids),
                $filter
        );
    }

While that's a nice simple example, we can also make things more complicated by passing in variables to be used in the function with use. You simply tell the lambda function that you want to use a variable that's in the current scope, and pass it into your new function.

function discounted($__transaction_ids, $__code) {
        $filter = function($__item) use ($__code){
            return $__item->discount_code == $__code;
        };
        $r = $this->_filter_data(
                model::get_transactions($__transaction__ids),
                $filter
        );
    }

Of course, the two filter functions are useless without the function that actually applies them to the data and gives us something back. This is a very contrived example, but hopefully it'll show how lambda functions can be used to filter out data we don't want.

function _filter_data($__transactions, $__filter){
        // Some stats that we're gonna collect about the data
        $r = array();
        $r['total_items'] = 0;
        $r['matching_items'] = 0;
        $r['transaction_count'] = 0;
        $r['items_to_output'] = array();

        foreach ($__transactions as $k => $transaction){
            foreach($transaction as $item){
                    // Anything that's done every iteration goes before
                    // we try and filter the data
                    $r['total_items']++;

                    // If we have a filter provided
                    if (!is_null($__filter)){

                        // We pass in our item, and if it doesn't pass
                        // the filter skip the rest of this iteration
                        if (!$__filter($item)){
                            continue;
                        }

                    }

                    // Everything that we need to do if it matches
                    // the filter gets done down here
                    $r['matching_items']++;
                    array_push($r['items_to_output'], $item);
            }

            $r['transaction_count']++;
        }
       return $r;
    }

Notes

It's important to note that this only works in PHP 5.3 onwards. In previous versions, you would either have to use if/else or conditionally defined functions.

Additionally, you could also do all of your filtering within mySQL itself. Unfortunately this wasn't possible in this situation, as the database contains massive amounts of data. Running 6 big queries on the same page when I could have run one generic one and filtered it wasn't an option

Related posts:

1. HowTo: Codeigniter Partial Library This assumes you have moved both the application and system...
2. Javascript Control Structures I stumbled across http://eloquentjavascript.net/ and decided to have a flick...
3. Working with DOMDocument Nowadays, most of the services we need to access programatically...

Fun Times!

Rich Quick decided he'd organise a bit of something on the Friday night at The Counting House, so about 7ish I decided to take a walk up the promenade to the pub. I'd been there for about 20 minutes when Rich and his band of merry men (Jack, Chris and Paul) appeared. We had a few pints and were eventually joined by Lally, Annamarie, Kat and Charlie. We headed down to South Pier and met up with a few others for a drink before they called it a night/went to meet others and we headed back up to The Counting House. This is where things start to get blurry. After several pints/whiskeys/shots, an awesome rendition of Lady Gaga's song Alehandro by Jack and a mission to Walkabout, I made it back to the B+B for a few hours sleep before #bcblackpool started. Next time, I'll definitely by following Alistair's lead and bailing quite early on the preparty.

The Day

I arrived just in time for the opening talk and speed dating. It's a nice idea, especially at barcamps like Blackpool where there's quite a few first time attendees. The only thing I can say about it is that the dating rounds were a bit short, and usually ended after only one person had introduced themselves and what they do.

This year the sessions were 45 minutes long, compared to the 20 minutes last year. I've got to say, it's great to see organisers taking feedback into account when planning the event. While 45 minutes is a bit long for some people, we're pretty good at innovating and the day saw people doubling up on sessions and running two per slot when they knew theirs wouldn't be anywhere near 45 minutes long. Maybe 30 minutes next year, including 5 mins questions and 5 mins to move around?

The first session I saw this time was probably the one I found most useful. Ben Waine showed us xdebug, and how easy it is to install and configure. No more print_r and pre tags! It's been something I've been meaning to take a look at since I saw Derick Rethans talk about it at PHPNW09, but Ben's talk gave me the kick I needed.

The second most useful talk I saw was also PHP related, though the concept can be applied to any language. Jeremy Coates did a talk on Continuous Integration using Hudson. I'd previously looked at phpUnderControl, but Hudson looks much easier to set up and run with. Again, it's something I've been looking into, but it's overkill for the projects that I work on. Maybe in future when I start working with a team of developers again it'd be useful, but as a sole coder, I don't really need it.

Tim Hastings pulled out Tag Walk to show us all again, and didn't disappoint. From following twitter during the talk, it seemed as though it came across as a sales pitch to a few people but I didn't see it at all. From my point of view, it was a great introduction to see how we can use the relationship between tweets to add context to other tweets that previously had no real meaning (the Elvis example was a great one). Tim and Jason are also working on another top secret project that looks very promising, so keep an eye on @timhastings and @jreast for news on it.

I *finally* made it to Lalita's talk on British Sign Language after a few failed attempts, which was lucky as apparantly the talk is being retired now, and a new more advanced one is being planned! I'd say that it was the most fun session of the day. We learnt the alphabet, a few common words and of course, some swearwords. Lally also inadvertantly taught us how to say "dead dog" which made me laugh.

Finally, how can we forget Jack's talk on jQuery tips and tricks? I met Jack the night before and warned him that I'd be heckling him a lot, so it was quite entertaining seeing his face drop a little when he saw me sat at the back of the room. Looking back, I probably overdid it a little and will tone things down in future, but he took it as a bit of a laugh and responded well (including his little win when I said something just as it popped up on the slides). Overall, it was a great presentation - full of things I wish I'd known when I first started out.

Jack doing the jQuery talk also meant that I didn't do a talk this weekend, for the first time ever. It was great not having to hack code and examples together, and just being able to focus and enjoy the sessions being presented.

We had loads of goodies, including BCBlackpool pink USB pens courtest of Mount Recruitment, who did a session on recruitment agencies that I really enjoyed. He covered why recruiters usually don't call back if you don't get the job, why they're still useful even if they don't know anything about your subject area, and how sometimes recruiters can help you earn *more* money than you would if you just apply yoruself. There are a lot of cowboys out there, but there are a few decent recruiters who make life easier for us - Grant at mountrec is one of them.

There was also BCBlackpool rock, and some awesome tshirts courtesy of Paypal. Plus of course the pies at lunch, buffet in the evening and beer behind the bar. So, thanks to all our sponsors for contributing, we couldn't have done it without you!

Evening Time

Evening entertainment was provided by Paul Sylvester, magician extrordinaire. After he wowed us last year, I wondered what was coming this time. A few new tricks, lots of audience participation and some great banter meant that it was an awesome show. I'm just a bit gutted that he didn't bring along the guillotine this year

After we drank the bar dry and got kicked out of the venue, we headed out to find another place to drink. I managed to call shotgun as Lally was driving, however I got overruled by Annamarie. Still, a lift up to The Corner House (again) while everyone else walked went down very well. After a few pints (and a quick nap) in the pub, we met up with Tim and Jason, then Gem and a few others in a bar I can't remember the name of. Again, we carried on drinking more alcohol until we realised it was almost 4am and time to call it a night.

This was without a doubt the drunkest barcamp I've ever been to, and I loved every minute it. It was well organised, with a good mix of new and experienced barcampers. We've had two in 6 months, but I'm looking forward to the next one already!

Other writeups around the web!

• Jack Franklin
• Jordan Hatch
• LouLouK
• Steve Daniels
• Jon Atkinson
• Dan Coverdale

Related posts:

1. Barcamp Blackpool A little late, but this is the first chance I've...
2. PHPNW09 – 10th & 11th October 2009 I spent this weekend at PHPNW's second annual conference in...

Rob O'Rourke picked up a copy last summer, and after flicking through it at work I decided to buy a copy myself when it was on offer. It then sat on my shelf for months and months, until I realised it was time to redesign this blog and I picked it up.

As it turns out, design is just a set of rules. I like rules - it means that something is either right or wrong, no middle ground. The book takes you through the basics of typography and colour theory, and how to use them to great effect on your site.

There's also a section on "going it alone", setting up your own freelance business. I'll be re-reading it as I've just set up "Definitely Not Robots" as my own development house.

Designing For The Web is online in html form now at http://designingfortheweb.co.uk/, but I'd recommend picking up a hard copy. It's published by Five Simple Steps, and the quality of the book is just outstanding. Solid, glossy pages. And of course, being able to read a book and not a screen always helps.

Finally, just a quick heads up. You might want to keep an eye out of the Five Simple Steps site, as there are a few more books being published by them this year. Most noteably, Andy Clarke will be publishing Hardboiled Web Design with them, which will definitely be worth a read.

No related posts.

After looking at the Console API for Firebug (as that's where most of my JS development takes place) I decided to expand the initial snippet a little. Fortunately, the guys working on the webkit console have been keeping their API consistant with the Firebug one, so this snippet will work in either FF or Chrome

jQuery.fn.log = function  (msg, type) {
		if (typeof lastSelector == 'undefined'){ lastSelector = '--'; }

		if (lastSelector != this.selector.slice(0,lastSelector.length)){
			if (lastSelector != '--'){ console.groupEnd(); lastSelector = '--'; }
			else{ lastSelector = this.selector; }
			console.group("%s (%s)", msg, this.selector);
		}

		if (type == undefined){ type="log"; }
		switch(type){
			case "log":
			console.log(this);
			break;
			case "warn":
			console.warn(this);
			break;
			case "info":
			console.info(this);
			break;
			case "error":
			console.error(this);
			break;
			case "time":
			console.time(msg);
			break;
			case "timestop":
			console.timeEnd(msg);
			case "profile":
			console.profile(msg);
			break;
			case "profilestop":
			console.profileEnd(msg);
			break;
		}
		return this;
}

Example Usage

$("a").log("Link Slice Test").slice(0,3).log().eq(0).log();

The above code will create a new group named "Link Slice Test" and any log statements created will be logged within it. Note that the group receives the name provided in the first call to log();

There are some other formatting options: info, warn and error. To apply these styles, you pass them as a parameter to the log function. e.g.:

$("a").log("Link Slice Test", "info").slice(0,3).log("", "warn").eq(0).log("", "error");

Finally, there's a little profiling option if people want to use it. This time, the name you pass in is the name used for the timer, and must be specified when starting and stopping the timer.

$("a").log("Recolour", "time").css("background", "red").log("Recolour", "timestop");

In this case, we can see that it took 3ms to change the background colour of every link on the page to be red. You can also use "profile" and "profilestop" which in addition to providing the overall time, gives a breakdown of the time spent in every function called between the two points.

Hopefully some of you will find this useful - it was a good excuse for me to dig into the console API and apply what I found in a way that I'll use in future

Related posts:

1. Javascript Control Structures I stumbled across http://eloquentjavascript.net/ and decided to have a flick...
2. Working with DOMDocument Nowadays, most of the services we need to access programatically...

Labels

Labels look a bit like a goto statement, but are infinitely more useful. There's been a few times that I've needed to break out of a nested loop statement and had to resort to the following hacky code:

var breakOut = false;
for(i=0; i < object.length; i++){
	for(j=0; j < object_two.length; j++){
		breakOut = true;
		break;
	}

	if (breakOut){ break; }
}

While this works, it doesn't look very nice and results in you having to use an extra variable. In PHP, you can use break 2; to break out of two loops at the same time, but unfortunately it's not supported in javascript. This is where labels come in handy. Imagine the code we used above, but we give each loop a name, and tell the break statement which loop to break out of:

loopI: for(i=0; i < object.length; i++){
	loopJ: for(j=0; j < object_two.length; j++){
		break loopI;
	}
}

Some people may not like the use of labels, but personally I think that the code is much easier to read than the code that uses a temporary variable. Of course, using labels gets more and more useful as you start to nest more and more loops (imagine using four nested loops and wanting to break out of the top one ^[1])

with()

This one has a slightly more limited use case, but is still quite useful nonetheless. It's designed for when you're working with an object, and will be accessing the object's properties quite a lot.

Take a look at this code:

var car = {
	"colour": "red",
	"name": "bertha",
	"output": function(){
		return this.name + " is a " + this.colour + " car!";
	}
}

While this is only a small example, imagine that the car had ten properties. Typing this.propery over and over could get repetitive, which is where with() comes in. You pass the object as a parameter and within the with() block, all of the objects properties are available as standard variables. Going back to the above code, it now looks like:

var car = {
	"colour": "red",
	"name": "bertha",
	"output": function(){
		with(this){
			return name + " is a " + colour + " car!";
		}
	}
}

While there's not really been a reduction in code in this example, hopefully you can see how it could be useful in some situations. You can also pass it an object that already exists such as:

with(car){
	alert(name);
}

Why?

I've not come across either of these constructs before, and though they're quite rare it's handy to know what they both do as there are situations that they'd come in handy (or they wouldn't exist). Hopefully one day you'll come across them to, and know what they're for instead of having to run to Google and see what turns up.

Footnotes

^1. Though if you are using four, you're probably doing it wrong.

Related posts:

1. Working with DOMDocument Nowadays, most of the services we need to access programatically...
2. jQuery Log Function While looking through some old starred items in Google Reader,...
3. PHP 5.3: Anonymous (Lambda) Functions A month or so ago I started work at a...

You'll want to start off by grabbing a copy of the library from github. You need to put the file in ./application/libraries/ and add it to the autoload file located at (see the user guide for more details)

Once you have the file and it's being loaded, we can start making some changes. I started with an empty Codeigniter download, and added the partial library to it. The next step was to make the site render using the library and not the build in functions. To do this, we need to extend our base controller using MY_Controller. There are a few resources around on how to do this, so I'll just skip ahead to when we have our MY_Controller set up and our controller now extends it instead of the base Controller.

Next, we want to hijack the function that actually shows our page and run the partial library's output function.

function _output(){
	$this->partial->outputPage();
}

This means that $this->load->view will no longer output the view to the page.

Your MY_Controller should now look like this:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class MY_Controller extends Controller{

	function MY_Controller(){
		parent::Controller();
	}

	function _output(){
		$this->partial->outputPage();
	}

}

Great! Now all of the leg work is done and it's time to start adding content to our pages. Let's go back to the Welcome.php Controller. We need to replace $this->load->view() with $this->partial->register(). However, $this->partial->register() takes three parameters instead of two. To call it, use the following format:

$this->partial->register($title, $view, $data);

You'll notice, it's very similar to the original syntax:

$title: The label that you give to that section of the page. Examples include "navigation" or "content".
$view: The view file to be loaded. In this case, it'll be welcome_message.php
$data: The data array that you pass into views normally.

We're now back at square one, the welcome message should be loaded when you access the application. "What was the point in doing all this then?" I hear you ask. Well, currently the entire page is stored in that one view file. Really, we only want the content to be in there and for the header and footer to be placed there magically.

So, let's create two files: ./application/views/pageheader.php and ./application/views/pagefooter.php. I'm going to take everything from the top of the file up to <body> and move it to pageheader.php and move everything from <body> to the end of the file and place it in pagefooter.php

If you save all off these files and refresh, you should see just the welcome_message.php file on it's own

The next step is to include the header.php and footer.php files that you just created. This is where MY_Controller comes in. The partial library has two special functions, header and footer. They take two arguments each:

function header($__view, $__data=array())
function footer($__view, $__data=array())

Both functions take a view file and a data array as parameters. They do not accept labels as they are given special labels internally. If we use those two functions in MY_Controller to set out header and footer to the files we just created, our page should start taking shape again.

After adding the header and footer, your MY_Controller.php constructor should look as follows:

function MY_Controller(){
	parent::Controller();
	$this->partial->header("pageheader");
	$this->partial->footer("pagefooter");
}

And there you have it, your controllers content are now framed. For example, if we create function hello() and that in turn loads hello_message.php it will put the contents of hello_message in the middle of our header and footer. No matter how many controllers or functions we add, they will always have a header and footer (unless we disable the header and footer, but that's an example for another time!)

Here's the sample code if you want to take a look at the code inside an application. I'm going to put together an example that's a bit more complicated and utilises $data in the header and footer, and some additional functions within the library such as registerScript and registerStylesheet along with some example views that make use of them

Related posts:

1. Codeigniter Partial Library Back in August, I started to play around with Codeigniter...
2. PHP 5.3: Anonymous (Lambda) Functions A month or so ago I started work at a...
3. Custom WordPress Taxonomies I can't think of any practical applications apart from the...

There were a few comments left on the post with suggestions. The main one was from Phil Sturgeon (of pyroCMS fame) who mentioned that it was really more of a layout library than a theme library. He was right, and this release renames the class and removes some of the functions that were specific to my project.

Feel free to grab a copy and test it out. There's still no documentation (despite earlier promises), so if you want a pointer in the right direction take a look at my post on getting to grips with the partial library

Related posts:

1. HowTo: Codeigniter Partial Library This assumes you have moved both the application and system...

Canvas is exactly what it says on the tin, a blank canvas for you to draw onto via Javascript. For example, let's take a look at the code to draw a smiley face:

ctx.beginPath();
ctx.fillStyle = 'yellow';
ctx.moveTo(125,75);
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.stroke();
ctx.fill();

ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = 'black';
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.fill();

ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
ctx.fill();

via Mozilla

While it's not too bad for simple things such as this, it gets less clear-cut for more complicated applications. For example, check out this code for determining where the mouse is on the page:

// Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

via dev.opera

As the canvas specification hasn't yet been ratified by the W3C, it is down to the browser vendors to implement it as best they see fit. This leads to inconsistancy in code and more work for us as developers.

ProcessingJS

This is where Processing.js comes in handy. Processing.js is a Javascript port of the Processing graphics library from Java. Pioneered by John Resig (of jQuery fame) and now developed by an ever-growing community, it aims to be a direct port of the library between languages. The documentation is pretty good, if a little technical at times.

Where this library comes into it's own is standardisation. Imagine the piece of code above for getting the current mouse position. In Processing.js, we don't need to check what browser we're using etc, we just know that mouseX and mouseY . Additionally, there are some built in variables and functions to deal with mouse events (as opposed to having to register your own listener using Canvas).

For example, to make a basic canvas we can draw on to using the mousePressed variable:

void draw(){
	if (mousePressed) {
		line(mouseX,mouseY,pX,pY);
	}

	pX = mouseX;
	pY = mouseY;
}

Or to fill the canvas with white when we click using the MouseDown() function:

void mousePressed() {
	fill(255);
}

Now that we have consistent syntax to be working with, there's only one more thing to do. When developing canvas sketches, you quickly end up with folders full of html files with canvases on, javascript files containing the drawings etc. Wouldn't it be nice if you could just load up one page, type in your code and see what happens? If you get bored, close it down and then just go back to the page later and it's there waiting for you. Well, someone else though that and decided to build a web app for it.

HasCanvas

Enter HasCanvas, a web-based IDE from Rob O'Rourke for making processing.js sketches. Rob's put together his own post on his blog explaining why he built it and how it works, but the first paragraph is what makes it most useful for me.

Back in March when I started playing with Processing.js I was making page after page of sketches and it quickly got tiresome. What happened next I guess you could say was a “moment of clarity” in the words of Samuel L. I knew exactly what I wanted to make and after 2 weeks of hacking in the evenings HasCanvas was born.

The login system for HasCanvas is handled using rpxnow and it allows you to sign in using a huge number of services including your Google account, Twitter account or OpenID account.

HasCanvas takes away all of the initial hurdles you come up against when first playing with processing.js - you literally go to http://hascanvas.com/yoursketchname and start developing. If you're logged in, your sketch will automatically be saved every time it is run so you can continue developing it in future.

So We Can Use This Now?

Honestly, I'm not totally sure. There's some awesome examples out there already demonstrating you can do with canvas, ranging from little sketches, to data visualization to creating full blown apps.

However, it just doesn't work in Internet Explorer. The F1 results visualization gives us this message when we try and view the site in IE, an approach I'm sure a lot of other developers will take too:

Works with the latest versions of: Firefox, Safari, Chrome, Android, iPhone OS. Does NOT work with Ineternet Explorer!

However there are some developers who are trying to add Canvas support to IE as it stands now, and they're collaborating on the excanvas project. On their website, they say you can simply include the excanvas JS file and then use it like any other canvas. I'm quite interested to see if Processing.js and excanvas play nicely together, but I'll need to find some time to set up a test as HasCanvas doesn't support Internet Explorer either.

Related posts:

1. Javascript Control Structures I stumbled across http://eloquentjavascript.net/ and decided to have a flick...

However before we started designing the system, we were tasked with going out and analysing three existing systems. In addition to this, the report had a cap of 1500 word (+/- 10%). Unfortunately this meant that I couldn't go into as much detail as I would have liked in some sections. In any case here's my report - It scored 80%, and the main criticism it received was that there were no references (maybe you can help out - I know someone has said these things, but not who).

Introduction

For our group project, we are building an online e-commerce system. As the main focus of these systems is to sell their products, I have decided to take a look at some already successful sites for inspiration – namely play.com, amazon.com and ebay.co.uk. I intend to analyse these sites and evaluate their navigability, clarity and usability. By determining the components of these sites that work well, we should be able to combine them and make our system a success.

I have chosen Play, Amazon and eBay as they cover a wide range of marketplace models. Play manage all of their own stock, Amazon are both a retailer and a marketplace for others to sell their goods, and EBay are entirely user driven. All of the models have their strengths and weaknesses, which I will discuss further.

Review

eBay sell a huge variety of goods every day, and rely on their users to categorise the items correctly. This means that they need to provide a huge number of categories, and hundreds more subcategories. I'm not sure if the number of categories are a help or a hinderence. Personally, I find them useful but I'm used to wading through a large amount of information daily. An average user may be a little intimidated by the number of options.
Items sold can either be fixed price, or run as an auction. They can be in GBP, USD or a multitude of other currencies. All of these different combinations need to be presented on screen in a similar way so that the user does not get confused.

eBay both excels and fails at this, as while the “important” functions such as purchasing the item and checking the users feedback are in a consistent location, the description of the product is created by the seller. Recently, eBay addressed this by adding metadata to certain categories (such as Laptops^[1]) which contains important information.

Amazon blur the line between them selling their own items and items being sold by others. Both appear in search results, both show an identical product screen. Underneath the price, it shows “X new, Y used”. If you click on new or used, it brings up a grid of sellers, the condition of the product and the price. If Amazon stock the product, they will be at the top of the “New” grid.

The item description contains important metadata about the product – in this case I was viewing a book and it displayed the publisher, ISBN, the fact it was a paperback and the language of the text. If there product is available in multiple formats (e.g. DVD and Blu-ray) then a box is shown with a link to alternative versions of the product.

Amazon's best (and most dangerous as a customer) feature is it's 1-click purchasing. If you're signed in and go to the homepage, there will be a box of recommendations for you. This means that from going to the site to owning the product, it's only 2 clicks. I think this has played a huge part in Amazon's success, as most other sites require 3 or 4 clicks before you get to the product you're looking for, then another 3 or 4 to purchase it.

The system I will be producing is the most similar to Play.com in my opinion. The staff of the site will be responsible for adding and managing products, and users will be able to purchase items at a fixed price. Play also shows user ratings and reviews.

There is a big emphasis on showing the user more related products on Play.com. This is presumably to maximise sales. It shows products related to the one being viewed, the top 10 in that category and a countdown to an upcoming product.

Analysis

All three of the sites are quite busy, trying to show the user as many products as possible and hoping something may catch their eye. This must be a tried and tested method as all 3 sites are quite big – but I don't like it personally. The amount of data that each site collects about their customers, they should be able to show a handful of products that the customer is interested in after only a few purchases. For example, all Amazon needs to show on their homepage is their top 10 sellers, top 10 preorders and my recommendations. That's 30 options that might catch my eye, and anything else I need is accessible via categories.

In the systems investigated, there was a common user flow. The homepage contained lots of items that the user may be interested in. These items linked directly to the product page as to hook the user in quickly. All of these items are generated based on sales data for that particular customer and the site's customers as a whole. All of the data aggregation and analysis can be done at an SQL level.

If the user wanted something specific, they would first choose a fairly broad category, and then a much more specific subcategory. Once a category was selected, they could either browse for their item or search for it within the category. The provided list of products can then be sorted alphabetically, by price or by any metadata we may have associated with the product. Again, all of this can be done at an SQL level with a combination of JOIN, WHERE, field IN and ORDER BY statements.

While I agree that Amazon's 1-click purchasing system is outstanding, we won't be incorporating a similar system. I'm intending on using Paypal to handle all card transactions as we will not be handing a huge volume of payments. We will also not be storing card details as there is a lot of legal details to handle, which are outside the scope of the project.

If there’s one thing that I noticed on all of the sites, is that they had “ugly” uri’s. While they may have made perfect sense to the browser and server, the user had no idea what data was being sent back and forth. For example, compare the following URI’s:

• http://example.com/product.php?id=2083729&col=red&_track=swh82eb2sj2&_ref=goog
• http://example.com/product/2083729/jacket/red/

Which do you think the user will prefer and remember? While the former has more information, the same information could have been sent using sessions, leaving the URI clear for information pertaining to the current page access. While most people won’t pick up on it, the second URI is a “guessable” link. What would happen if we changed “red” to “black”, would it show us the same jacket, but black? It’s small considerations like this that enhance the users experience tenfold.

System Requirements

Based on my research and subsequent analysis, I have determined that for our site to be successful it needs to have the following features as a minimum:

• Ability to browse/search stock
• Shopping cart functionality
• Admin interface for product management
• Product pictures/descriptions

While the end user will knowingly use the above features, there are a few more that I will include that they will use without realising. This includes things such as:

• Constant layout for easy navigation
• All information no more than 4 clicks from homepage maximum (Preferably 3)
• Shopping cart and account management on every page.

To enhance the user’s experience on the site, I may leverage technologies such as AJAX and Javascript to enhance the site. I do not believe that we should cater for the lowest possible browser (generally considered to be Internet Explorer 6), but that we should give our users the best possible experience possible, and have the site degrade gracefully in browsers that do not support the latest technologies. However, I will not use Flash, Silverlight or any other plugin based technology as it does not degrade gracefully. Small additions such as a countdown to the postage cut off, or the price changing in place as you change the quantity should be enough to both impress the user, and make the site much more usable.

If there is time, there are a few additional components to the site I would like to add - the main one being user profiling. Amazon does this perfectly, and there’s always something I’d like waiting for me on the home page. However, around Christmas time and birthdays, the suggestions become a little skewed as I buy gifts for other people. I’d love to be able to check a box that says “This isn’t for me!” and while it’d be recorded in my purchase history, it wouldn’t influence the recommendation engine.

Summary

There are a variety of models that my ecommerce solution could follow, but given that our team is relatively new to web application development and we have a short amount of time to design and build the system, I would like to build a shop (Play.com) as opposed to a marketplace (eBay).

I would recommend using a web framework to the team, as that will take care of clean URI’s and keep our code organised at the same time. I would also recommend using a javascript framework (jQuery is my personal favourite) to ensure that any enhancements we make work in every browser.

While our main focus is to have a database of products and the capacity to sell them, there are a lot of additional features that would make the site almost infinitely more useful. We will be implementing the minimum requirements first, additional sections such as customer profiling and a mailing list should definitely be included in the project.

This should be quite an interesting first project for us as a team, as the minimum requirements are clearly stated, but the problem is quite open ended. It’s up to us to decide how best to solve the problem.

Related posts:

1. A Remarkable Life Logging Project Let me start out by showing you a snippet of...