My iPod Touch apps, originally uploaded by LondonBrad.
 

Some of the best bits:

Smart trolley

Allows customers to get more of a handle on the shopping they are (or aren’t) going to buy. My favourite bit is the AJAX’d pictures view that shows quantities as multiple items.

Speed

From day one, we knew that buying groceries online was a fairly unique task for most users - with most visits resulting in around 50 products being added to a trolley. Speed is a key factor in making this a viable option for customers. Pages have always been as light as possible (in terms of HTML, numbers and weight assets, and simplicity of the DOM for fast rendering)

Catalogue navigation

In the latest incarnation (currently in beta testing at time of writing) the catalogue navigation has seen a huge overhaul and now uses meta data to drive structure. This has enabled us to create contextual navigation that allows the system to represent different modes (type, status, storage, lifestyle, who it’s for, brand) of decision making throughout the task of finding a product. This also works to make an interesting journey if users don’t exactly know what they’re looking for. There are many other advantages to this system which I’ll blog about another time.

Simple delivery slot booking

Slot (delivery time) booking has become inherently complex with multiple address functionality, variable pricing, variable thresholds and minimum delivery values, availability and green vans. Throughout these changes and additions we’ve managed to keep the process simple.

Simplicity

My goal with any design is simplicity at a very high level. This may sound like an obvious usability goal but refining any process or interface to its most minimal constituent parts at an early stage is something that often appears to be overlooked.

Accessibility

For the most part accessibility is EASY! However you have to think about it as a fundamental part of design and code creation — it’s a painful thing to have to tack on. I also think that it helps you make lots of the right design decisions. If you design with accessibility in mind I think this also helps avoid many obvious usability problems.

Making the customer the most important

Luckily this is something that’s been at the core of Ocado and the way it behaves towards customers is reflected in all aspects of the business (with the exception of some rather irritating radio ads). I never saw any resistance to changing things on the site purely to make users’ lives easier.

First Non-framed UK grocery site

This was a pet goal of mine for many years. Ocado used frames for a long time, for performance of ‘adding to trolley’ and the stable user interaction behaviour it provided. I never liked this even though I was fully understanding of the advantages it had. The semantics of having different pages in different states appearing as one, and the inherent problems and design issues this has meant that I was always aiming for a non-framed design that could offer the same performance.

I knew it wasn’t going to start well because I had to fire up my Windows XP laptop - something I hadn’t done for a month or so. So, after the slew of updates sent from Microsoft were finished installing, I started the setting-up of the BBC iPlayer.

After downloading the relatively small iPlayer installer and entering a pretty obscure username and password provided in an invitation e-mail, I was off. The installer ran without problem and then prompted me to log-in to iPlayer. However, after carefully typing in the username and password several times, it wouldn’t accept them. A few attempts later, I realise that there’s an option to create an account (apparently this isn’t the one I was supplied with, and I was supposed to guess this). Account created and I’m in, but not feeling that ping-ponging from browser to software is very friendly. I could browse all the programming that’s available to download and tried to download the latest Nigella Lawson episode (I wasn’t actually going to watch this, it makes me bilious), but was presented with a message and then tons of instructions relating to the fact that there’s a problem with my DRM certificates. Following the instructions on how to fix this (it told me how to show hidden files and protected system files, smooth!) by renaming some non-existent DRM folder and then following a link to an MS page that is supposed to sort things out. Back in Internet Explorer which is now whinging at me that there’s some Active X software that’s trying to do something, and which I agree to, there’s a page where my only option is a disabled button. I guess this means that I don’t get to watch anything.

So my initial thoughts contain the phrases: “cobbled together”, “badly thought out”, “badly executed”, and “are they fucking kidding?” - in no particular order.

For general DVD quality movies:

• File format/Codecs: MP4 AVC
• Encoder: x264 (h.264 Main profile, options: me=umh;no-fast-pskip=1)
• Quality: 62% Constant quality
• Picture settings: Anamorphic (if available)
• Audio: Stereo, 44.1 KHz, 128 kbps

This should result in an approximate rip speed of 18 frames per second on first generation Macbook Pro.

For TV (4:3) formatted animation:

• File format/Codecs: MP4 AVC
• Encoder: x264 (h.264 iPod)
• Quality: 50% constant quality
• Picture settings: 640 x 480
• Audio: Stereo, 44.1 KHz, 128 kbps

This will also playback on a 5G video iPod as well as being a fairly optimal compromise between quality and file-size.

* [**TextMate**](http://www.macromates.com) - Ultimate text editor. I’m not sure what else to say about this one, it does EVERYTHING that you could want or imagine from a text editor. I use it for blogging, building websites, and for €39 it was a welcome relief from Dreamweaver®.

* [**Quicksilver**](http://quicksilver.blacktree.com/) - Launches applications by typing part of their name. Helps keep my dock uncluttered and saves me hunting for applications.

* [**Newsfire**](http://www.newsfirerss.com/) [RSS](http://en.wikipedia.org/wiki/RSS) reader which is a fantastic bit of UI design and a complete pleasure to use.

* [**Handbrake/Mediafork**](http://handbrake.m0k.org/) - DVD Ripping and video encoding made incredibly simple. I’m not sure how this application is legal, but I love it.

* [**Adium**](http://www.adiumx.com/) - The mother of all [IM](http://en.wikipedia.org/wiki/Instant_messaging) clients. It talks to just about any network you can think of and has a really nice customisable user interface.

* [**Omnigraffle/Omnioutliner**](http://www.omnigroup.com/) - Help you think, plan and sort ideas.

* [**Delicious Library**](http://www.delicious-monster.com/) - A media library, for books, DVDs and CDs that includes barcode scanning, this one still really amazes me. Definitely something for the inner librarian in everyone.

* [**svnX**](http://www.lachoseinteractive.net/en/community/subversion/svnx/) - [Subversion](http://en.wikipedia.org/wiki/Subversion_%28software%29) GUI for common commands. It’s not perfect and doesn’t have an extensive set of commands, but if you’re learning to use Subversion, it helps speed up simple operations and slowly eases you into the command-line.

* [**Camino**](http://www.caminobrowser.org/) - Because I really like [Firefox](http://en-us.www.mozilla.com/en-US/firefox/), but it’s bloated and ugly.

* [**Cyberduck**](http://cyberduck.ch/) - I could wish for more from an [FTP](http://en.wikipedia.org/wiki/Ftp) tool, but I’d expect to pay for something that does less.

Generally we try not to change the UI too much in one go, but the new features are entirely aimed at making shopping for groceries on Ocado more fun and at reducing the amount of reading required. One of the unique issues with grocery shopping is the number and variety of products that a customer will add to their trolley.

There are two major new views of the contents of a trolley to help customers see what they’re buying: [Pictures](http://www.flickr.com/photos/londonbrad/426746274/), and [Categories](http://www.flickr.com/photos/londonbrad/426745971/).

I couldn’t agree more with Tadeusz Szewczyk about the reasons he states about why Adobe® Flash is in demise. I’ve yet to see a ‘good’ website that is built in Flash. Invariably the message or reason for being is so pointless that it requires a song and dance to make it interesting. In nearly all cases a more suitable solution would be one static web-page which which can be scanned quickly by the user, and which gives as much information in the time it takes to work out what the designer has created and that you can’t be bothered to deal with it.

I find that it can be quite a compelling media-type when it’s embedded into web pages and when it is used to bring animation and audio to static content, but in using it, companies are being a little presumptuous that users actually give a shit enough to sit and watch the thing.

The idea of Flex is scary in that ’someone’ must think that it’s a good enough idea to want to use it. What is the point of running an application framework within a perfectly capable existing one? I mean, I know why web agencies like to use Flash — because it tends to lock clients into the pain and cost of updating, but why do clients choose it? I guess the idea is that they love to have the total control over exactly how their product/brand looks and behaves regardless of the numerable negative effects this has on the user’s experience.

I generally tend to find Flash-based websites so obstructive to the point that they can be analogised by the scenario of going into a shop to buy something, but before I can get through the front door, a shop assistant - dressed in corporate attire and sporting a huge logo - blocks my way and does a song & dance in front of me proclaiming how wonderful the company is, whilst also telling visually impaired customers to ‘bugger off’. My point is, if the company is that wonderful, if the services they offer are compelling, interesting and great, I will see that for myself. I don’t need to be stopped and told that before I enter. Building a brand online is not just about looking cool and waving your logo in front of users’ faces, it’s about what you do and how you do it.

I am not a Windows user so haven’t been too excited about getting a new Microsoft browser, but I do have to support the things. To this end, I fired up my old XP machine to install Internet Explorer 7 – now that it’s out of beta. I was quite shocked/pleased to see that they aren’t allowing installs without having first run the Windows Genuine Advantage validator (and yes, I know that ‘advantage’ is stretching their promise somewhat.)

Does this mean that all the users who’ve had problems with WGA validation, or actually don’t have genuine copies of Windows XP will never get to have IE7? And will they head to Firefox instead (if they haven’t already)?

I took the plunge and coughed up £200 for Apple’s Aperture application because the combination of iPhoto and Photoshop really just isn’t a useable option for a keen amateur photographer like myself who shoots more than a handful of images at a time.

Initially have to admit that Aperture seems to be really complicated and not as intuitive as iPhoto for very basic tasks - some are even downright impossible; removing keywords from multiple images for example. The UI is very nice and it’s the first time I’ve experienced this high-res pro-app style from Apple. I quickly understood what was going on and the various functions of panels and layouts which had previously annoyed the hell out of me in Adobe’s Photoshop Lightroom Beta.

The non-destructive editing and file management make you start thinking more about the pictures themselves and not files, giving you much more freedom to play around with adjustments without any worry about doing something you can’t undo or tweak at a later date.

Using Aperture so far has made me look more carefully at keywords, description and other meta data. I feel like this application is giving me the tools and freedom to concentrate more on photography and less on methods of post-production.

Shooting and dealing with Raw files is a breeze - I don’t see myself shooting JPEGs on my Canon EOS 20D much in future. The colour range and adjustments available from Raw is definitely worth the extra storage required for each shot.